Lecture 14, Part 3: Digest Cycle

Loading...

From the course by Johns Hopkins University

Single Page Web Applications with AngularJS

1350 ratings

Johns Hopkins University

Single Page Web Applications with AngularJS

1350 ratings

Course 5 of 6 in the Specialization Ruby on Rails Web Development

Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

From the lesson

Module 2 - Filters, Digest Cycle, Controller Inheritance, and Custom Services

We will start this module by learning how to use Angular filters to manipulate our data into the format we want and learn how to create our own custom filters. We will then dive deep into the digest cycle, which is the process AngularJS uses to magically update our web page with the bound data from our ViewModel or the controller. Understanding this process is crucial in getting comfortable with AngularJS. We'll also see some cases where we'll need to assist that process somewhat and understand why that is. After that, we'll learn one of the most fundamental concepts in the Javascript programming language, which is Prototypal Inheritance. Clear understanding of that topic is a must before we talk about inheritance between AngularJS controllers in our application. We'll finish off the module by learning how to create our own custom Angular services as well as how to configure them. With custom Angular services we'll be able to share data across different controllers or other components in our application. We will also learn a few useful Angular directives that allow us to place looping and conditional logic direction into our HTML. You'll see that by the end of this module, you'll have the skills to create a fairly sophisticated web application that starts to use some of the more advanced software architecture techniques.

Welcome to Module 21:46

Lecture 12: Filters7:51

Lecture 13, Part 1: Creating Custom Filters6:13

Lecture 13, Part 2: Creating Custom Filters3:53

Lecture 13, Part 3: Creating Custom Filters8:43

Lecture 14, Part 1: Digest Cycle4:16

Lecture 14, Part 2: Digest Cycle7:23

Lecture 14, Part 3: Digest Cycle9:00

Lecture 15: $digest and $apply10:08

Lecture 16: 2-way, 1-way and 1-time Binding11:37

Meet the Instructors

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[SOUND] In

part two of this lecture, we've set up watchers using the $watch function.

But that's not the best way of setting up watchers inside of

the controller function.

AngularJS has a more automated way of going about it,

which we will take a look at now.

Now, the way that we've set up the watchers is actually not a recommended

way at all.

You should never have these $watch functions executed inside of your

controller.

And the reason that is, is this controllers and the templates or

HTML already have mechanisms that automatically set up these watchers.

For us, so how can we do this?

Well, one way you can do this is let's go ahead and comment this out and save that.

Let's go to index HTML and we'll just open up another div right here and

inside the div we'll say once counter and we'll say interpolation

with once counter, and we'll put an ugly break here, but that will work.

I'll say regular counter.

And again we'll say just counter.

So, now when we go back even though we don't have anymore watchers that at least

manual watchers set up.

If we go back to our HTML page and go ahead and click number of watchers.

You'll see the number of watchers is still two.

And as we keep.

Doing the once counter, you'll see we'll never change, but it changed once, and

the increment counter as you could see,

is going as many times as we want as we're clicking our increment counter button.

Now there's a really cool trick to actually kind of tie in,

into the digest loop and to see when it's actually getting executed.

So far, all we've seen is how are watch is being executed, but

what about the digest loop.

Well, the way we could do this is the following.

If we say $scope.$watch and now instead of giving it

a real property around our scope, we'll give it a function, because this

function is something that is supposed to return the name of the property to watch.

Which means every time through the loop,

the digest cycle will want to figure out what property is that and execute it.

So that means we could catch when the digest loop

is actually going through all these watchers.

So all we have to do is really provide one function.

And we'll say here, log("Digest Loop Fired!").

Let's save that.

I'm going to go back,

you'll see the digest loop already fired twice before we even started anything.

And the reason that is is that when we go back and look as to what's going on here,

since our watchers are being set up by the interpolation, double curly braces,

when we have the $scope.onceCounter equals zero,

that means this property gets changed and so does this.

So which means there's already a one time that the properties gets changed and

since we know that one time things are changing, it will go once through loop and

it will go through loop one more time just to see that everything is clean,

there's no dirty values, meaning nothing has changed anymore.

That's why you see here the Digest Loop Fired twice.

