Lecture 31, Part 2: Manipulating the DOM with link

Loading...

En provenance du cours de Johns Hopkins University

Single Page Web Applications with AngularJS

1453 notes

Johns Hopkins University

Single Page Web Applications with AngularJS

1453 notes

Cours 5 sur 6 dans 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.

À partir de la leçon

Week 3 - Promises, Ajax, and Custom Directives

Welcome to module 3! In this module, we go over a lot of essential features of AngularJS. We will start with learning about the Promise API. While Promises are essential to Angular, this topic reaches far beyond Angular. It's really an essential topic to understanding modern web development with Javascript. We will also learn about making calls to the server through the built in Angular service called the HTTP service. We'll finish off the module by spending a considerable amount of time on THE crown feature of AngularJS: directives. Directives are really at the core of the entire framework. They not only allow us to extend the functionality of existing HTML elements, which is already pretty amazing in an of itself, but they also allow us to create our own element with custom view and custom behavior. Pretty exciting stuff!

Lecture 30, Part 1: Directive APIs and “&”7:30

Lecture 30, Part 2: Directive APIs and “&”12:55

Lecture 31, Part 1: Manipulating the DOM with link4:40

Lecture 31, Part 2: Manipulating the DOM with link14:55

Lecture 32, Part 1: Using Directive’s transclude to Wrap Other Elements2:11

Lecture 32, Part 2: Using Directive’s transclude to Wrap Other Elements5:12

Module 3 Wrap-Up1:22

Rencontrer les enseignants

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

[MUSIC]

Okay, so we're back in our code editor and I'm located in Lecture31 folder,

which is located in fullstack-course5/examples folder.

And this is again our shopping list directive app that we've looked at before.

In the previous versions, if cookies were detected as part of the shopping list,

we displayed an error message underneath the shopping list.

What we used to display that message was ngIf.

So if one of the shopping list items included cookies in it, ngIf would detect

that being true and then would display that particular div with a warning.

In this version, we're going to do something similar except we're going to

use DOM manipulation to achieve that.

And then, we'll upgrade it to jQuery and

use some animation effects on that as well.

So the first thing you need to do is declare my link function where I'm

going to be able to call these DOM manipulation methods.

So I'll put a comma here, and I'll say link, and I'll say the name of the link

function, which will be something like ShoppingListDirectiveLink.

Let's save that and let's go right here and

actually define this ShoppingListDirectiveLink.

I actually have some of the code pre-made a little bit, so I'll go ahead and

copy and paste it here to save some time for us.

And here's our ShoppingListDirectiveLink which has a scope, an element,

attributes, and a controller.

And again, I'm omitting one parameter here at the very end

that we're not looking at right now.

Okay, so far we have our ShoppingListDirectiveLink and

we're logging to the console, the scope, the controller, and the element.

Okay, so let's go to the browser and let's go ahead and open up the console and

see what it's telling us.

Okay, so the link scope is, and we can open it up and

then we could see that the link scope is exactly the same thing as what we injected

into our ShoppingListDirectiveController.

In fact, you can see that the list here is that ShoppingListDirectiveController.

If we open it up, we'll see all of our cookiesIntList, items, myTitle,

onRemove, and so on.

Okay, so that's the link scope.

The controller instance, you can see again,

the ShoppingListDirectiveController, as we thought it was.

And the element is, if we take a look here closely, is the shopping-list.

So the shopping-list is the parent element that this element parameter represents.

Let's go ahead and minimize that and let's go back to the code editor.

So what we want to do here is actually set up a watch

on our ShoppingListDirectiveControllers function.

And we have a controller function for

the ShoppingListDirective, which is called cookiesInList.

So we really want to have this as the property that we are watching.

So let's go ahead and copy that, and

let's set up a watch here, we'll say scope.$watch, and

we'll give it the property name, which in this case is our list.cookiesInList.

Well, since this is a function, we need to indicate that as such, so

that 's the property where we're watching on our scope.

And then we'll going to give it a function that is going to take a new value and

an old value as its parameters.

Let's put a semicolon right here and we're going to actually log the old value.

And this is a Boolean function that's going to say either false or true.

And we could go ahead and do it again.

Say new value.

