Download downloads%2Fmanual-angular-js%2Fmanual-angularjs.pdf PDF

Titledownloads%2Fmanual-angular-js%2Fmanual-angularjs.pdf
File Size2.6 MB
Total Pages129
Document Text Contents
Page 1

Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html Página 1 de 129

Page 2

Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html Página 2 de 129

Introducción: Manual de AngularJS

Este es un manual que nos introduce en el framework Javascript AngularJS, un conjunto de librerías de
código abierto que nos sirven para hacer aplicaciones web avanzadas del lado del cliente. Es ideal para hacer
aplicaciones de negocio y aplicaciones de gestión que se despliegan en una única página.

Usa el patrón de diseño habitualmente encontrado en el desarrollo web MVC, aunque en una variante
llamada a veces MV* y a veces MVVM. Esto, junto con otras herramientas disponibles en Angular nos
permite un desarrollo ordenado, sencillo de realizar y sobre todo más fácil de mantener en un futuro.

AngularJS está apoyado por Google y cada día más desarrolladores están adoptándolo, lo que nos da una
idea del prometedor futuro de la librería.

Encuentras este manual online en:
http://desarrolloweb.com/manuales/manual-angularjs.html

Page 64

Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html Página 64 de 129

$http.get() $http.post() $http.put() $http.delete() $http.jsonp() $http.head() $http.patch()

Tanto el propio $http() como las funciones de atajos te devuelven un objeto que con el "patrón promise" te
permite definir una serie de funciones a ejecutar cuando ocurran cosas, por ejemplo, que la solicitud HTTP
se haya resuelto con éxito o con fracaso.

Nota: Si vienes de jQuery ya habrás podido experimentar las promesas "promise" en las llamadas a la
función $.ajax, $.get, $post, etc. En AngularJS funciona de manera muy similar.

El service $http es bastante complejo y tiene muchas cosas para aportar soluciones a las más variadas
necesidades de solicitudes HTTP asíncronas. De momento nos vamos a centrar en lo más básico que será
suficiente para realizar un ejemplo interesante.

Inyección de dependencias con $http

Si vas a querer usar el servicio $http lo primero que necesitarás será inyectarlo a tu controlador, o a donde
quiera que lo necesites usar. Esto es parecido a lo que mostramos cuando estábamos practicando con
controladores e inyectábamos el $scope.

angular

.module('apiApp', [])

.controller('apiAppCtrl', ['$http', controladorPrincipal] );

Como puedes ver, en la función de nuestro controlador, llamada controladorPrincipal, le estamos indicando
que recibirá un parámetro donde tiene que inyectar el service $http.

Al declarar la función recibirás esa dependencia como parámetro.

function controladorPrincipal($http){

Ahora, dentro del código de ese controlador podrás acceder al servicio $http para realizar tus llamadas a
Ajax.

Realizar una llamada a $http.get()

El método get() sirve para hacer una solicitud tipo GET. Recibe diversos parámetros, uno obligatirio, que es
la URL y otro opcional, que es la configuración de tu solicitud.

$http.get("http://www.example.com")

Lo interesante es lo que nos devuelve este método, que es un objeto "HttpPromise", sobre el cual podemos
operar para especificar el comportamiento de nuestra aplicación ante diversas situaciones.

Page 65

Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html Página 65 de 129

Respuesta en caso de éxito

De momento, veamos qué deberíamos hacer para especificarle a Angular lo que deve de hacer cuando se
reciba respuesta correcta del servidor.

$http.get(url)

.success(function(respuesta){

//código en caso de éxito

});

Como puedes ver en este código es que $http nos devuelve un objeto. Sobre ese objeto invocamos el
método success() que sirve para indicarle la función que tenemos que ejecutar en caso de éxito en la
solicitud Ajax. Esa función a su vez recibe un parámetro que es la respuesta que nos ha devuelto el servidor.

Nota: En Angualar 1.4 cambiaron el estándar de respuesta en caso de éxito o fracaso de la conexión
Ajax. El nuevo mecanismo es bastante parecido, con funciones callback que se cargan a partir del
método then(). Lo tienes descrito con ejemplos en el artículo de Estándar del patrón promise para los
métodos del servicio $http en Angular 1.4.

Ejemplo completo de solicitud Ajax con $http

Vistos estos nuevos conocimientos sobre el "service" $http estamos en condiciones de hacer un poco de
Ajax para conectarnos con un API REST que nos ofrezca unos datos. Esos datos son los que utilizaremos
en nuestra pequeña aplicación para mostrar información.

Nota: Vamos a usar un API llamada REST Countries, que puedes encontrar en
http://restcountries.eu/

Este API nos devuelve JSON con datos sobre los países del mundo. En principio puedes hacer diversas
operaciones con los comandos sobre el API, pero vamos a ver solamente unas pocas que nos permiten
recibir los datos de los países agrupados por regiones.

Las URL que usaremos para conectarnos al API son como estas:

http://restcountries.eu/rest/v1/region/africa http://restcountries.eu/rest/v1/region/europe

Puedes abrirlas en tu navegador y observar cómo la respuesta es un conjunto de datos en notación
JSON.

Aunque sencilla, esta aplicación ya contene varias cosillas que para una mejor comprensión conviene ver
por separado.

Este es nuestro HTML:

<div ng-app="apiApp" ng-controller="apiAppCtrl as vm">

http://www.desarrolloweb.com/articulos/promise-estandar-ajax-angularjs.html
http://restcountries.eu/
http://restcountries.eu/rest/v1/region/africa
http://restcountries.eu/rest/v1/region/europe

Page 128

Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html Página 128 de 129

angular.module("userDetail", [])

.component("userDetail", {

templateUrl: "./js/components/user-detail/user-detail.html",

controller: function(){

var vm = this;

vm.cambiarEmail = function(){

vm.usuario.email = "[email protected]";

}

},

bindings: {

usuario: "=",

numero: "@"

}

})

Aquí la novedad está en "bindings", donde estamos declarando los dos bindeos que este componente espera
recibir. Ahora lo importante es:

El campo "usuario" lo recibe como bindeo. Es un objeto, pasado por referencia. En ese caso se
produce un 2 way binding.
El campo "numero" lo recibe como valor. Le llega solo un dato que, por mucho que se cambie en el
componente, no se transfiere nada al padre.

Además fíjate que el controlador casi no tiene código. Solo hemos definido una función para cambiar un
dato el objeto usuario, de modo que se compruebe si se produce el binding hacia arriba.

En la vista podremos usar los bindeos como si fueran datos proporcionados por el propio controlador y en
el controlador también los podremos usar como si fueran propiedades suyas normales. Esto lo compruebas
con el siguiente listado.

Archivo user-detail.html

<div class="user" ng-click="$ctrl.cambiarEmail()">

<h2>{{$ctrl.numero}})</h2>

Nombre: {{$ctrl.usuario.name}}

<br>

Email: {{$ctrl.usuario.email}}

</div>

Aprecia como los datos que me vienen por el binding los trato como si fueran del controlador: $ctrl.numero
y $ctrl.usuario

Puedes encontrar el código de estos ejemplos de componentes en Angular 1.5 en Github.

Este artículo es obra de Miguel Angel Alvarez
Fue publicado por primera vez en 31/03/2016
Disponible online en http://desarrolloweb.com/articulos/bindings-componentes-angularjs.html

https://github.com/deswebcom/angular-components-samples
http://desarrolloweb.com/articulos/bindings-componentes-angularjs.html

Page 129

Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html Página 129 de 129

Similer Documents