Now, if we click one up once counter, you'll see that, again, it fired twice.

Because one time was for changing the actual counter, and

another time, to see that nothing's changed.

Now, now that I know that it's changed and it will not change again,

if I click up once counter again you'll see that it's only changing once.

Let's actually clear that and you'll see that the digest loop is only getting fired

once let's clear it again and still only get fired once, and

the reason that is, is that through the first time that a digest loop fires,

it sees that nothing really has changed.

However, if we say Increment Counter, well it's going to fire twice.

Once for checking that the counter actually got incremented and

once to see that nothing else has changed.

If we click it, and we clear that again click it again,

it will once again see that the counter change and then we'll run

through all the watchers once again to see that nothing else has change.

And therefore every time I click, you'll see that the number of times

this console.log will get printed out is going to be incrementing by two,

so six, eight, ten and so on,

in other words every time I click, it's going to be two times of the digest loop

goes through the watchers to make sure that everything us updated properly.

So now we've seen two ways as to how to set up this watchers.

One is to do it manually through this $watch functions which are not recommended

to be done inside a controller, however you could do it inside of a service

which we haven't yet covered or a directive or a component.

And the second way is to actually just interpolate

using double curly braces some property and that automatically or

AngularJS automatically sets up a watch for you, because it knows that

once this property changes it will need to update the DOM and update your page.

So therefore, a watch is required.

There's a third way to set up a watch and

that is simply having an input element with an ng model.

An ng model is what's called a two way binding.

And we're going to talk about that in a minute.

So if I say ng model and it's going to be equal name, if I save that and

actually create a name right here, so we could see something for that property,

we'll say scope.name = "Yaakov" and save it.

If we go back you'll see the Digest again fire twice,

well that's because we've initialize things here.

If we click on number of watchers, you'll see that number of watchers is now four.

So where did you get number 4?

Well, let's go back and take a look at our code, and let's start counting.

The first one is the input field that we set here with an ng-model="name".

The second one is the onceCounter with interpolation.

The third one is the counter, again with interpolation.

And he fourth one is actually our trick that we made in order for

us to watch the digest loop.

This is also a watch that we're setting up.

So that's the fourth one.

And if we go back to our page, if I start typing in that field

you'll see that every time I type, the Digest Loop gets fired twice.

In fact, let's go ahead and clear that.

And if I start typing anything you'll see that the Digest Loop fired twice.

Again, the idea is the same.

Once it fires because we change something about the property that is being washed,

which is our name property right here.

And the second time it fires to make sure no other properties would triggered and

changed as a result of the first changed.

So every time we type, the Digest Loop will run twice,

once because of the change and the second time to verify that nothing

else has changed in the entire list over the watchers that we have.

So let's summarize.

So in this lecture we spoke about the Digest Cycle which is basically running

these digest loops over and over until all watchers report that nothing has changed.

And this whole process is really not specific to AngularJS,

it's really in general called dirty checking to make sure that every

one of the watchers is no longer dirty.

Meaning the values have not changed.

We also saw several ways to set up these watchers that watch a particular property

that is set on the dollar sign scope.

One way to do it is to directly call the $watch function on the $scope object.

And you never want to do this in a controller.

And the only reason we did this is because that's all we learned about

up until this point, but it is not a good practice to do that.

And the reason it's not a good practice to do that, again is because controllers and

templates have their own ways to deal with watchers and set them up.

For example, another way we learned about it is simply to interpolate some property

inside the HTML template.

That alone sets up a watch.

Also, if you have an input element that has an ng-model declared on it,

that property that is declared on ng-mode will have a watch associated with it,

because Angular will set one up for you.

Now remember,

everything we've discussed only applies to things done inside of the Angular context.

If the event that triggered the whole process, even updating some property

inside of the $scope, that is not an Angular type of event,

it's not triggered inside the Angular infrastructure, the Angular digest

cycle will not know to run and therefore, nothing will show to be updated

until the next time the Digest Cycle runs, because of some other events and then it

will repaint the browser with the proper values that are already sitting there.

But it will not show up the browse immediately because

the digest cycle needs to be kicked off.

And it only knows to get kicked off if it's inside the Angular context.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play