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

Resolve

2:05 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.

This video shows how the AngularJS 'resolve' feature can be used during the config phase before your controller has been instantiated. This gives you the opportunity to ensure everything has been setup properly that your controller depends on, thus allowing your controller to execute safely based on its assumptions.

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

This video shows how the AngularJS 'resolve' feature can be used during the config phase before your controller has been instantiated. This gives you the opportunity to ensure everything has been setup properly that your controller depends on, thus allowing your controller to execute safely based on its assumptions.

Avatar
Chris

when defining a resolve feature do we have to use the name of the module like the word app for instance ?

In reply to egghead.io
Avatar
Chris

when defining a resolve feature do we have to use the name of the module like the word app for instance ?

In reply to egghead.io
Avatar
John

No, you can name each promises that will be resolved whatever you'd like, then pass that name into the controller.

In reply to Chris

John Lindquist: The resolve property is basically a list of promises, of things that need to happen before your controller will instantiate, and your template will load and everything will set up. So, it's a way of routing to say, "Hang on. I've got some stuff to do first."

Let's set up a resolve called "app" instead of a resolve property. This is basically a map two or app controller, and we'll just say this is a function. You get really, really used to an angular, everything being a function, so that you can inject stuff in. The CUE library is the promised library that we talked about, and from there we'll just say CUE, defer. Then we can return the promise from defer that promise.

You'll see right now if we reload, nothing will happen because the promise hasn't been fulfilled. If we say, "defer resolve," and now we refresh, you can see that it works just fine, because we've returned a promise and the promise has resolved. That means that everything can move on just as you would expect it to.

Say for example, what you'll see in a lot of the examples that show this, there's a time out service you can use. It basically means it's a way of wrapping set time out. Let's say, we'll resolve after two seconds. Now, when I refresh 1, 1,002, 1000, and then it shows up again -- 1, 1002, 1000, and then it resolves.

This is also useful for things like using the http service and a whole bunch of other things you may want to do before your controller loads, and the template fires up, and you're ready to start working with what's changed in that route. We'll go into more detail in the next video.

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