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

Basic Promises in AngularJS

4: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.

An AngularJS promise is a mechanism that lets you defer a stated action or series of actions at an earlier point of time until you explicitly declare that promise to be fulfilled (or resolved). Promises are useful for asynchronous operations. This video introduces the basic way to declare and resolve promises.

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

An AngularJS promise is a mechanism that lets you defer a stated action or series of actions at an earlier point of time until you explicitly declare that promise to be fulfilled (or resolved). Promises are useful for asynchronous operations. This video introduces the basic way to declare and resolve promises.

Avatar
Statclip

Now that we have ES6 Promises if you are using a transpiler is there any reason to use the Angular version over ES6?

John Lindquist: Before we get to the resolve property and routes, we need to talk about promises first. Angular ships with a library called "Q," which is a promised library. If I say, "q defer," I get a variable from that, and I say, "defer promise."

On this promise, and on the promise libraries you see around, there is function called "then," which will take a function. When this object is done being deferred, meaning that when you call defer resolve, it's going to fire off this.

We'll just say, "I promised I would show up." If I refresh, you can see it says, "I promised I would show up," because you are basically saying this is something that is going to happen in the future. This is when it happens in the future, and there you go. That's pretty much all the promises.

Something's going to happen in the future. You set "then" to show what one is successful. We'll talk about error-handling in other videos. There is ways of doing that as well.

Basically, once you have a promise set up, you can do a chain here, and we'll just add a couple more. We'll say, "me too" and "I." You can see one, "me too," and "I."

These are things that are going to happen in the future, and as the promises keep on resolving, they move on to the next. What you can do here is you can also pass in values. If I said, "resolve sword," I could do an alert here. I'm saying instead of "I promised I would show up," let's say, "you can have my," and then we'll say, "plus weapon." I need to add that as a parameter here.

We'll return "bow." Say, "weapon here." Say, "and my" plus "weapon," and then, we'll return "axe." Then, another last "weapon" in here and "my weapon." Now if I do this, you see what's going to happen. It's going to say, "sword," pass in "you can have my sword," return "bow," in the next promise or in the next, then "you can have my axe."

"You can have my sword, and my bow, and my axe." You can pass along these results and then handle them in the following "then" functions. That's basically all promises are. We'll get into more details about how you use them with the other libraries inside of angular as we go along, but just basically know that you create a defer object that you will eventually call resolve on.

You can set up this promise, and in a lot of things you do, you return that promise inside of Angular, and then it'll handle some of these "this-then" stuff for you. But if you are doing it manually like this, you can set up a chain of "thens" to fire as each one resolves.

That's pretty much it. This sets us up pretty well for diving into the resolve property and routing.

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