The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

AngularJS Architecture: Basic State with ui-router

AngularJS Architecture: Basic State with ui-router

5:20
We will look at ui-router and learn how we can use it to define unique states with Eggly. This will allow us to leverage the power of a state machine in our AngularJS application, which goes beyond code management and into managing the states that exist within the code. > **note** the route doesn't actually fire unless you navigate to index.html#/ instead of index.html (see comments)
Watch this lesson now
Avatar
egghead.io

We will look at ui-router and learn how we can use it to define unique states with Eggly. This will allow us to leverage the power of a state machine in our AngularJS application, which goes beyond code management and into managing the states that exist within the code.

Avatar
Andy

Upon downloading the finished source code for this lesson, it doesn't seem to be working properly. I thought it was something in my code that might be the problem - maybe copied something from the video incorrectly. However, after downloading the source code and resolving all the External Library source issues, the page is not pulling in the template. There are also no errors in the JS Console so I'm at a loss.... Can you please double check the source code that is on github is in fact not working properly and let me know?

Avatar
Lukas

Andy -- the problem is that the route doesn't actually fire unless you navigate to index.html#/ instead of index.html. This gets fixed in a later lesson as I force the default route to always be '/'. Please let me know if you have any more questions. Happy to help!

In reply to Andy
Avatar
Xavier

Thanks for that! I started looking in my everywhere in my...

In reply to Lukas
Avatar
Ceejay

I was very confused why my code wasn't working until I read this. Thanks!

In reply to Lukas
Avatar
Taylor

I'm getting a CORS error when trying to load src/app/categories/categories.tmpl.html. As far as I can tell, I'm requiring and referencing things in the correct fashion. I'm running the app directly from localhost. The domain in my browser and in the error seem to be the same.

Is it because ui-router uses HTTP requests to fetch files? Do I need to actually deploy this application locally somehow?

Avatar
Lukas

Hi Taylor --

Are you serving the project from an HTTP server? I generally run it out of WebStorm which gives me one for free or you can use the npm module serve which is also very handy.

In reply to Taylor
Avatar
chad

I would of liked to have seen you follow your module/sub module pattern and write the routes for the modules into the modules themselves vs applying them to your "app.js" file.

Avatar
Lukas

Keep watching! :D I definitely end up there when it is all said and done.

In reply to chad
Avatar
Leo

Hi Lukas, please make sure you warn it on the video. Took me more than 3 hours to get it done.

I almost gave up, but than, I realise that I should've read all comments and here it is.

It worked with /#/.

Thanks anyway.

In reply to Lukas
Avatar
Lukas

Thanks Leo! Will add that to the description. #highFive

In reply to Leo
Avatar
Ezequiel

small contibution here...

go into 'src' folder or wherever the index.html file is located.

$python -m SimpleHTTPServer

then in your browser: localhost:8000 and that solves the CORS and avoid setting the '#/' manually at the end of the url

please let me know if this works for you
;)

In reply to Lukas
Avatar
Ezequiel

btw firing up a server "solves" the //xxx.js files calls in html... without a server you had to "fix" the paths forcing to --> html://cdnjs..../xxx.js otherwise the browser will try to locate those dependencies in --> "file://cdnjs.../xxx.js"

May I have Kudos? :P

In reply to Ezequiel
Avatar
Jonathan

Hey Lukas,

Can you explain why only 'index.html#/' works? Super confused here :S...

In reply to Lukas
Avatar
Lukas

Hi Jonathan --
The reason only index.html#/ works right now is because we haven't set up a fall back when a route is not matched precisely.

We will fix that in the next lesson when we add in $urlRouterProvider.otherwise('/'); via the $urlRouterProvider service.

In reply to Jonathan
Avatar
Jose L Rguez-Campra Camberos

I want to know if the code in https://github.com/eggheadio/egghead-angularjs-eggly-architecture/tree/03-ui-router-basic-state is ok?? I think that it does not work correctly.

Avatar
Lukas

Please check the previous comment.

In reply to Jose L Rguez-Campra Camberos
Avatar
Tri

Thanks for this tip!

In reply to Lukas
Avatar
John

Just a quick note, there is a typo at 3:18 in lesson 3 it shows eggly.models.model right at the end.

Avatar
Brian

Hi Lukus,
Either my IDE or my inexperience won’t allow me to use index#/. So, I found two other ways to solve this problem. One using $urlRouterProvider which you apply in ensuing lessons and the other way I found is by including the run method to navigate to the initial state. As follows:
.run(['$state', function ($state) {$state.transitionTo('eggly'); }])
I don’t know what pitfalls (if any) lay ahead by using the run method but for this lesson it works well.
Thanks, Brian

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?