(OPTIONAL) Lecture 49, Part 1: Non-AngularJS Website Overview

Loading...

Do curso por Johns Hopkins University

Single Page Web Applications with AngularJS

1385 classificações

Johns Hopkins University

Single Page Web Applications with AngularJS

1385 classificações

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 5 - Form Validation, Testing, and Restaurant Site Development

Welcome to module 5! This is the last module in the course. We'll start this module by learning just how easy it is to validate forms with Angular. We will then delve into unit testing our AngularJS code. We will go over how to set up tests for every type of major Angular artifact: controller, service, directive, and component, as well as how to test services that access the network through the HTTP service. However, the last part of the module is the most fun. We will take the site that was developed for our real client in my previous course and re-write the entire thing using AngularJS. However, the coding fun doesn't have to stop there. After you finish the required part of the course, you can move on to the optional bonus part where we take our newly developed AngularJS application and enhance with it even more features that will allow the restaurant owners to administer their own data. We'll go over setting up authentication, editing restaurant menu items, uploading menu item pictures and so on.

(OPTIONAL) Lecture 48, Part 1: Visit With The Client11:14

(OPTIONAL) Lecture 48, Part 2: Visit With The Client9:07

(OPTIONAL) Lecture 49, Part 1: Non-AngularJS Website Overview8:07

(OPTIONAL) Lecture 49, Part 2: Non-AngularJS Website Overview10:12

Lecture 50 (Mac Version): Restaurant Server Setup14:05

Lecture 50 (Windows Version): Restaurant Server Setup13:49

Conheça os instrutores

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

Okay, so before we embark ourselves on building this entire website in AngularJS,

let's take a look at the built website that we left off with in the previous

course, which is HTML CSS in JavaScript for web developers.

The concentration of that course was HTML CSS, and in particular,

responsive design using CSS and basics of JavaScript and Ajax.

And while we didn't build anything super duper fancy, but

the web site came out to be pretty good and the customer was happy as well.

So what I did here is I copied the very latest version

of the web site from the previous course, and

I placed the contents of that folder Directly into Lecture 49.

Which is located in full stack dash course five examples folder.

And I already have my browser sync started up in my Lecture 49 folder.

So let's go to the browser and checkout the website So

here’s the website, it’s fully responsive.

If we squeeze the browser a little bit you’ll see that things get rearranged,

icons get smaller, and the pictures get smaller.

Some things just simply go away, and eventually we get to the mobile view,

where we have this burger button so to speak, that can be clicked, and

you can see the whole menu, go to the menu and actually let’s extend it.

And now you can click on any particular menu you want and you can see prices for

a particular menu item as well as the picture and

the ID that the restaurant knows about.

Then you can call with that particular ID and say,

I want two A1's meaning two soups.

Okay, so let's go back to the home page.

As you could see,

if you take a look at the URL, there isn't much routing going on.

So if I click the back button, really I'm not really going anywhere.

The pound sign went away, but I'm still sitting inside of this soup menu category.

So I have to click this button right here,

this link It will take me back to the homepage.

And basically re routing is obviously not here.

So if i click on the menu, i go back to all the categories.

Click back on the logo, get back to the homepage.

And here the homepage and here's another way to.

Basic click on the menu.

So let's take a look quickly at the HTML that gets served over here.

Let's take a look at a view page source, not what the dumb things is going on but

the page source.

And what we have here is, besides the head and

the header, which is just a whole bunch of things for CSS and the look of it, so

to speak, and right now we're trying to concentrate on functionality.

If you take a look here after the headers is done and we have this Cold button

that's the giant telephone button that shows up only in the mobile view.

We have this placeholder the div with the id content-main,

and after that we have the footer.

So everything you see Other than the footer and

the header is actually contained in this empty main-content.

And the way we put content in here is using ajax and then finding this

particular element in our page and then inserting the content, obviously first

querying the server To pull the data in, and that's basically how it happens.

Now don't get confused by the way, by this favicon that's showing Angular JS.

That's just, I don't have a favicon for this website, and

that's just my browser caching the Angular JS favicon from all the other

local host 3000 that I've been doing throughout the course.

Okay, so let's go back to the code editor and let's take a look at this code.

And if we scroll down, you could see this is all just part of the head.

This is index.html, and we finally get to this call button and

there's our div with the main content glass container.

But physically the main content,

that's where we're going to be inserting the content of the page.

Basically manually coding what our URL router was going to do for

us with the UI dash view tack.

So what I want to do in this lecture is really concentrate on the functionality.

Not necessarily on the layout or the CSS, but

on a functionality that we coded using a regular Java Script.

As you can see here on the left, we have AjaxUtils.js and

that's a script we wrote ourselves.

And there's a whole bunch of bootstrap jQuery and PM.js and script.js.

So those two files, Ajax-Utils.js and script.js,

are the files that we ourselves wrote in order to make this website functional.

Let's take a look at ajaxUtils, in ajaxUtils

really is mainly about this one method which is sendGetRequest.

That ajaxUtils the rest of it is basically all to support this particular method.

And I'm not going to go over the standard getRequestObject() functions,

where it gets this XMLHttpRequest, you can take a look at it yourself.

But I do want to go over this sendGetRequest,

it basically is a function that takes a requestUrl,

that's where we're going to make the actual network call to.

The responseHandler Which is the function of who is going to handle the response

once it comes back from the server and a flag is JSON response.

In other words, sometimes we're going to get some data and

we might want to preprocess that data, since we're assuming it's going to be

JSON, preprocess it and turn it into a regular JavaScript object.

But sometimes we're going to be requesting a template or a partial or

basically a piece of HTML.

That's needed for our view and we're also going to use an HS request for

that as well.

So for that we're going to need to say that JSON responds I want you

to pre-process that as JSON just turn it in as false.

And you can see here that we're calling get request object and

we're setting it on readystatechange.

And we're wrapping our handle response function inside of an anonymous function,

making a closure here.

And hopefully by now you really know what that is and in the previous course,

we did discuss what that is.

And we're finally making that request and making sure to pass true,

because we do want this request to be asynchronous request.

Now the handle response function,

if you take a look at it, it's something that basically checks ready state four.

Checks that status is 200, so there's no errors coming back from the server.

And then it basically checks whether JsonResponse is JsonResponse

flag that we passed in Right here when we called handle response.

Is JSON response flag there or not, if it's not there,

we're going to assume that it's true.

'because, most of the cases, we're going to be actually requesting data and

not HTML templates.

So we'll just assume it's true and whoever is using this library,

which is going to be us.

Could then simply call the function, this function, sendGetRequest,

without the last parameter, making the coding a little bit cleaner.

Okay, so all we're doing here is making sure, if it's not defined,

we're going to set it to true.

If it is, in fact,

defined, we decree a regular JavaScript object using the JSON.parse method.

And we're going to pass that object directly into the function

response handler.

And the response handler function, if we scroll down or scroll up,

is the response handler function that the user of this library provided to us.

So they're passing in a function Function value.

We're propagating the function value to our handleResponse function.

And the handleResponse function finally executes or

invokes that function with the return of the request But

first, if JSON is what comes back as the payload, or the response to that request,

we're going to turn that JSON into a regular java script object first, and

then pass it to the response handler function.

That the user of our UTLs passes in to us.

Otherwise if it's not Json which is going to go ahead and

pass in the straight forward text that got returned from the server to the handle or

the response handler function That the user of Ajax feels passed into us and

obviously this line is what we're going to use when we retrieve template HTML for

a particular view in our application.

Okay so let's stop here and

we'll continue reviewing this website in part two of this lecture.

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