Lecture 33, Part 3: Components & Component-Based Architecture

Loading...

From the course by Johns Hopkins University

Single Page Web Applications with AngularJS

1400 ratings

Johns Hopkins University

Single Page Web Applications with AngularJS

1400 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 4 - Components, Events, Modules, and Routing

In this module, we start by introducing the idea of Component-based architecture. We will then delve into the AngularJS component API. The component API is something that was just recently added into Angular 1 and it's not only supposed to improve your application through the use of Component-based architecture, but also prepare you for an upgrade to Angular version 2, which uses components almost exclusively. We will then learn about the AngularJS event system and how to split up our application into smaller modules that can then be glued together to produce our final application. We'll finish off the module by diving fairly deep into Routing between views in your application and, specifically, into the use of the ui-router module, which is one of the most popular open source routing solutions within the AngularJS ecosystem. In fact, it's so popular that even the main Google documentation for routing in Angular links to ui-router. Routing is a very important topic. Without it, your Single Page Application is stuck displaying just 1 view, without an elegant way to display other views.

Welcome to Module 41:54

Lecture 33, Part 1: Components & Component-Based Architecture7:50

Lecture 33, Part 2: Components & Component-Based Architecture8:39

Lecture 33, Part 3: Components & Component-Based Architecture9:48

Lecture 33, Part 4: Components & Component-Based Architecture9:10

Meet the Instructors

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

In part two of this lecture we converted a directive that we previously have written

into a component and we saw how much simpler the whole component is.

There's no function there's just a configuration object and so on.

But the controller of the component is now enhanced with some life cycle methods and

we're going to use them right now.

Let's go back to our code editor and let's go to the ShoppingListComponentController

and add a couple more methods that angular knows about.

Within those methods again directly on the controllers instance.

So, one of them is as we discussed was onInit.

And onInit is a function.

Again what I need the function name.

And in this case we're just going to log that We are in $onInit.

So, that way we could see that it's getting executed.

Let's go to our browser and let's open up the console.

You'll see that it is in fact being executed right here.

This is only going to get executed once when the controller gets substantiated.

Let's go back to the code editor and let's add one more method called

$ctrl.$onChanges and that's also a function.

And then there's a function that's going to have a changeObj that is

going to get pass into us by the angular framework.

Let's go ahead in console.log what the changeObj is.

Let's go ahead and

console.log that and we'll save that let's go back to our browser.

And you see up front here it has a couple things.

It has myTitle and items.

Those are the things that actually first arrived, so

to speak, when the whole thing got initialized.

Let's actually take a look at this object as we keep changing stuff.

Let's go ahead and put chips in here.

Put 3 bags.

And we'll add the item and see it got fired again.

So, what got fired was the changes right, we could actually go back and actually put

the word Changes here so we can see what's going on a little bit better.

Okay, let's go back to the browser and we see now it says Changes.

So, now we when we put Chips and

we'll put 3 bags of Chips and we'll edit the Changes fires again.

The dollar sign on Changes fires again.

If we open it up you'll see that myTitle is the thing that changed.

Let's open that up a little more.

So, we can see it a little bit better.

And the currentValue is Shopping List #1 1 items.

It's right there.

The previousValue was Shopping List #1 0 items.

Now what happened to our items array?

Why didn't that get changed?

Why didn't that get passed in here?

Well the reason it didn't get changed or didn't get detected here is

because the only thing that is being watched are the items array.

Let's go back to the definition of our component

is the reference to that idle array.

And the reference no matter what items we add into the array

the reference to the entire array stays the same.

If we were to change the reference of the array not inside of our component but

outside of our component that out changes would fire it wouldn't include my items.

But since the only thing that changed outside and

its actually watching very closely so to speak is the title or

myTitle that's the thing that fired and that's the thing I've got included

in the changes object that we are looking at right here.

Okay, let's go to yet another life cycle function

called $ctrl.$postLink and I told you that $postLink

is basically the same thing as the link function that we used before.

So, let's go ahead and use it in the same way as we used it before.

And that is we're going to make the shopping list that HTML

