Lecture 11, Part 2: Expressions and Interpolation

Loading...

来自 Johns Hopkins University 的课程

使用 AngularJS 创建单页应用

1388 个评分

Johns Hopkins University

使用 AngularJS 创建单页应用

1388 个评分

课程 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.

从本节课中

Introduction to AngularJS

In this module, we are going to start by going over how grading works for this course, will introduce some recommended books, as well as give you the information on how to find all of the source code that you will see throughout the course. We will then dive into the development environment setup for both Mac and Windows. The core of this module will be the introduction not only to the basics of AngularJS, but more importantly, the concepts that back AngularJS as a good solution for developing front-end web applications. To become a good software developer and not just with AngularJS, you will need to understand these concepts. But for becoming a good AngularJS developer, these concepts are essential, because they will allow you to understand the issues the framework is addressing and therefore get a good grasp on the solutions AngularJS is offering.

Lecture 8: Dependency Injection6:38

Lecture 9: How Dependency Injection Works in Javascript8:17

Lecture 10: Protecting Dependency Injection from Minification10:19

Lecture 11, Part 1: Expressions and Interpolation8:17

Lecture 11, Part 2: Expressions and Interpolation7:08

Module 1 Wrap-up0:57

与讲师见面

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

[SOUND] In Part 1 of this lecture,

we created this MsgApp that was able to use interpolation and expressions in order

to output some messages that we set on the $scope inside of our controller.

What I'd like to do now is show you something a little bit more fun but

at the same time demonstrate that the expressions don't necessarily have to go

only in the body of tag.

They can also be part of tags themselves.

And using that technique, you can actually achieve something pretty neat.

So, I'm still located in lecture 11, folder 11,

in the full stack course 5 examples folder.

And the only thing that I added is I added a couple of images.

One s called yaakov_fed and the other one is called yaakov_ hungry.

Both of them are PNG files, so they're images.

So what we're going to do is we're going to go ahead and create a div.

Notice that our div is sitting inside our div that is amidated with

attribute of ng-controller.

It has to be inside if it were to communicate with that

particular controller's scope object, and the only reason we're making a div

here is just to separate visually, these messages from what we're about to do.

So what we want to accomplish, is have an image displayed

in the web page that is going to be something like Yaakov that's hungry.

And then we're going to have a button that says feed Yaakov and when you click that

button the image should flip to the other image that's Yaakov fed,

in other words Yaakov has been fed.

So we're going to start with creating a button and

the button is just going to say feed Yaakov and on click of that button,

we want to do something but since we want the angular and

the controller to handle this on click, so we're going to say ng-click.

So on ng-click, we want some functionality to occur meaning the flipping or

the changing of the image.

So we'll just say feed Yaakov and

that's going to be our function that we're going to have to implement.

And so far so good, so we'll go ahead and put maybe a break here.

And usually I would style this very well.

But since we're concentrating on functionality,

right now ugly webpage is good enough.

And I will need to have placeholder for this image so

we'll say img and the source will leave that alt for now our of this, and

the source is going to be images, since the images are located in images and

/Yaakov_ and here's where we don't know which image to display yet.

We want to display the image that is kind of Yaakov state, right?

And yaakov probably originally is hungry and then he's fed.

But we don't know that.

So we need to put our expression here and that's what we're going to do.

Here we're going to say stateOfBeing, what is the act of state of being?

And of course after that since it's going to get concatenated or

otherwise known as interpolated here, we need to put the period and png.

So the yaakov_ if the state of being is fed then I'll say fed.png or

hungry I'll say hungry.png.

So let's go ahead and take a look at our webpage, and

you can see the feed Yaakov button is here.

And we're getting an error here and it kind of makes sense as we don't

really have an image yet because it's just an expression.

And we haven't really set those variables on the $scope yet.

So let's go back to our code editor, and we need to define the stateOfBeing

property and also to define the function called feedYaakov.

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

add another property on scope called stateOfBeing and we'll call that hungry.

So that's the first state of being, we'll put another space in here.

If we save that and go quickly to our webpage,

you'll see that the image now is showing up.

So, we have the image that's the yaakov_hungry image that's showing up.

You'll see that we're still getting this 404 error and

because it can't find the image.

And that's kind of strange but we'll take a look at that in a minute.

Let's go back to our editor.

And still need to define the message.

because if we do this right now, let's go back, if we do this right now and

click Feed Yaakov,

nothing is really going to happen because we don't really have that defined yet.

So let's go back to our editor and

define the function feedYaakov when you obviously put it on the scope.

So we'll say feedYaakov, there it is popping up here and

let's say function, we don't need the name.

We will put the semi colon here and the only thing we need to do is switch

our stateOfBeing variable to be fed after it gets clicked.

So let's go ahead and say $scope.stateOfBeing = "fed".

So, we save that.

Let's go back to our browser.

So, let's minimize this a little bit more, and,

so, when we click Feed Yaakov, now the different image shows up.

Obviously, Yaakov looks all happy and the cookie is almost gone.

But what's strange here is, if you take a look at our console,

we're still getting this error that it's not found.

So this image is not found.

Now why is this image not being found?

Well actually it makes 100% sense because HTML gets processed sequentially and

when this HTML page is being processed line by line, by the time it gets to this

image, the line and processing the image, our state of being is not yet defined yet.

And in fact, Angular JS has not yet processed this chunk of HTML, and

hasn't yet looked for

these placeholders and substitute these expressions with the values.

So what ends up happening is that the browser gets this line and

tries to fetch this image at this URL.

And of course this is a bogus URL, if it still has those mustache and

curly braces in it, and therefore it gives you a 404, but once of course

Angular takes care of this, it substitutes this URL for the proper one, and

then we still see the image, but yet the 404 error message remains in our console.

So how can we take care of this?

Well, we can not take care of this using regular HTML tricks.

But, we can take care of it using Angular.

We need somehow to tell the browser not to try to fetch this URL but at the same

time fetch it only when Angular is ready for interpretation of these placeholders.

Well, one way of doing it is to put an Angular attribute on here instead of

the standard HTML one.

And the Angular attribute is just ng-src.

So if we say that now, go back, you'll see that there's no errors anymore

because the image only got fetched once Angular got a hold of this HTML and

translated all the expressions into their values.

And now if we refresh the page again, just to make sure even though browser sync is

working here, now you see Yaakov with a cookie.

And if you click Feed Yaakov, our stateOfBeing variable that is saved

on the scope on the $scope will change its value to _fed and

now Yaakov is happy because he ate almost the whole cookie.

So what we've seen in this part of the lecture is really nothing super new but

you've seen another expression or another idea of how to use expressions.

And since you could expressions even inside the attribute values,

you can achieve pretty interesting behavior that otherwise would be pretty

difficult to implement.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

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

通过 App Store 下载

通过 Google Play 获取