Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 830 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



ng-view

3:03 Angular 1.x lesson by

AngularJS 1.2.x Routing Changes: ngRoute

In AngularJS 1.2.x routing has changed. It is now required that you explicitly import ngRoute in your applications! This lesson uses an older version of AngularJS that pre-dates this change.

Load the ngRoute library
<script src="angular.js">
<script src="angular-route.js">
Import the ngRoute module
angular.module('app', ['ngRoute']);

Scroll down to view the full corrected code for this lesson.

AngularJS's ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (typically the index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Get the Code Now
click to level up

AngularJS 1.2.x Routing Changes: ngRoute

In AngularJS 1.2.x routing has changed. It is now required that you explicitly import ngRoute in your applications! This lesson uses an older version of AngularJS that pre-dates this change.

Load the ngRoute library
<script src="angular.js">
<script src="angular-route.js">
Import the ngRoute module
angular.module('app', ['ngRoute']);

Scroll down to view the full corrected code for this lesson.

egghead.io comment guidelines

Avatar
egghead.io

AngularJS's ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (typically the index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Avatar
Roman Ganchenko

Is this the same as
div class="container" ng-view=""></div
??

In reply to egghead.io

John Lindquist:  Now that we've talked about template URLs, and we've looked into loading in other HTML files into our app by setting up a Web server, it's the perfect time to segue into something called ngView. Now ngView is going to allow us to go into our app and set up. The config function is when you can still only access the providers. You can't access the actual...
For instance, I'm going to access the route provider. I can't access the route object. The route and the services, and everything aren't ready yet. This is before everything's ready.
This is the time to say things like, route provider. You can configure it for when it's injected into other things. Well say, when the path is this...
If you are used to any other Web framework, there's always some routing. This is just basically how it's done here. When the path is just slash, we'll say, the template URL is going to be ‑‑ we'll just call it app.html, and then our controller is going to be our app controller.
Let's set up our app controller here. We'll say, app controller and with a scope. Then our scope model message, this is my app. If you can see what's going on here, we're just going to load in a template called app.html. We're going to give it a default controller of app controller, which we define here.
Then if I just simply create the view, just say, we name it app. Let's delete all of this. Let's put a big h1 in there. We have our binding to the model message. That should be ready to go. We have, this is my app.
The way this was wired up, just a quick review, all we used was this one simple tag. Any single‑page app, you want to be able to change pages. This is the way to change pages, because ngView tag relates to the routing and the route provider.
It's going to check the URL. It's going to load based on this object. There's some other options we'll get into later. Based on this object, the template URL, it's going to look up this.
We talked about the template cache in another video. Load that in there. Apply the app controller to it, so it gives us this scope with the model and message on it. Then, we'll just plop that right into our template that we load up. That's ngView. We'll go into more detail soon.

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