Okay, so now we're watching our list.cookiesInList.

So if cookiesInList changes its value either from false to true or

from true to false, this function right here will fire.

So what we'll want to do here is we'll want to actually display a warning,

a cookie warning.

So we're going to say if newValue is equal to true then

what we want to do is we want to displayCookieWarning.

And we're going to write that function in a minute.

else, we want to remove the cookie warning since it became false it

means that the cookies have disappeared, we maybe removed them from the list.

removeCookieWarning, okay.

So those are the two functions that we need.

Now all we need to do is define the function displayCookieWarning.

And we need to define the function called removeCookieWarning.

Okay, so now we've defined these two functions,

let's take a look at our template.

And in our template here, we want to set up a placeholder for our error message.

So we'll create a regular div and

will give it a class error as before and we'll give it the message.

THE HORROR!

COOKIES DETECTED!

Okay, that sounds like a good message.

Another thing is, is we need to make sure that at the beginning this div right here

is invisible,

because we'd certainly don't want this message to show up to start with.

If we go to our styles.css, we see the error class, and

this is exactly what we declared our div with.

So what we could do is simply add one more property called display,

and we'll give it a none.

So at the beginning, it's not going to display that div to the user, so

it will be just an empty space.

Let's go ahead and save that, and let's go back to our browser just to make sure.

We could say cookie, 3 bags and nothing really should happen so far, right,

because we did not activate showing this cookie warning at the bottom.

Okay, so let's go back to the code editor, let's go to our app.js and

let's write this displayCookieWarning.

Okay, so first of all, we need access to our element object here, and

I already realized that I made a minor mistake.

If you take a look as to where these curly braces end,

I actually defined my cookie warning, displayCookieWarning and

removeCookieWarning, outside of my link function.

I don't want to do that.

I want to go ahead and grab these, cut them out, and

put them right back inside so I'll have access to the element

that I'm going to be using in order to manipulate the DOM.

So let's go to the displayCookieWarning now that we're now

inside of our ShoppingListDirective function.

And the first thing we're going to do is we're going to try to

use just regular using Angular jqLite.

Actually, if we save that for now, go back to the browser and

we'll just search for angulajs jqlite.

It should take us to the angular.element documentation.

Let's take a look at that.

And you'll see here if you scroll down a little bit,

you'll see that Angular jqLite provides the following jQuery methods.

And you can see a whole bunch of methods here.

Not that many, but a nice amount, and one of them is a find function.

If you take a look here, there'll be a find function right here and

it says limited to lookups by tag name.

So we can't just use find and

use regular selector API, we're limited to only looking things up by tag name.

If we were to use jQuery, we would not be limited to that.

But, for now, let's just use tag names to look things up.

Let's go back to our code editor and

let's create a var warningElem, a warning element.

And we'll say element.find and we'll say we want to find the div.

Now what is going on here, why am I saying find this div?

If we go back to the shoppingList.html you'll see that this is

the only div in this shoppingList.html template.

And here's point number one about element.find.

When you're using the element.find,

it is only going to look starting at that element in the DOM and below.

Which means, it's only going to look right here.

This is actually great news, because if you have a huge HTML page,

it's not going to have to look through the entire gamut, it's only going to have to

try to find that div in this small, little snippet of HTML.

So this is a very performant way of actually looking up

elements inside of your HTML templates.

And at this point, once we have this warning element,

all we really need to do is call its css class.

And if you take a look at our list of classes, this is one of them,

you can have a css class.

By the way, if you click on that,

it will take you straight to jQuery API documentation.

And you'll see you can provide the property name and

the value as part of its meta signature.

So, let's go back to the code editor and let say css and we need to say display.

And this time we want to show it, so we'll say block.

We'll go ahead and end it with a semi-colon.

Okay, so for the removeCookie, since things are going to evaluate to false at

some point, again we're going to say using Angular jqLite.

And what we want to do is, again,

we want to find that same element as we did before.

We'll just copy and past it right here.

And we'll actually copy and paste this as well.

And instead of block, we need to turn it back to none.

Not done, none.

We'll save that.

Let's go back to our browser.

Let's go to the actual application.

We don't need this anymore.

So let's go ahead and say chips.

