Diseño de aplicaciones II

Alejandro Tocar

aletocar@gmail.com

aletocar

Temas

  • Servicios e Inyección de Dependencias
  • Qué es ID?
  • $scope y $http
  • Cómo obtener otros servicios
  • Inyección de dependencias y minificación.
  • Creación de servicios propios

Inyección de dependencias

El problema

¿Cómo funciona?

Un componente de una aplicación de AngularJS declara sus dependencias al definir argumentos en su función fábrica, cuyos nombres sean iguales a los componentes de los que depende.

Beneficio de ID

El framework se encarga de mantener los componentes, además de los beneficios para el testing

Requests Ajax

Nos permite realizar pedidos asíncronos a un servidor, sin necesidad de recargar la página

##```XMLHTTPRequest``` - Extensible Markup Language / HyperTextTransferProtocol - Es una interfaz que nos permite realizar peticiones HTTP a servidores web. - Implementada por todos los navegadores. - Complicada de usar.
##Ejemplo ```Javascript function XmlHttpRequestController($log) { var rulesrequest = new XMLHttpRequest(); rulesrequest.onreadystatechange = function () { if (rulesrequest.readyState == 4 && rulesrequest.status == 200) { var tasks = JSON.parse(rulesrequest.responseText); $log.info(tasks); } } rulesrequest.open("GET ", "/api/tasks ", true); rulesrequest.send(); } ```

Usemos un servicio

$http

##Ejemplo ```Javascript function tasksController($http, $log) { var ctrl = this; $http.get('/api/tasks') .success(function(resutl){ ctrl.tasks = result; }) .error(function(data, status){ $log.error(data); }); } ```

Agregando otros servicios

Existe mucha funcionalidad ya desarrollada, que podemos incluir en nuestra aplicación

###Para agregar un módulo externo. - Agregar referencia del archivo .js a la página. - Agregar la referencia al módulo en el código de la aplicación Angular. ```Javascript var tresanaApp = angular.module('Tresana', ['modulo']); ```
###Ejemplo: Agregar ng-messages 1- Agregar la referencia al módulo en index.html. ```Javascript <script src="https://code.angularjs.org/1.4.6/angular-messages.js "></script> ``` 2 - Agregar el módulo como referencia al inicializar la aplicación ```Javascript myApp = angular.module('myApp', ['ngMessages']) ```

Ahora podemos probar ngMessages

Veamos más información

Directivas

La clase pasada utilizamos algunas directivas, pero existen muchas más

##Otras directivas + [Ng-if](https://docs.angularjs.org/api/ng/directive/ngIf) - Genera una porción del DOM si se satisface la condición + [Ng-show](https://docs.angularjs.org/api/ng/directive/ngShow) - Muestra una porción del DOM si se satisface la condición + [Ng-hide](https://docs.angularjs.org/api/ng/directive/ngHide) - Oculta una porción del DOM si se satisface la condición + [Ng-class](https://docs.angularjs.org/api/ng/directive/ngClass) - Asigna clases css dependiendo de condiciones + [Ng-repeate](https://docs.angularjs.org/api/ng/directive/ngRepeat) - Permite repetir un template + [Ng-click](https://docs.angularjs.org/api/ng/directive/ngClick) - Captura el evento click sobre un elemento + [Ng-cloak](https://docs.angularjs.org/api/ng/directive/ngCloak) - Permite ocultar la interpolación de texto de AngularJS.
Para encontrar más directivas, sigan este [link](https://angularjs.org/api). Si navegan a la sección de directives, podrán encontrar todas las que se encuentran disponibles. Además, pueden usar directivas no creadas por angular.

SPA's con Angular JS

Hasta ahora solo pudimos ver un controlador y una página, pero cómo podemos utilizar múltiples controladores y múltiples vistas?

Para ello, utilizamos un router

¿Qué es?

Nos permite manejar distintas vistas dentro de una misma aplicación, convirtiendo lo desarrollado en una SPA