Lecture 19, Part 5: Controller As Syntax

Loading...

來自 Johns Hopkins University 的課程

使用 AngularJS 创建单页应用

1385 個評分

Johns Hopkins University

使用 AngularJS 创建单页应用

1385 個評分

課程 5（共 6 門，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.

從本節課中

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.

Lecture 17: ng-repeat11:39

Lecture 18: Filtered ng-repeat11:23

Lecture 19, Part 1: Prototypal Inheritance5:09

Lecture 19, Part 2: Prototypal Inheritance13:24

Lecture 19, Part 3: Scope Inheritance7:23

Lecture 19, Part 4: Scope Inheritance10:30

Lecture 19, Part 5: Controller As Syntax8:40

與講師見面

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

[SOUND]

In Part 4 of this lecture, we explored

a coding example that should how the $scope inheritance works in angular.

If this lecture we'll continue with that coding example but

now use the Controller As Syntax.

Okay, so let's go back the code editor and actually what we'll do, not to

convolute our logging statement, so let's go ahead and comment this whole thing out.

And what we'll do this time is we'll go to our index.html and

we'll uncomment the couple of controllers that we have here.

So what we do here is we have a couple of controllers.

One is a controller called ParentController2, and

in this time we're using the Controller A Syntax in giving that controller a label.

And we'll call it parent, we can call it whatever we want.

And then if you look down here, we have another ng-controller,

which is ChildController2 and we're giving you the label of child.

So since any properties, they're going to be edit now to the scope.

I'm not going to be added directly to the dollar sign scope but

going too be added to the $scope.parent property or .parent object and

since we know that we don't need to actually mention $scope,

that property that is sitting on the $scope which is the parent property

could now be be referenced directly in our HTML template.

So we can say parent.value assuming there's

a value property on that parent object.

And we could also say here child.value.

Let's go to add.gs and take a look as to what our controllers look like.

So first of all here, we have our ParentController2 and

it's kind of a best practice to name the this variable that we're going to kind of

attach all kinds of property to, the same as the label inside your HTML template.

You don't have to do it, some people actually name it VM for View Model.

But, I like to keep it at the same name as the label I gave in the html template.

But what you name it here makes absolutely no difference because this is just a local

variable, and you're just using it instead of having to say this everywhere.

Some people say this everywhere but this is a little bit more clear to read.

So what I'm doing here is I'm saying parent.value=1.

Which means I'm assigning a property called value

to the instance of this ParentController2.

Note that even though I have the scope here injected,

I really don't need it here and it's probably actually left over here because

I was doing console.log statements.

But since I have no console.log statements that in the ParentController2 that I want

to log the $scope to the console, I'm just going to write take it out all together.

We don't really need it because the scope is provided,

we're just not using it anywhere because we're attaching the properties

directly to the instance of the controller itself.

And it's AngularJS that it's taking the instances in this controller and

assigning it to the $scope for us behind the scene.

Now let's take a look at the ChildController2 and

the only reason again I'm injecting scope here is because this time I'm

actually going to log the scope so we could just look at it.

But really I really don't need it here at all unless I'm

specifically using it for something.

And here the construct is exactly the same.

We're declaring a local variable that is the same name as the label that we

declared our controller with an HTML template, and

we're creating a property on that object called value,

which is exactly the same name as the property of the parent.

However, since we're assigning it to the instance of the controller in both cases,

this value in no way is going to mask this value.

Which means as long we reference the proper controller,

these values can work independently.

And all we're doing here is we're going to go ahead and

dump the scope object to the console so we can take a look.

Let's save that for

a second and let's go back to the index.html and see what we're doing here.

As you could see it is much easier to read as to what's going here as well.

Since parent is being assigned as a property on our $scope by AngularJS,

I can now reference parent.value and reference child.value here as well.

Let's go ahead and save that and go to the browser.

And you could see that the parent value here is 1 as we expected it to be.

The child value of the child inner controller is 5.

Now let's go ahead and take a look at the child's scope object.

If we open it up a little bit here, we could see that we have a child property

that is equal to the ChildController2 instance.

And we could see here if we open it up that it's value equal to 5.

Now if we go ahead and traverse its prototype chain, right here,

we'll see that its prototype has a parent property.

And that parent property is equal to ParentController2 instance, and

we could see here that its value is 1.

So if we go back to the code editor, you'll see how much easier it is now to

even reference properties of our parent controller in our inner child controller.

So for example, I can say here parent value and

I can reference now the parent controller since parent is something that got

inherited as part of the prototype chain so parent.value.

And if we do this and

go back to our browser, you'll see that the parent value is 1.

And it's the same parent value that we retrieved right here,

even though this parent value is being mentioned inside of our child controller.

So this way it's much easier to read.

You see here that we are actually referencing some property

that belongs to this particular controller.

So it's easier to read, easier to debug and

you could see where these properties are coming from.

So let's summarize.

First of all, please don't think that all these numerous concepts that we learnt as

part of this lecture are only applicable to understanding the Controller As Syntax.

What we learned is applicable throughout AngularJS framework, and

really throughout JavaScript in general.

So let's review.

Inheritance, in general, is used for code reuse, and

sometimes to express a relationship between entities.

Prototypal inheritance in JavaScript,

is based on object instances, rather than classes.

In general, prototypal inheritance is much simpler than a class based inheritance

having only a couple of rules to note.

First the child's objects properties are inherited from the parent and are looked

up the prototype chain so they're actually not sitting directly on the child.

Second, the property can be local if it's declared on the child object itself

with the same name as the parent, therefore masking the parent's property.

Now, when it comes to AngularJS, the $scope is based on prototypal inheritance.

Which means that a child controller's $scope inherits

from the parent controller's $scope.

So if you have two nested controllers, the inner controller's

scope is prototypically inherited from the outer controller's scope.

Now when it comes to controller As syntax, it's very simple.

It's the ControllerName ng-controller=ControllerName As and

you give it a specific label.

Angular then creates a property with that same label name

on the $scope that belongs to that controller.

The label name becomes a reference to this keyword, in other words,

the instance of the controller function.

Now the reason that works is because when we call .controller

to declare our controller in AngluarJS

the .controller treats our controller function as function constructor.

So, when you start declaring properties that you want to share between your

View Model, the controller and

the HTML template, you attach them directly to the controller instance,

in other words you attach them to the 'this' keyword, not the $scope.

With the Controller As syntax, the syntax in the HTML templates as well as

our JavaScript code becomes much simpler and

we no longer have to deal with the masking that can occur

with the prototypal inheritance making the code much simpler to write.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2018 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取