Download AngularJS.pdf PDF

TitleAngularJS.pdf
TagsAngular Js Web Server Html Java Script Web Application
File Size815.0 KB
Total Pages46
Table of Contents
                            Introduction
Tutorial
0 - Iniciando la aplicacion
1 - Template Estatico
2 - Template Angular
3 - Filtrando Repetidores
4 - Enlace de Datos Bidireccional
5 - XHRs e Inyeccion de Dependencias
6 - Modelando Imagenes y Enlaces
7 - Ruteo y Vistas Multiples
8 - Más y más Templates
9 - Filtros
10 - Controladores de Eventos
11 - REST y Servicios Personalizados
12 - Animaciones
                        
Document Text Contents
Page 2

1. Introduction
2. Tutorial
3. 0 - Iniciando la aplicacion
4. 1 - Template Estatico
5. 2 - Template Angular
6. 3 - Filtrando Repetidores
7. 4 - Enlace de Datos Bidireccional
8. 5 - XHRs e Inyeccion de Dependencias
9. 6 - Modelando Imagenes y Enlaces

10. 7 - Ruteo y Vistas Multiples
11. 8 - Más y más Templates
12. 9 - Filtros
13. 10 - Controladores de Eventos
14. 11 - REST y Servicios Personalizados
15. 12 - Animaciones

Tabla de contenido

AngularJS

2

Page 23

La prueba end-to-end verifica que el orden de la caja de selección esté trabajando correctamente.

Ahora puede volver a ejecutar npm run protractor para ver que las pruebas que se ejecutan.

En el controlador PhoneListCtrl , quita la instrucción que establece el valor de orderProp y verás que Angular
temporalmente agregará una nueva opción en blanco ("desconocida") a la lista desplegable y el orden por defecto
cambiará.

Agregar un enlace de en la plantilla index.html para ver su valor actual como texto. Invierte el orden de clasificación
mediante la adición de un - símbolo antes del valor de: <option value="-age">Oldest</option>

Experimentos

Page 24

Ya no construiremos nuestra aplicación sólo con tres teléfonos. Vamos a buscar un conjunto de datos un poco más grande
de nuestro servidor mediante el uso uno de los servicios integrados de Angular llamado $http . Vamos a utilizar inyección
de dependencias de Angular (DI) para proporcionar el servicio al controlador PhoneListCtrl . Ahora hay una lista de 20
teléfonos, cargados desde el servidor. Ahora ejecuta este comando: git checkout -f step-5

El archivo app/phones/phones.json de tu proyecto es un conjunto de datos que contiene una lista más grande de teléfonos
almacenada en formato JSON. Lo siguiente es una muestra del archivo:

[

{

"age": 13,

"id": "motorola-defy-with-motoblur",

"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",

"snippet": "Are you ready for everything life throws your way?"

...

},

...

]

Vamos a usar el servicio de $http de Angular en nuestro controlador para realizar una petición HTTP al servidor web para
recuperar los datos que están en el archivo app/phones/phones.json .

Los servicios son gestionados por el subsistema de DI (Inyección de Dependencias) de Angular. La Inyección de
dependencia ayuda a que tus aplicaciones web estén bien estructuradas y acopladas. app/js/controllers.js :

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {

$http.get('phones/phones.json').success(function(data) {

$scope.phones = data;

});

$scope.orderProp = 'age';

});

El servicio $http hace una petición GET a nuestro servidor web, pidiendo el archivo phones/phones.json (la url es relativa
a nuestro archivo index.html). El servidor responde con los datos en un archivo json. La respuesta también puede haber
sido generada dinámicamente por un servidor de back-end. El navegador y nuestra aplicación tienen el mismo aspecto.
Por una cuestión de simplicidad utilizaremos un archivo json en este tutorial.

El servicio de $http devuelve un objeto promise con el método success. Llamamos a este método para controlar la
respuesta asincrónica y asignar los datos del teléfono al ámbito controlado por este controlador, como un modelo llamado
teléfonos. Angular detecta la respuesta json y la analiza por nosotros!

Para utilizar este servicio de Angular, simplemente declaras los nombres de las dependencias que necesita como
argumentos para la función constructora del controlador:

XHRs e inyección de dependencias

Datos

Controlador

Page 45

app/js/animations.js

angular.module('phonecatAnimations', ['ngAnimate']);

// ...

// this module will later be used to define animations

// ...

Ahora, unamos nuestro nuevo módulo al principal...

app/js/app.js

// ...

angular.module('phonecatApp', [

'ngRoute',

'phonecatAnimations',

'phonecatControllers',

'phonecatFilters',

'phonecatServices',

]);

// ...

Ya esta todo listo, ahora a crear animaciones!

Comenzaremos añadiendo las transiciones CSS a nuestra directiva ngRepeat que aparece en la pagina phone-list.html.
Primero añadiremos clases CSS extra a nuestro elemento que se repite.

app/partials/phone-list.html

<!--

Let's change the repeater HTML to include a new CSS class

which we will later use for animations:

-->

<ul class="phones">

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"

class="thumbnail phone-listing">

<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>

<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

<p>{{phone.snippet}}</p>

</li>

</ul>

Notáste que añadimos la clase CSS phone-listing? Esto es todo lo que necesitamos para que funcione.

Para nuestra transicion CSS:

app/css/animations.css

.phone-listing.ng-enter,

.phone-listing.ng-leave,

.phone-listing.ng-move {

-webkit-transition: 0.5s linear all;

-moz-transition: 0.5s linear all;

Módulo y Animaciones

Animando el ngRepeat con transiciones CSS

Page 46

-o-transition: 0.5s linear all;

transition: 0.5s linear all;

}

.phone-listing.ng-enter,

.phone-listing.ng-move {

opacity: 0;

height: 0;

overflow: hidden;

}

.phone-listing.ng-move.ng-move-active,

.phone-listing.ng-enter.ng-enter-active {

opacity: 1;

height: 120px;

}

.phone-listing.ng-leave {

opacity: 1;

overflow: hidden;

}

.phone-listing.ng-leave.ng-leave-active {

opacity: 0;

height: 0;

padding-top: 0;

padding-bottom: 0;

}

Como veras, la clase phone-listing esta combinada con la animación al agregar o remover items de la lista:

ng-enter aplica cuando un nuevo elemento es añadido
ng-move aplica cuando se mueven items por la lista
ng-leave aplica cuando se borran items de la lista

Similer Documents