Lecture 6: Implementing NameCalculator Example in AngularJS

Loading...

來自 Johns Hopkins University 的課程

使用 AngularJS 创建单页应用

1362 個評分

Johns Hopkins University

使用 AngularJS 创建单页应用

1362 個評分

課程 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 4: AngularJS Installation and First Simple App9:06

Lecture 5: Sharing Data With The View Through Scope5:59

Lecture 6: Implementing NameCalculator Example in AngularJS9:14

Lecture 7: What’s Behind the “Magic”: Custom HTML Attributes7:50

與講師見面

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

[SOUND] In this lecture,

we're going to go back to the application where originally wrote and

rewrite the whole thing in AngularJS.

Seeing the concept of model of view,

view model architecture come alive right in our code.

Right now, I'm in my editor looking at folder lecture06 which

is located in the fullstack-course5/examples folder.

And as you could see, I've already setup some things in my HTML file as

well as I started browsing so I could see my HTML already on the screen.

Now let me go to my editor and close the file browser.

And as you can see already set up Angular.Js here.

And we've set up our app.js here as well.

The rest of the HTML is fairly bare at this point.

It just has Name Calculator as h1, and has one text box as an input field.

So let's go to our app.js and start our application.

Here I already pre-set up for myself the iffy,

as well as saying that I'm going to use strict here so I don't make any mistakes.

So the first thing I'm going to do is I'm going to create an Angular module.

And the way I do that is saying angular.module and

let's name it something like NameCalculator and as far as dependencies

it doesn't have any dependencies so we'll just leave it as an empty array.

Then we're going to create our controller and we'll call the controller

NameCalculatorController, and

the function that's going to be responsible for

that controller is going to be right here.

We'll close the semicolon here, and we'll go ahead and specify scope in here and

that's that object that we're going to use to communicate with our view,

which is in that HTML.

Okay. So so far so good.

We've declared the two things the module, the application and the controller.

And now what I have to do is we have to wire them in

into our view which is an index.html.

So where we specify the NG app which is the application for the entire thing,

really doesn't matter as long as really above the controller.

That we're going to also bind and also kind of encompasses a nice chunk of HTML

that we're going to have to work with.

So usually we could put it right in HTML, but this time let's go ahead and

change it a little bit.

Let's do ng-app on the body itself, and

we'll give it the name of whatever we specified in our App.JS for

module which is NameCalculator let's copy that and paste it right here.

So now name calculator app the module has been bound to the body so

it's controlling anything from beginning of the body tag until the end.

And here we have a couple of divs here it doesn't matter which one we bind

the controller into.

Let's go ahead and bind ng controller to that and I believe that's called

NameCalculatorController and here the editor's helping me out a little bit.

Okay. As I save it I should have no errors and

I don't and now we've bound the two things together.

There are a couple of things that we want to share between our controller and

our view.

One is we want to share the name of the person that is going to be

entering their name here.

So, we're going to go ahead and specify scope.name and

we'll initialize it and at this point, it's just going to be an empty string.

And the other thing is, the value, the initial value that we want

this to show and since it's an empty string, the initial value should be zero.

So scope.totalvalue Is equal to 0.

Okay.

So if we save that,

we could at this point now output these things straight on the HTML page.

So we could go into the HTML and say that total numeric value of person's name is,

and that's going to be our total numeric value, which is our expression,

our handlebars.

Or mustache or double curly braces however you want to call it.

Since scope is assumed we're going to go ahead and say totalValue and save.

The second we do that the total value now is showing is 0,

because it's pulling this 0 from our scope $scope.

The name we haven't really bound yet, so let's go ahead and do that right now.

Let's go into the HTML and

where we want to bind the name, is into the input element.

So the way we do this binding is you remember from previous lecture,

is we do ng-model.

And we say that ng-model we want to bind to the name.

So as the name changes in this input box, the name in our scope,

in our $scope object will change as well.

And if we want, we could quickly verify that that's the case by just putting yet

another value right here.

Called name and now as we type right here

that value is going to show up beneath this total numeric value.

So let's go ahead and remove that.

So we need somehow someway to let our controller know every time a user presses

the key that we should go ahead and look at the model recalculate model meaning.

Our name recalculate the totalValue and go ahead and

output that totalValue right here simply by updating it on the scope.

So the way we could do that, and let's go ahead and make a couple of indents here.

The way we could do that is by saying, ng-keyup.

And we're going to bind something else on the scope.

And in this case, let's bind a function, which we haven't really written yet.

But let's call it displayNumeric.

And we'll go ahead and give it parentheses.

We could even give it a semicolon.

And when I save it, nothing's really going to happen,

since we haven't really defined this function yet.

So let's go ahead to our app.js and

define displayNumeric() on the scope so it's visible to our view as well,

displayNumeric, and that's going to be a function.

And the function is going to create a totalNameValue, and

we're going to get it somehow, don't know yet how, so let's just give it a 0.

And we'll just make a comment, get the total value.

And once we get that total value, we're going to go ahead and

update our scope variable, totalValue of a scope variable,

to our local variable, which is totalNameValue right here.

So the only thing that's left is to actually calculate it.

Let's go ahead and write a function that's going to do that for us.

Here we could write a regular function, and

we'll call it calculateNumericForString().

And we'll pass it a string, and here I'll go ahead and copy and

paste some of the code that I already pre written before.

And we'll go ahead and paste it right here and

all it's doing here is just saying I'm going to start with the zero,

I'm going to iterate over the string and every position in the string.

I'll figure out what the character code is, add that to the total value and

return that total value.

So at this point we're good right here and

all we need to do now is substitute the call, instead of the 0.

So we're going to call that function and

what we're going to pass to that function is our $scope.name.

Because that's what is going to get updated as I keep typing something

in here.

So once I get that, let's go ahead and take that comment out of here.

Once we calculate that numeric value,

it's going to get saved in the total name value variable.

And then, we're going to copy that right into the scope, which is going to

then update the scope and automatically update the total value in the view.

So let's go ahead and save that.

And right now if we start typing in here and let's put my name in here.

You see as I type or as I erase things the value is changing automatically.

So let's take a look at our code a little bit in the more design perspective.

So we have our app.js and as you can see, we never really reach

out into the view and try to figure out how the view's implemented.

There's no even any ID's in the view at all.

All we did was declaratively said that this input field

should be bound to the name on the scope to our view model, and

whenever there's an event meaning somebody presses the key or lets the key up.

It should call this function that is also bound to our view model

which is our controller and particularly the $scope.

This allows us quite a bit of flexibility on our view or in our HTML.

Is we could change this whole thing around however we want and

still have the functionality be completely untouched.

In other words, nothing in app.gs will ever have to change

no matter how you end up displaying that numeric value,

pf that name or how you even end up getting the name from the user.

The code in app.js will stay the same.

探索我們的目錄

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

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

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

通過 App Store 下載

通過 Google Play 獲取