1.5 Configuring Routes
Our application will have several screens, like most apps do. We'll organize the movement between these views with routes. In this lesson we'll set up Angular's routing system.
1.Getting Started7 lessons, 55:14
2.Core Features6 lessons, 1:04:12
3.Finishing Touches3 lessons, 42:11
4.Conclusion1 lesson, 02:02
1.5 Configuring Routes
Before we can start building the actual features or application, we need to do a bit of application configuration. So in this screen cast, we're going to start the configuration for the different routes that our front end application will use. Now, you may not have noticed these routes changing when I demo-ed the application in the first screen cast. However, these were the routes that we were using. So for example, there was this /contacts route, which displayed all of the contacts. Then there was contacts/new, which is where we added a new contact. Or there was contacts/idnumber, one, two, three, whatever the ID number was. And this displayed an individual contact where you could go ahead and add, or change their information. And so, this is where we're gonna start in the screen cast. We're going to get this router working. Now, Angular has a router, but it doesn't come with Angular by default, at least not in the latest versions of Angular. Instead, it's a package that we add if we wanna use that feature, and handily, we can use bower to do that. So I'm gonna run bower install angular-route. And this will go ahead and install the Angular route package for me. And there you go, now we have Angular route installed. With that installed, I'll come back to our main.html file here, and let's go ahead and add another script tag to add our Angular route package. I'm gonna copy the one for Angular, and we'll change the source to lib/angular-route/angular-route.min. Now, the next thing I'm gonna do is remove the example that we did in the last screen cast where we had our, this run block and the message variable. We're no longer going to need these because we're gonna have some actual application code here. However, before we get to that, we need to tell Angular that we have loaded angular-route onto the page. So inside of this function call here to module where we create our contacts app module, we need to add an item to this dependencies array. So this item is going to be ngRoute, which is the name of the Angular module that we have added to our page. So now, we can go ahead and have a configuration block here. And this is where we are going to set up the different routes that we want to accept. Now, this function will take a couple of parameters. We're going to pass it the route provider, and we're also going to pass it to the location provider. Really quickly here, if you're not familiar with the way Angular works, we have a couple of these different high level functions that we are going to call. Config here is one, we're also gonna look at the directive function, the controller function, the filter function. Each one of these functions takes a function as a parameter. And that function, the ones that gets passed in, can take any number of parameters and the order doesn't matter. What does matter is the name. As long as we get these names right, Angular will go ahead and parse the function, look at those names, and pass us the right value. So right now, I have route provider and location provider. Notice that we know their special Angular values because they're prefixed with a dollar sign. However, I could put location provider first, and route provider second and Angular would notice the different and deal with it accordingly. So, let's start by calling the routeProvider here. And we're gonna call the .when method. And we're gonna say when the route matches /contacts, then what we wanna do is call a certain controller. And this controller is going to be the list controller. And we want to render a certain template. So we'll pass out the template URL, and that's going to be views/list.html. And really, that's all we need to do to create our first route. We just need to tell it what controller will be used to input values into the page, and what template is going to be rendered on the page. So we're going to have plenty of other routes as we move along but we are going to start with just this for now. So now, let's move on to the location provider. And what we're gonna do with the location provider is we're going to use the HTML5 mode function, and we're going to pass it true. Now by default, all of our routes in Angular will use a hash bang. So this route here /contacts will actually be /#/contacts. We don't wanna use this because, pretty much all of the modern browsers these days support HTML5 mode, or basically the ability to dynamically change routes. So we'll go ahead and set locationprovider.html5mode set to true. And you don't have to worry about backwards compatibility because I'm pretty sure that Angular will use the hash bangs if this application is loaded in a browser that does not support HTML5 mode. So that's what we need to do in our app.js file. Now, let's head back to our main.html file, because now that we're using the route provider, we need a way, we need a place for these templates to be rendered. Because you see, this main.html file is basically gonna be the frame that is the same in all of our different pages. But then, we want to have one little div inside of this that will change depending on the route. And this is where our views/list.html is gonna be rendered. So, underneath our div page of header, lets create another div here, and we will give it a class of row. And then inside of this, we will have another div, and this will have a class of col-sm-12. And then it's gonna have the attribute ng-view. The row and the col-sm-12 here are specifically Twitter bootstrap classes. The ng-view is the Angular part here. What this is says is that this div is going to be view div on our page. So it's the contents of this div that will change as our route changes. Basically, the list.html file here, that is our template for this route, is gonna be rendered in here. So let's go ahead and create that views/list.html. And this is just gonna be a table. It's gonna have a couple of bootstrap classes. We'll have table and table-hover, and also table-bordered. And right now, that is all we are going to do. So at this point, we should be able to go back to the browser, go to /contacts, and we should be able to see this table show up in our pages mark up. So if I go ahead and refresh this page, let's see if we're gonna get a working application or if we're going to get some errors. It looks like we get an error here in the terminal. One of the nice things about Angular though is if you get an error, most of the time, there'll be a link here that you can click. And this will take you to the Angular website where we'll give you a better description of what the error actually was. I think this is a really neat feature of Angular. And something that makes it much easier to quickly grasp some of the complexity of Angular, because it has these nice error messages. So the problem here was the, our application failed to instantiate the module context app due to an injection error. Let me go ahead and open this one in another tab. Down here, the description says this error occurred when this modules failed to load due to some exception. We know it failed to ma, load. Why did it fail to load? Unknown provider, location provider. And the problem here is that I misspelled provider here. So let's come back to our code here and right here, let's fix that. All right, so now, let's go ahead and refresh this page. And now, you can see we have no errors. That's great. Now let's go to /contacts. And if I go to /contacts. We do have a problem because I haven't yet created the list controller. And I can see that error message says that right here. So, we have to create our controller. So I'm gonna go ahead and open up public/source, and we're gonna create a controllers.js file. And in here, we're gonna do angular.module contacts app, and when we pass just a single parameter, a string here to module, instead of both a string and a list of dependencies. What Angular will assume is that this module was already created elsewhere, and we're just trying to get a reference to it, which is exactly what we want in this case. So I'm gonna go ahead and create a controller. We're gonna call it list controller. This function will get its own scope. And for now, let's just say scope.contacts equals an empty array. We don't need to actually give it any values just yet but just, but for the page to load, we do need the existence of list controller. And now that we've created our list controller, we need to add it to the page. So I'm going to add it right underneath app here. So now, one more time to refresh the page. And now, you can see we have no errors, and it looks like nothing actually changed. But if I open up the developer tools here, and you can see right here where we have our row, and in here we have our element with ng-view. Inside of it, you can see we have our table, which you know is because we're at the /contacts route. If I just go back to the homepage, then you can see inside container > row, we have absolutely nothing inside of this row div. Because we actually are not rendering a view, because we have no route to render the view for. So, there you go. In this screen cast, we didn't only create our first route for our Angular application, but we also created our first controller, and our first view template. And now, we're successfully rendering a table on our page, although right now, it's an empty table. And so in the next screen cast, we're going to look at how we can begin to create those contact records that will fill that table.