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 835 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.



$routeProvider api

1:50 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 $routeProvider has a very basic api for defining your application's routes. $routeProvider.when() is used to match a url pattern to a view while $routeProvider.otherwise() is used to render a view when there is no match to a url pattern.

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 $routeProvider has a very basic api for defining your application's routes. $routeProvider.when() is used to match a url pattern to a view while $routeProvider.otherwise() is used to render a view when there is no match to a url pattern.

John Lindquist: The route provider has a very, very basic API. You can only either call "when" or "otherwise."

"When" is going to match a pattern and let's format this real quick. A lot of people do it this way although I put "when" on the next line and because it does method chaining, you can just do another "when" here.

Let's say, "when pizza." That will pass an object and we'll just say template because if you remember back to the template cache, we can just do template URL to pull it in by the key and all that stuff.

Anyway, so template. We'll just say the template is "Yum!!" because pizza is delicious. Then if I refresh my app and go to the URL of "/pizza," it will say "Yum!!" Don't worry, we will talk about what we can do with this hash later on.

We have "when" and then "otherwise." In "otherwise," you don't pass into route because it's whatever happens when the route doesn't exist so we just pass it as an object. We'll say the template here is, "This doesn't exist!"

If we put in like the number one, it says, "This doesn't exist!" Or some random string of characters, doesn't exist! If we put in pizza, it's going to pull in this template. If we put in the base URL, it's going to bring in our app template.

That's pretty much it as far as the route provider API goes, just "when" and "otherwise." We'll go into these options that you can pass into this object in the next video.

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