have the error message slide out and slide up to disappear.

In other words this is the place where we're going to manipulate the dump.

Now please note this is not necessarily the best way

to have animations in your template HTML.

However my only purpose in showing this to you is to show you that you

can manipulate the dump from the dollar sign post link.

You might necessarily want to manipulate it in the way I am doing it right now,

might want to have something much more complicated before you go

to manipulating the DOM in this way.

Okay, so what we're going to to do is willing display the warning message

when somebody uses cookies as part of their shopping list.

The first thing you to do is we want to make sure that this div was actually

not visible to begin with and then it's going to slide out.

So, what we need to do is need to remove this ng-if right here and save that and

then go to our styles .CSS and add one property here called display none so

,it will not get displayed up front only we're going to display through the code.

Then we're going to go to our app.js and

we're going to setup a watch on the cookies and list function.

The way we would do that is we need to scope variable,

because we need the $scope.$watch is the function.

The only problem is we don't really have a scope variable here.

We haven't really injected yet.

So, we're just going to go ahead and create an inject array $inject array.

And so we could protect it from immunization.

And we'll say scope here.

That's what we need to inject and

obviously inject scope right here into the actual ShoppingListComponentController.

Okay, so now scope is available we can actually call the watch function and

what we need to watch for is $ctrl.cookiesInList.

And we need the parens to make sure it understands that this is

not just a property this is a method that will need to get executed.

And we going to to watch it with newValue and oldValue.

That's going to be pass into us.

Okay, so if newValue === true,

if that's the case that we need to do something,

else we need to do something else.

So, here we need to basically Show warning and

here we need to Hide warning.

Okay, whoops, we don't need it uppercase.

Here we go.

Now the problem is that this function doesn't actually have the scope, element.

It's not exactly the same as Link.

So, how do we get at the actual element that is our component?

Well, there's yet another service called $element.

And in order to get that we need to inject it.

So, let's go back and put a comma here and

say $element and we'll put $element here as well.

And we'll go back to our $postLink and let's go ahead and

first of all, we'll go and just log it so you can see what that is.

We'll say $element.

Okay, so let's save that.

Let's go back to our browser and you can see what it outputted.

It outputted the shopping-list.ng-isolated-scope.

That's our item right here.

And that is coming from the $post link.

So, that's how we get the parent item or the top item of our component.

Let's go ahead and use jQuery to slide it down to show it and

then slide it up to make it disappear.

We need one more thing in order to use jQuery.

You guessed it we actually need to download jQuery and

put it in our folder and then reference it

as part of our libraries that we reference here with the script tag.

Okay, so I'm going to pause the video for a second.

Get the jQuery and we'll continue in a second.

Voila magic.

jQuery-3.1.0.min.js we don't need to look at that code its ugly anyway.

One more thing let's delete these couple of things that we don't really need

here its from the previous lecture lets move it to trash.

Okay, so we have the jQuery file here all we need to do now is reference it and

we need to make sure to reference it above our angular import.

So we'll say script.

We're say src=jQuery-3.1.0.min.js.

Okay, we did that.

Okay, so now jQuery is available for us.

We'll go back to our App.js and we could show the warning by saying var warningElem

= $element actually represents an element as a jQuery object.

So, we can say .find and we could say div.error so,

it's going to again look only in the template of our component.

It's not going to look through the entire HTML of our page which

is really good because it's going to be much, much faster.

And then we need to say warningElem.slideDown 900 milliseconds

to slide down, so it'll be a little bit slower, so that's to show it and

we could copy this over to Hide warning and we need to get the element

again except this time we're going to slideUp to make it disappear.

Okay. Let's save it.

Let's go back to our browser.

We can make this minimized.

And we'll say Chips, 3 bags of Chips.

And you see that's fine.

And if we add Cookies in here and give it 3 bags of Cookies

we do that you see it slides out or slides down to show us the warning.

WARNING WARNING, COOKIES DETECTED.

And if we remove the cookies It will slide back up and

remove the warning from our HTML.

So, this is how you use the lifecycle methods inside of your

component controller.

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