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

Loading...

Do curso por Johns Hopkins University

Single Page Web Applications with AngularJS

1357 ratings

Johns Hopkins University

Single Page Web Applications with AngularJS

1357 ratings

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 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

Conheça os instrutores

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

[SOUND] Okay, so we're back in our code editor and

I'm located in Lecture 33 which is located in fullstack-Course5, examples folder.

And this is basically a copy of Lecture 30, but with some cleaned up code.

So we named this one Shopping List Component Tab.

And you can see it's pretty much the same as before.

We have our controller.

We have this list that last removed which is something that the control will display

once something gets removed from list.

Now, things get removed from a list using this

shopping list directive well at least its a directive for

now, we're going to take that shopping list and turn it into a component.

And you can see we're passing in items passing in the title and

passing in unremove and we'll discuss that this looks exactly the same as we actually

did before where index is something that is an output from the component or

from the directive in this case.

Let's go ahead and go to app.js and

the first thing you see is we forgot to change this into component.

It's a component ShoppingListComponentApp.

Okay, so the first thing we want to do is we want to change the shopping list

from being a directive to being a component.

Well, let's go ahead and change this out to component.

And now, instead of having a function as the definition for

our shopping list we're going to have a simple configuration object.

So, it makes it much easier.

And we can even do this straight in line,

since it shares a bunch of configuration properties and that's about it.

Okay, so the first thing our component will have is a shopping list.html,

which is going to be our template.

So that stays exactly the same.

We'll also need a controller because we're going to put some behavior into it.

And let's call it ShoppingListComponent.

Let's say component app component controller.

So,we have our ShoppingListComponentController.

We're not going to define the controller as.

And we'll let angular just define the dollar sign ctrl for us automatically as

the label that's going to reference our controller instance.

In the next thing we need to do is what are our inputs and outputs which

are called bindings instead of scope, and this is all sitting on the I sell scope.

And really all we need to do is copy these

three things because it's exactly the same as before.

So, we have the items which is a one way binding object, we have at title.

It is going to be mapped to my title and

you can see since the at sign it means its a dumb attribute value binding and

we also have unremoved which is going to get mapped to unremove or

un dash removed in the parent HTML and its going to be a reference function so

this is going to be a callback back to the parent controller.

And, that's pretty much it, we can actually take this function, right here.

And, we could comment it out, cause we don't need it anymore, for now..

In fact, we could just, actually, simply, erase it.

We don't need that anymore.

And, we need to define the ShoppingListComponentController.

In fact, what we're going to do is just, copy some code here.

And, this used to be a shopping list directive controller.

We'll make it into a ShoppingListComponentController,

except this time instead of calling it a list since we don't that it's a $ctrl

let's go ahead and call it $ctrl equals this.

Now, make sure you don't make a mistake.

This is just a local variable, I could call it whatever I want.

It doesn't make any difference but since it's named exactly the same

as the one that we're going to be using in our shopping list that HTML template,

we might as well call it the same.

So ,we'll know it's referring to the same thing which is the this,

the instance of our component controller.

The only thing is is we need to change that now everywhere it says list,

it should now become $ctrl and I believe that's pretty much it.

So, let's save that and we see that our component controller has that same method

we used before called cookies and list.

And what it's doing is it's slipping through all the items that are attached in

our bindings and looking that any name of any item has the word cookie in it,

it will signal this to true and a warning message will pop up

on the screen that will slide out or something like that.

Okay, so let's go to the shoppingList.html,

which is our component template.

And we know that we don't have list pointing

to the instance of the controller for the component.

We now have $ctrl pointing to that.

So, let's go ahead and copy that, and

substitute anywhere we see list with $ctrl.

And I believe that's pretty much it, these two things right here.

And we can save that.

And now, if we go to our browser,

we should see the title right here and we don't.

So, we messed up somehow, or I should say I messed up somehow.

And it says here that it cannot read length property of undefined in app.js:22.

Well, let's go back to our code editor, I have that app.js:22 is right here.

So, it says it cannot read the length property of this item.

Somehow that items array is not really being passed in even though we

passed it in right here as a one way binding.

Well, what do you know?

It's bindings not binding so that would make sense let's go ahead and save that.

Let's go back no errors.

It's always good not to have errors.

Okay, so now we can start entering things in chips.

Four bags of chips and there is one.

And we say cookies, the warning will pop up since we have

a ng -if statement right on the div that has the warning in it.

Okay, so let's take a look at this button here.

It says controllerctrl.onRemove, and it's passing this thing right here.

It looks a little bit ugly for the HTML template to have stuff like that, so

instead.

Why don't we go ahead and change that, and let's say control remove, and

actually just pass the index in it, instead of having all that.

And we'll actually write, the control, the remove method, on our controller.

So, let's go ahead and save that.

Let's go back to app.js.

Let's find our controller that ShoppingListComponentController.

So, we already have one method called cookiesInList.

Let's go ahead and put a couple of spaces here.

Let's say $ctrl, and we'll say remove.

And that's going to be a function, we don't need the name.

Let's put the semicolon here.

And this function has to call whatever function that we defined in our binding.

So, onRemove.

So therefore, it's going to call $ctrl

on remove, and we need to provide it the index.

Well, I forgot actually to put the index in here,

so that's what's getting passed thin from the template.

And, instead of just saying index here, that really wouldn't work.

We actually have to give it an object, the key value here

who's key has to match whatever it is the name that we used in the binding,

unremoved binding of our shopping list components.

So this case is just index.

So let's go back to app.js and actually let's call it something else.

Let's call it myIndex.

That way, at least it'll be a little bit more understandable.

So this index, the key comes from index.html,

that's that index right here that's the name that we're mapping.

And the value is going to be myIndex.

Okay, so now we have it a little bit cleaner.

In the shoppinglist.html, the button just goes on click and

it calls a method on the controller directly,

passing it the $index that is provided by the ng-repeat directive, which then

gets passed into my remove function that I defined here right in the controller.

Which calls the reference function that was passed in from the parent controller

with the map of key value.

So put another space right there.

Let's save that, let's go back to our browser.

And let's say Chips, 4 bags of Chips.

And we'll add that and when we say cookies let's make 5 bags of cookies and add.

Once we add you see that the warning shows up immediately and

when we remove cookies the warning disappears and

the cookies item gets passed to our parent controller and that is why we're

able to display, as our parent controller, that the last item removed was cookies.

Okay, so that's how simple it is to create a component.

In part 3 of this lecture, we're going to look at the life cycle methods that

the component API provides and

use it to enhance this little Shopping List application a little bit.

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