Explore
For Enterprise
Join for Free
Log In

artes y humanidades
Negocios
Ciencias de la Computación
Ciencia de Datos
Tecnología de información
salud
Matemáticas y Lógica
Desarrollo Personal
Ciencias Físicas e Ingeniería
Ciencias sociales
Aprendizaje de un idioma
Grados
Certificados

Explorar todo lo que Coursera tiene para ofrecer

Explorar
Buscar
For Enterprise
Inicia Sesión
Únete de forma gratuita

Lecture 25, Part 2: Ajax with $http Service

Loading...

Single Page Web Applications with AngularJS

Universidad Johns Hopkins

4.9 (1,489 calificaciones) | 61K estudiantes inscritos

Curso 5 de 6 en Ruby on Rails Web Development Programa Especializado

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.

Destrezas que aprenderás

Unit Testing, JavaScript, Angularjs, Web Development

Revisiones

4.9 (1,489 calificaciones)

5 stars
1,366 ratings
4 stars
102 ratings
3 stars
13 ratings
2 stars
4 ratings
1 star
4 ratings

NO

Sep 18, 2016

My special "thank you" for going deep inside the subject with your "how?" and "why?", instead of just instructing us "do this and that". It's a real pleasure to participate in your class, thank you!

DR

Sep 18, 2016

This is an excellent course. The lectures are clear and very well-prepared. The course material is excellent and Yaakov is an excellent presenter: very informative and engaging. Highly recommended.

De la lección

Week 3 - Promises, Ajax, and Custom Directives

Welcome to module 3! In this module, we go over a lot of essential features of AngularJS. We will start with learning about the Promise API. While Promises are essential to Angular, this topic reaches far beyond Angular. It's really an essential topic to understanding modern web development with Javascript. We will also learn about making calls to the server through the built in Angular service called the HTTP service. We'll finish off the module by spending a considerable amount of time on THE crown feature of AngularJS: directives. Directives are really at the core of the entire framework. They not only allow us to extend the functionality of existing HTML elements, which is already pretty amazing in an of itself, but they also allow us to create our own element with custom view and custom behavior. Pretty exciting stuff!

Welcome to Module 31:17

Lecture 24, Part 1: Asynchronous Behavior with Promises and $q5:43

Lecture 24, Part 2: Asynchronous Behavior with Promises and $q15:07

Lecture 25, Part 1: Ajax with $http Service5:16

Lecture 25, Part 2: Ajax with $http Service14:49

Impartido por:

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science

Transcripción

[MUSIC]

Before we embark on making any kind of remote calls,

we actually need to have some kind of remote server set up.

And since the previous course built a restaurant app,

which we're actually going to reimplement using AngularJS,

that server is still set up and actually exposed to the entire Internet so

we're going to go ahead and use that as our resource.

The instructions in the URL's aware that service actually deployed and

what API's that supports can be found on

github.com/hu-ep-coursera/restaurantmenu-- server.

And if you scroll down, you'll see some documentation regarding this particular

server and you'll see the that URL pattern's supports is to show me all

the categories of the menu of our Chinese restaurant, show all the menus items.

And show me all the menu items for

a specific category together with information about the category.

Okay, and here are the URLs that I deployed on Heroku for

us to be able to retrieve this data.

And for our purposes, all we're going to use is this one, /categories.json, and

this one, /manualitems.json with a category for whatever category we specify.

So I actually opened up both these URLs in my browser.

You can see this one is /categories.json.

And if we actually reload it again, we'll see what the categories.json response was.

And we could look at the response itself as just an array of a bunch of

object literals, and if we look at the preview,

it will show us that array in a little bit more of a nicer fashion here.

And we can open up the object, and

you could see that it contains a couple of properties or kinds of few properties.

One is name and the other one is short_name, and these are going to be

important because these are the ones we're going to display and use.

Also if we look at the other rest API that we have here

is /menu_items.json For

a particular category, and that is that short_name that we were looking at before.

That's the same type of short_name that is being specified to identify our category.

And then let's go ahead and reload that as well and

let's click on that URL and let's go to the preview.

We could see that it gives us categories and

also gives us a list of menu items for that particular category.

And what is inside of it doesn't really matter for our purposes.

So what we would like to do, going back to our code editor, is code up an application

