7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Routing Primer

Let’s take a tour of a contact management app to illustrate how Angular handles routing and uses the ng-view directive. We use config blocks and the route provider to set up routing, and external template files to load in behaviour.

5.1 Routing Primer

To show you around the routing in Angular I've created a simple example app that I'll show you around first, and then we'll add some functionality to it. It's a simple contact manager where we have a list of contacts that we can search, and I can click on any one of these and edit their details. So I'll just update my name and maybe update my number. And then we'll head back to the list and you can see that that's updated. And my number's been updated too. You can click on Jeffery, enter m, go back to the list, and again with Joe. Ideally what we'd be able to do would be add a contact from this screen and also deleted a contact when we're in that view. I'll give a tour around to get us started. The code for this app is included with the video. But you'll need to have a local server running in order to show it. You can't just open the index file in the browser because the templating won't work. So I'll show you around the application now. This is the main index page and you can see we've told angular that our main module is contacts and we have a div here with the controller contacts and then a new directive that we haven't seen before NG view, and I'll explain what that is in a second. We've also included angular on the page and all out JavaScript is in a separate file called contacts.js. If I head to contacts.js you can see we are using our angular module syntax, and the module name here lines up with the contents of the NG app directive. You can see here I've created two controllers. The Contacts controller that's referenced from the index page, and an Edit controller that doesn't seem to be referenced yet. In the Contacts controller, I've added a Contacts model to the Scope. And it's a list of each of our contacts, Jeffery, Joe, and myself. And I've added a config block that we haven't seen before. So let me explain what it's doing. Angular provides us with the ability to set up routine within our single page application over here. To do this we configure the root provider. We query a conflict block and request the root provider which Angular will supply for us using dependency injection. We use the root provider to configure the root that's in our application. Again it uses a jQuery like dot syntax to do so. so I've said routeprovider.win and then we provide a route here. So when the URL is /contact and then a value which we're going to refer to as index, load a template and the template is stored in edit.html and also load the controller edit. The root provider and the template link up with the directive that I mentioned earlier ng-view that you can see here. What we're telling Angular to do is load the contents of the template, in this case edit HTML into the div where ng-view is declared. So when the URL matches contact and the contacts index, which we'll use as the index of the contact in our contacts array it loads up the edit.html template and also loads the Edit controller. Then we define another route which is just a slash, or in other words the route. In that case we load in the list of the HTML template, and we aren't supplying a controller because we just need to use the contacts controller. The contacts controller is the parent of all contacts, which means that anything defined in the scope of the contacts controller is available on Child Scopes, so if we load in the edit controller in this div the models defined on the Scope of the contacts controller are available inside the edit control. This is the currently active Fruit. So if I inspect the page, you can see that inside our contacts div and the ng-view div that we see here, the contents of our list template has been loaded in. Just to show you, there's the h2 and a div. This div here, that contains the label and the search input. And a list that contains site uses the ng repeat directive to list all of our contacts. If I click one of these you can see the url changes to contact zero. When that happens angular matches the url against the route we've defined here, loads in edit.html and the edit controller. So let's have a look at edit.html. We have our edit H2 and a list with a label for the name and an input that controls the name. And a label for the number and the input that controls the number. And also a link that takes us back. If I click this we go back and I can click again to go in. Angular is just watching for changes in the URL and then matching the route up against things we've defined. When we defined the edit route, that's this first one in the list, we said that we want to be past the parameter and not to be referred to as index. We do this using the colon. And you may have seen this if you've ever done any rooting on a server side app before. When Angular loads in the controller that we've said we want to use for this template, we can get access to the parameters that we're passed, that is the index, via the root param service. We just ask for it like this and Angular does the rest via dependency injection. Root params gives us access to the index just by accessing a property on it. So in the edit controller I'm creating a new model that refers to the contact at the index specified in the URL. So in this case, I'm referring to contact zero. Which is the first contact in the list. Me. I'm also saving the index in a model, so that we can refer to it onto the page later. So that's an introduction to our context app. In the next video, we will add the ability to add a context and delete them.

Back to the top