Diseño de aplicaciones II
Alejandro Tocar
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();
}
```
##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'])
```
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
