⚠️ This lesson is retired and might contain outdated information.

AngularJS Architecture: Basic State with ui-router

Lukas Ruebbelke
InstructorLukas Ruebbelke
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 2 years ago

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)

[00:01] Hello, welcome back. This is Lucas Ruebbelke. In this lesson we are going to introduce ui-router into Eggly, so that we can start to navigate between the unique states that occur as a result of user interaction.

[00:15] Let me give you an example. If the user selects a design category, that would result in a unique state in the application of only showing the design bookmarks. An extension of that idea would be if a user clicks on "Edit" for a bookmark, that state of editing that bookmark is unique. ui-router allows us to define and navigate between these states in a really flexible, easy yet powerful way.

[00:47] The beauty of ui-router is that if you understand how to use ng-route it is really easy to leap from one to the other, as routes and states often share the same components.

[01:01] For instance, a state could have an optional URL path, a template URL, and a controller. From there, the similarities tend to end as ui-router gives us a lot more functionality. The most notable one is the ability to have named or nested views, which we will get into in the next lesson.

[01:26] For now, let's build out our first state, just to see this in action and how this actually looks.

[01:34] The first thing we need to do is to jump into our HTML and add in the ui-router source code. I have this stored in the "vendor" directory.

[01:54] The next thing we need to do from there is add in the ui-router sub-module so that it is available for the entire Eggly application. There we go.

[02:12] Let's build out our first state. We're going to do this in the .config block, and we're going to inject $stateProvider, which is the mechanism for defining your states.

[02:31] We'll define our first state as "eggly." The second parameter of this is essentially a configuration object, and we're going to give it a URL of "/" which is essentially the root of the Eggly application. Then we're going to give it a template URL of "app/categories."

[03:09] For now, we're just going to store everything in the "categories" template. Then we will define the controller as "MainCtrl" since it is handy, and functional.

[03:23] Let's hop into our HTML. What I'm going to do here is I am going to chop out most of the HTML that we have here. On this div with the "container-fluid" I am going to attach this "ui-view" attribute. Using ng-route it would be "ng-view", in this case it is "ui-view".

[03:52] Let's hop into the "categories" template. For now I'm just going to do "<h1>HELLO UI ROUTER!</h1>". This is just to show that it is working.

[04:06] I'm going to refresh the page, and we've got a big "HELLO UI ROUTER!" What it did is looked for that ui-view, and it inserted that template in there as well as spun it up with the main controller.

[04:17] Obviously that's not very useful, so I'm going to paste our application in here, or paste the contents of the main HTML page in here. Let's refresh the page. From here it looks just like how we had it, but we've started to introduce the state machine.

[04:39] In the next lesson we're actually going to introduce name views where we will actually have a specific view for categories, and a specific view for bookmarks.

[04:51] Things start to get really powerful, and you can do some really neat things by targeting specific pieces of your layout with templates for specific states, as well as organizing your controllers into your view. Now you no longer have a large controller, but you have very small, granular controllers for specific pieces in your page.

[05:17] Stay tuned for the next lesson, I'll see you then.

Andy
Andy
~ 10 years ago

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?

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 10 years ago

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!

Xavier
Xavier
~ 10 years ago

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

Ceejay
Ceejay
~ 10 years ago

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

Taylor
Taylor
~ 10 years ago

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?

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 10 years ago

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.

chad
chad
~ 10 years ago

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.

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 10 years ago

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

Leo
Leo
~ 10 years ago

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.

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 10 years ago

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

Ezequiel
Ezequiel
~ 9 years ago

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 ;)

Ezequiel
Ezequiel
~ 9 years ago

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

Jonathan
Jonathan
~ 9 years ago

Hey Lukas,

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

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 9 years ago

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.

Jose L Rguez-Campra Camberos
Jose L Rguez-Campra Camberos
~ 9 years ago

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.

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 9 years ago

Please check the previous comment.

Tri Logis
Tri Logis
~ 9 years ago

Thanks for this tip!

John Michelin
John Michelin
~ 9 years ago

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

Brian
Brian
~ 8 years ago

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

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 8 years ago

Hi Brian, Did you try using index.html#/? I see that you used index#/ (which does not work for me either) but if you use index.html#/, the state should resolve. Hope that helps!

Jonathan Case
Jonathan Case
~ 8 years ago

Hey Lukas,

Is there any particular reason that you source the ui router from your own files in vendor, rather than pull from a cdn like you do for the rest?

Thanks!

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 8 years ago

Hi, Jonathan -- I was probably working on a plane that day :D In all seriousness, I prefer to use NPM to satisfy my dev dependencies these days.

Borja
Borja
~ 8 years ago

Dear Lukas,

perhaps this is a silly question but does ui-router form part of the official angularjs code or did you get it from somewhere else? I know I can just copy the file from the github repo but I'd like to get it from the original source so I know where to find it for future reference. Thanks!

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 8 years ago

Hi Borja - ui-router is a standalone project that you can find here https://github.com/angular-ui/ui-router

Hope that helps!

Sina
Sina
~ 8 years ago

Hi Lukas! When I try to access " eggly/src/index.html#/ ", it gets changed to " eggly/src/index.html#!#%2F ". Therefor I can't see the ui-view. Any suggestions?

Eddie
Eddie
~ 8 years ago

Sina, I had what looks like the same problem you had, and it was because I was using angular 1.6.1. As of 1.6, they've changed how routing works. I was able to keep the new version of angular but I had to change the url property in eggly-app.js to '' (empty string) in order to get it to work. Then I could navigate to index.html without any #'s or /'s and routing worked.

Markdown supported.
Become a member to join the discussionEnroll Today