that simply lists all the categories that our menu contains.

And obviously, we're going to use the HTTP service to accomplish it.

So right now, I'm located in my editor, in the Lecture25 folder,

which is located in the fullstack-course5 examples folder.

And here is our angular app called MenuCategoriesApp.

And it's a fairly simple app.

Let's go take a look at the HTML template that consist of just one controller

called Menu Categories Controller with a controller as syntax with a label menu.

And then what is going to do is going to create an unordered list And

use ng-repeat to loop over menu.categories.

So we're going to have a categories property

on our menu label that's going to be attached to the dollar signs code for

us automatically using our control s syntax.

In each list item we're going to list the category's short name in parenthesis,

and the category name.

And that's really all we're going to do.

Let's go ahead and take a look at out app dot JS.

Let's actually close the file browser, So it'll be easier to see.

Okay, in our app.js, we obviously declare our controller but

we also declare the service code menu category service.

Let's first take a look at this service that we coded up.

So the main category service is injecting the HTTP service as you can see,

and it's really structured just like a regular service would.

It creates this service local variable that is equal to this.

And it has this method called, get Menu Categories, which is our main method that

we're going to use in order to accomplish our use case.

Inside of the function, we're going to use our dollar sign http, the http service.

And we're going to configure it using this config object which is an object literal,

with a method of get which will tell the http service to issue a get,

an http get request And the URL to our API, the categories.json API.

Once we capture that response, which is of course a promise,

we're going to go ahead and return that response to the caller.

Now let's take a look at our caller, which is our menu categories controller.

Well, it's going to use that promise to initialize some things

on the dollar sign scope.

Obviously, the first thing its going to do is actually call menu category service

that get menu categories.

That's as you remember going to return a promise.

Then we're going to resolve the promise using the then function,

expecting a response will actually responds that data to be that Json

that is converted into an array of object literals, and we'll assign that array

to the categories property of our menu which is obviously the this reference.

And instead of dealing with an error if it occurs, right here by putting a comma and

yet another function,

we're just going to go ahead and catch all kind of function called catch.

And we'll go ahead and

do that here, since that looks a little bit more cleaner in the code.

And here, we're not going to do much,

we're just going to log something went terribly wrong.

So let's go ahead and save that and let's go back to our browser.

Let's go to our HTTP service that's already running using browser sync.

And you can see that it listed all of our categories

with a short name in parenthesis and the category name Right after that.

Okay, so far so good.

Let's enhance this just a little bit by having these short name

letters be a link that I could click and have my app reach out yet

again to the server which should return the data about that particular category.

In other words All the menu items that category contains.

Let's go back to the code editor and

the first thing we want to do is create a link around this category.short_name.

And the first thing we're going to do is surround

our category.short_name with an a tag.

So we're going to go ahead and say a href just so

it appears to be a link, and we're going to close that.

And we need to surround it, so we'll put the closing A tag right here.

So the only other things left to do is to do ng-click, not double click, just click.

And set that to our menu.logMenuItems,

and past to it, what we're going to need to log,

we're going to need to log something with a category .short_name.

Once we do that, this category .short_name is going to get past our

log menu items function, or method that is sitting on the controller instance.

So let's go ahead and save that.

Let's go to the app dot JS and let's actually create that method.

Well, actually it's already created.

All I have to do really is uncomment it and talk a little bit about it here.

So as you can see, it's taking a shortName as an argument, and

we're doing the same thing we did before.

We're calling MenuCategoriesService dot getMenuForCategory.

Passing it the short name meaning that identifying label for

a particular category and then all we're doing here is really logging it on success

and logging the error on failure.

The important thing is to look at this get menu category method so lets go ahead and

scroll down to the menu category service.

And here I have this method already coded up, I just need to yet

again, uncomment it, and let's go over it a little bit.

So the get menu for category, is a function that takes a short name.

So the HTTP call, the HTTP, the dollar sign HTTP, is very similar,

except now we have a params property is part of our configuration object.

And the params property is an object literal that has category and short name.

This short_name, the value of our category in our params

comes from the cut short_name that is passed into this function.

And a category is the name of the parameter

that should really go right here after a question mark.

So question mark category equals

whatever it is that the category the short name that they passed in.

