AngularJS Architecture: Basic State with ui-router
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.