We'll do 5 bags of chips.

We'll add that, you see there is no message.

But the second we say cookies, 5 bags of cookies, THE HORROR!

COOKIES DETECTED!

And if we remove the chips for example, let's just remove the cookies right away.

If we remove the cookies, you'll see that the cookie warning disappears.

Okay, so that was fun.

But, let's go ahead and try to use jQuery instead.

Before we do, let's go ahead and

log what is this warning element look like on the console.

Let's go ahead back to the console and let's go ahead and

add something that will trigger it, cookie, 3 bags, whatever.

And let's open up the console, and let's take a look at what we have here.

We have this U, and let's take a look at its proto, it's prototype.

And you can see its prototype, look at all those methods that we spoke about and

we saw in the documentation.

So you see the find here, you see the css we used.

So a whole bunch of methods, pretty good.

Let's go ahead and go back to the code editor.

Go to our index.html.

I already pre-downloaded the jquery-3.1.0.min.js.

And I have it here just commented out.

Let's go ahead and uncomment that.

So now what we have is we have jQuery mentioned before our angular.min.js.

If we save that and go back to our browser, we've done nothing else

just mention jQuery before we imported the actual angular.js.

Let's just refresh, just in case.

And let's go ahead and say cookie, 3 bags, let's add that.

And let's take a look as to what we have now.

Let's open that up.

And let's go look at its proto again, what is its prototype?

Let's see, can we scroll it up a little bit more?

Look at that,

do you see how many more methods all of a sudden showed up on that same element?

We have a whole bunch of methods.

And some of them, look at that, say fadeIn, fadeOut.

And I'm pretty sure there's a slideDown and slideUp, which I can't see them

at the moment, but I know they are there because they're part of jQuery.

And all the way down probably, right?

By S, slide, slideDown and slideUp, there they are.

So let's go back to the code editor.

And now that we have jQuery installed, let's go to app.js and

use jQuery to do that.

We'll actually just leave this alone.

Maybe we'll just comment that out and comment this out as well.

And let's use jQuery to get the same thing done.

So let's say if jQuery included before Angular.

Okay, first of all, the warningElem, as we had it before,

can now be found by a much more precise selector because the find

of jQuery supports much more than just looking for tags.

So we could say div, we could say div.error.

So I want to find a div with a class called error,

which is exactly what our div is.

And now, instead of simply showing a displayed

block what we're going to do is we're going to say warningElement.slideDown.

I want a slideDown effect, and I want 900 milliseconds.

I want it to take 900 milliseconds to slide down, okay?

That's all we're going to do to display the cookie warning.

And to display or remove the cookie warning, we do something similar.

Again, we're going to find that same div.error,

except we're going to say slideUp to remove it from the view.

Let's go ahead and save that.

Let's go back to our browser.

We could close that and we could say chips.

2 bags or 3 bags of chips and nothing's going on.

And then we can say cookies.

Let's say 5 bags of cookies, why not?

And when we do that, you see THE HORROR!

COOKIES DETECTED!

Kind of slid down and gave us that effect.

Now if we remove the cookies, take a look what's going to happen to this horror,

cookies detected.

It's going to slide back up.

Remove, bam, its gone.

So now we are able to manipulate the DOM and actually affect it and even use

third-party libraries like jQuery, and obviously any other library we want,

directly in the DOM and it's all compartmentalized inside of our directive.

So the code is not spread all over the place.

It's very nicely segmented

only to the part that deals directly with DOM manipulation.

Okay, so let's summarize.

DOM manipulation is usually done inside of the link function.

You declare the link function directly on the DDO, the Directive Definition Object.

The link function does not support injection itself, but

if you wanted to use injected components, services or

other controllers you can inject them directly into the directive declaration.

The scope parameter, that is of the first parameter of the link function,

is the exact $scope in the directive's controller.

It doesn't have the dollar sign to remind us that it is not injected,

it is simply passed into the link function.

The second parameter is the element object and

that represents the element of the directive.

It actually represents the top level element of the directive.

That object is either the jqLite object,

which is a watered down version of jQuery that Angular provides out of the box.

Or, it is the jQuery object itself, if jQuery is included

before the angular.js is included in your main HTML page.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play