Lecture 14, Part 1: Digest Cycle

Loading...

Do curso por Johns Hopkins University

Single Page Web Applications with AngularJS

1385 classificações

Johns Hopkins University

Single Page Web Applications with AngularJS

1385 classificações

Curso 5 de 6 em Specialization Desenvolvimento Web com Ruby on Rails

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.

Na lição

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

Conheça os instrutores

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

[MUSIC]

AngularJS may seem a bit magical at first.

How does it know how to update some part of the webpage when I type

something into a text box.

Let's pull back the curtain and see a bit of how this magic works.

It's always easier to understand how to use something

when you understand how things work behind the scenes.

We've seen this code setup before.

You declare some property using ng-model attribute on an input element.

Now, when the user types something in,

the interpolation of the name property in the div below is magically echoed.

So how does that work?

Let's take a look at a diagram to understand the process, and

then we'll jump into the code and try it out.

We're familiar with the event queue.

When a user clicks something or types something in, those click and

key press or up events go unto the event queue.

If, inside the angle application, you use the regular method of

catching those events and handling them in a regular JavaScript fashion,

the Angular app will not know that anything happened in our page.

However, the process is a bit different if we use the special directives,

as they're called, Like ng-keyup or ng-click.

Which are events that are synonymous with the regular click and keyup events.

When we use ng-keyup or ng-click, those keyup and click events will be

handled by some handler that we bound to those events in the Angular Context.

In other words, those handlers that are declared on the $scope or

the scope service.

But things don't stop there.

The Angular Context, or the $scope, has a special array of watchers that

goes through every property on which a watch has been set up, to check if any

of the properties have changed as a result of the event that just happened.

Angular kicks off that process with a special function called $digest.

There are a number of ways to trigger Angular to automatically set up

these watchers for the properties we've defined on the $scope.

One that we've seen already is when you surround a scope property

with double curly braces in your HTML.

Another is when you specify ng-model equal to some scope property.

In both circumstances, Angular will set up a function to watch for

these changes to those properties.

That function is called a watcher.

The digest goes through all the watchers and checks that everything is unchanged.

If truly unchanged, the loop ends.

If something has changed,

Angular goes through the whole list of watchers once again.

This keeps repeating until all the watchers report that no changes occurred.

So most of the time this loop runs twice.

Once to detect that something changed and

another time to make sure nothing has changed.

The iteration over the watchers is called the digest loop, and

the whole procedure is called the digest cycle.

So, why does the loop have to run yet

another time to verify everything is unchanged?

Well, that's because one change can trigger something else to change and

the digest cycle won't be able to detect it on the first try.

So for example, the change to property number 3 may

trigger something that changes the value of property number 2.

If at that point Angular already checked property 2 and didn't see any changes,

it wont know that it actually changed until another time through the loop.

This process is actually very common in game development and

is called dirty checking.

Once the final digest loop runs and verifies that nothing has changed in

any of the watchers, Angular updates the DOM with whatever values have changed,

repaints parts of the page and you see the updated page in front of you.

Well, that's enough theory, in part two of this lecture we'll

jump into the code editor and see these concepts in action.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play