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

Directive for Route Handling

3:02 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.

Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

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

Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

John Lindquist: An alternative way of handling this route change error is by displaying it in the UI. We can do that by setting up, let's call this directive error, and then we'll pass in the rootScope here. Now, the only reason I can pass in that I'm allowing myself to do this, typically, it's a code smell to pass in something like rootScope into a directive but, in this case, we're going to be listening to an event that is an angular event.

Whatever module you use this in, it's still going to work. You can basically do a gut check and say, "Is this directive going to work if I pull it out and use it in another module?" If it is, then it's probably OK to inject something like rootScope. If it's not, please reconsider acting upon your directives instead of injecting business into them.

So, moving right along, I want to say this is an element. We'll set up a template for it, which is just going to be a DIV with a class of alert box. Alert box is a nice foundation component. We'll just say error, and then the last thing we'll just say, ngShow. We'll only show this alert box if error is true.

Basically, in our linking function, all we have to do, pass in the scope as you normally do. We'll grab this rootScope listener that we have down here. We'll use the exact same code. Instead of just logging out the event, we will say scope is error, is true. That's going to allow "this is error" to map to "this is error" over here. The last thing we have to do is just drop our new error component inside of our code here.

Once we refresh, you can see we get a nice alert box error at the top saying that something has happened. You could add something to your template as far as having them redirect somewhere else or using the location, which we haven't really talked about yet, or display anything from the error like the rejection message.

Let's just prove that this won't show up if the app actually works. So you can see I refresh now, that component didn't show up because ngShow is false. Basically, that's all it is. Just to reiterate, be very careful if you're going to use something like rootScope inside of a directive. Make sure it's using an angular event, so it's more of a convenience component versus a component that's kind of messing up any sort of route logic or dropping properties on the route scope, things like that.

That's that. We'll move on to other routing events in the next video.

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