So since we want that done for us automatically by angular,

we need to just provide this params object or params property with an object with

object property names become the request name parameters, and

the values become the values of those request parameters.

And as usual, we return the response which ends nothing more than a promise.

Okay, so let's save that and we should really be good to go.

Let's go back to our browser,

and you can see now every single one of these things is a link.

Let's go ahead up and open our console so

we can could see what happens when we click on one of these.

Let's click on L, and you see an object got returned with menu

times of 27 menu items for that particular category.

Let's click on another one, let's click on C and you can see once again that

object in the category is chicken, and the short_name is C.

That's how we identified that particular category when we used it to request it.

So if we looked at the network right now and let's clear that, go ahead and

clear that, and click the C again, you'll see they were making an Ajax call to this

URL which is /menu_items.json?category=C.

So ?category=C is the result of us

providing the params object as a configuration property.

If we click that and look at its response so the preview of the response,

you could see that it's the same thing That's coming back

that we're actually seeing in the console right here.

Okay, so that looks pretty good except one little thing.

Let's go back to our code editor and

see if we can notice something that kind of is bugging me a little bit.

In every single call of our menu category service, we're providing the full

URL Including what our rest API endpoints are going to be.

What happens if tomorrow the next day,

we decide to deploy the same service but with different URL?

Let's say we want to give it a custom URL not a herokuapp.com URL.

Well, we will have to change this URL

in every single place that were calling out to it.

That seems kind of dirty and efficient.

Instead it would be great to be able to define the base url once

than reuse it in every single circumstance.

And we could do that with a special function

that gets evoked on the angular module called constant.

Let's go ahead and define that now.

Called constant, and

the constant takes the name that we're going to inject a constant with.

Now, let's call it ApiBasePath.

And, what that path is?

Let's go ahead and scroll down, and grab the base path, which is right here,

let's copy that.

And that's going to be the constant that we're going to use every time

when we inject it into different types of services, or at least in this case,

was going to be injected into the menu categories services.

So let's go ahead and inject that right here.

And that one is called ApiBasePath, and

we obviously also need to inject it into the actual function.

And now, instead of providing the entire url, what we're going to do is we're going

to shorten that a bit and say that's the only part of it.

And then we're just going to say (ApiBasePath + "/categories.json").

In fact, if you look in the actual url property here

I see that I have left my parens here.

The parens really aren't needed here at all until I actually erase

this part and need to make an addition or string concatenation here.

Which is again, API based path plus that string and actually in this

case we need to surround that with params so it knows it's one value.

When I save that now, you could see that now we have

one API-based path constant that we're able to reuse everywhere else.

So if we were to redeploy this server at a different URL,

we would only have to change that constant in one place.

And wouldn't have to worry about the rest of the application,

because it will automatically work by just appending

the actual rest API endpoints to that base path.

Let's go ahead and save that, and go back to the browser,

and you can see that That everything is still working just fine.

When I click, I get that object and obviously,

I get the entire list of my categories that comprise

the total list of the categories in this Chinese restaurants menu.

Okay, so let's summarize.

The $http service is based on the promise api exposed by the dollar sign q service.

The dollar http is itself a function.

It takes a single configuration object parameter

of which URL property is the only required property.

And then in returns a regular promise to be resolved with dot then function.

Now when that promise gets resolved inside the .then function or the .successthen

function repsonse.data property will hold the server data response.

Sometimes referred to as a response payload.

If the original response.data is JSON, Angular will automatically detect that and

then will transform that response into a JavaScript object.

So the JSON string will be turned

into a JavaScript object we can immediately use in our code.

Now, one more thing we used in this lecture is module.constant.

And that can be used as an injectable constant that we can define once, and

it will never change for the duration of the application.

And then we can inject it into controllers, services, or

other types of components.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play

Coursera
Acerca de
Liderazgo
Empleo
Catálogo
Certificados
Certificados MasterTrack™
Grados
For Enterprise
For Government

Comunidad
Learners
Partners
Developers
Beta Testers
Translators

Conectar
Blog
Facebook
LinkedIn
Twitter
Instagram
Youtube
Blog de Tecnología

Más
Términos
Privacidad
Ayuda
Accesibilidad
Prensa
Contacto
Directorio
Afiliados