Lecture 33, Part 4: 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

[SOUND] In

the previous lecture, we spoke about dollar sign post link.

And you saw how we were able to set up a watch for isCookiesInList.

And then use jQuery in order to out put an error message on the screen.

The reason we had to set up a watch in postlink is because our $OnChanges,

our changes object, did not include any changes to the array.

Even though we put more things into the array.

Because OnChanges does not watch when elements are edited to the array.

It's only watching the actual reference to the array itself.

Now, as I was coding that example, I, myself,

did not realize they were using a little bit of an older version of Angular 1.

I was using Angular version 1.5.7.

Now there's something that happened in 1.5.8.

And that is that they put in one more lifecycle method

as part of the component lifecycle methods.

So right now, I'm located in the documentation for Angular 1.

And it's docs.angularjs.org/guide/component.

And just to make it more fun for us.

If we click the 1.5.8 and scroll down to those life cycle methods.

Let's take a look.

You'll see that there is the onInit,

the unchanges undestroy and post link.

But were missing another method that actually works in 1.5.8.

But its not listed in any documentation.

So let's go back to the default one.

Unfortunately, the snapshot documentation.

And we'll scroll down to those life cycle methods.

And we'll take a look.

Because there's yet another method we have that is called dollar sign do check.

And that's a method that gets called on each turn of the digest cycle.

So, as a digest cycle executes, it will call this method with no arguments.

And it tells you this hook is invoked with no arguments.

And if detecting changes, you must store the previous values for

comparison to the current values.

So basically, you have to check them yourself.

Okay, so that's what we're going to do.

We're going to drop try to set up our own watch.

Which just hooks in into the digest cycle.

And instead, we'll use the standard life cycle method, called doCheck.

So, let's go back to our code editor.

And, if you see here, I created a new lecture.

And right now, I'm locating lecture 33-1.5.8.

And again,

even though the documentation says this method doesn't exist, I tested it.

And it actually works, so it certainly does exist.

And this is exactly the same application we saw before.

The only difference is I edited couple of things and

removed couple of things, as well.

Number one is, I edited this local variable to

the ShoppinglistComponentController called totalItems.

And that local variable toalItems is going to get initialized

In the dollar sign on Init.

So the total items I'm speaking of is the total items in our shopping list.

So, on Init, it's going to initialize to zero.

Now, we'll leave this dollar sign on changes.

Even though it's not really going to be useful for

us, just to see the console.log of it that it's happening.

And what we did here, if you take a look, is we removed the dollar sign post link.

We actually removed the dollar sign on destroy as well.

Because we don't need it right now.

And, instead of setting up a watch,

we know that this gets called every time the digest cycle runs.

And every time the digest loop is looping.

So that means what we could do is we could ask, hey.

If the control that items that link that array.

Because our bindings watch only is looking at the items referenced itself.

Its not looking at the items of the actual array.

So, if we could take a look and see is the length of the array the same, or

not the same, as the number of total items.

If it's not the same, we need to remember the number of

total items that is contained in the array right now.

And since it changed.

Obviously, because it's not the same, we're going to go ahead and

invoke this cookiesInList method.

And if cookies is in list, that's going to return true.

We're going to have those same jQuery methods.

And we're going to call in order to basically slide down an error message.

And if total number of items is equal to the length of the array.

Which means nothings changed on the list.

We're going to go ahead and make sure that the error message slides up and goes away.

Okay. And just to for our own sanity,

let's put a couple of console log statements right here.

So, the first one we're logging.

We're going to log inside of this if statement.

Which means that the total number of items is not equal to the link of the array.

It means that the number of items change in our shopping list.

Either it went up or went down.

So, let's log and say something like,

number of items changed, checking for cookies.

Okay. So, that's going to be one log statement.

Another log statement, if the cookies are indeed in the list,

besides the error message, let's go ahead and log this On no cookies.

And if there are no cookies, we'll log this here.

And we'll say, no cookies, no cookies here.

Move right along.

Okay.

So now we have a couple of console statements, or

three console statements in here, let's save that.

And one more thing, if we take a look here, we are not any longer using.

The $scope.

That's kind of a good thing.

Because we really want to get away from using $scope.

Now, according to the component architecture.

Which is what actually is Angular 2 is all about.

And components are part of kind of Angular 2 vision,

$scope isn't something we want to depend on.

So we're going to remove that from here.

So, by having this do check method,

we were able to eliminate our injection of the $scope.

It's not the end of the world.

Certainly, we're not in Angular 2.

We're in Angular 1.

But if you inject the $scope and start attaching properties to it.

Which is a bad practice.

This kind of opens up the window for that, if you inject it.

So if it's not over there, then you stay away from it.

So, let's go back to the browser.

I already have my browser link working.

So let's go ahead.

Right here you'll see, it's going to print out our changes to begin with.

But if we put Chips, and we'll put 3 bags of chips.

When we add that, it says number of items changed.

I misspelled change, but it doesn't matter.

Checking for cookies.

It says no cookies here.

Move right along.

So we're good.

So if we put in cookies in here.

Keep our three bags and put the cookies in.

It's going to say no, cookies.

And we need to scroll this down a little bit.

We can see that the wording is there.

So if I remove the cookies.

Let me clear that.

If I remove the cookies, again, it goes away.

Number of items changed, no cookies here, move right along.

The cookies are no longer a part of our shopping list.

Okay. So just to summarize, this is just another

way to hook into some life cycle events that are happening around the component.

And one of them is doCheck.

Which is what we use here.

Which gets fired every time through the digest loop.

Which gives you a chance to look into your bound items a little bit deeper.

Or bound objects a little bit deeper,

such that you could do kind of a much deeper check on things.

Without having to set up your own watch.

Which might actually slow things down a little bit more, in terms of performance.

But either way, it's certainly a better practice.

Since we can get away from injecting $scope.

Which is prone to errors.

Because somebody or some other developer.

Obviously not you, because you know better.

But some other developer might start attaching properties on a $scope,

once it's available, and it's injected already.

Okay, let's summarize.

Components in AngularJS encourage component-based architecture.

But they don't enforce it 100%.

So we must follow conventions such that

our architecture stays a component-based architecture.

One of the main things in the component-based architecture

is that components should never modify data or DOM that does not belong to them.

That's why it always has isolate scope and

well-defined API to give us the inputs into the component and the outputs.

That it lets the component return the data to the outside world.

The way you register component is very similar to how you re adjust

the controller services, and so on.

You provided the name.

Except, the differences the second argument into the component function

is not a factory function.

But just the configuration object.

Usually, we just provide an object's literal with properties.

Controller, template, bindings, and so on.

One of the properties, called controller, is for

you to specify in what controller you want to use as the components controller.

Only provide that if you are actually adding extra functionality.

Otherwise, Angular already provides an empty function for

us that is used as kind of an empty 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