Introducción a los componentes en angular 1.5

1. Componentes en angular 1.5
Directivas con esteroides
Hugo Biarge
hbiarge@plainconcepts.com
@hbiarge

2. Angular, en constante evolución
• Angular 1.2
• controllerAs
• Angular 1.3
• bindToController: true | false
• Angular 1.4
• bindToController : { property: ‘=’ }
• Angular 1.5
• require : { controller: ‘^^parent’ }
• scope : ‘<‘

3. Estilos de arquitectura
• Aplicación como un conjunto de controladores y templates
• Two way binding
• Dirty checking y $digest
• $scope soup, $scope.parent
• Aplicación como un conjunto de componentes
• Directivas estructurales con isolated scope
• controllerAs con isolated scope
• Inputs y outputs
• One direction Data Flow

4. Componentes
• Azúcar sintáctico para construir directivas estructurales
• Oculta la complejidad del directive definition object
• Define valores por defecto “seguros”
• Facilita la actualización a Angular 2
• Seguir usando directivas para:
• Manipulación del DOM
• Uso completo del API del Directive Definition Object
• priority, terminal, multi-element, …

5. Sintaxis
(function() {
'use strict';
function HeroDetailController() {
}
angular.module('heroApp')
.component('heroDetail', {
templateUrl: 'heroDetail.html',
controller: HeroDetailController,
bindings: {
hero: '='
}
});
}());
• Objeto vs función factoría
• restrict a E
• Uso de Isolated scope
• Uso de controllerAs por defecto
($ctrl)
• Uso de bindToController
• Soporta transclude

6. Directivas versus componentes

7. Bindings (Inputs y Outputs)
• Los bindings que conocíamos(=, @, &)
• Más el binding unidireccional (<)
• No $watch
• Concepto de componente como elemento aislado
• Se comunica con el exterior mediante
• Inputs: @ y <
• Outputs: &
• No modifica el estado del input. Notifica el cambio mediante los outputs
• Filosofía de one direction data flow

8. Componentes relacionados
• Nuevo require
• Ahora puede ser un objeto
angular.module('app.core')
.component(‘child', {
require: {
parent: '^^parent'
},
bindings: {
title: '@',
propertyValue: '@'
},
controller: ChildController,
templateUrl: ‘child.template.html'
});
function ChildController() {
var vm = this;
vm.select = select;
vm.$onInit = function () {
vm.parent.addTab(vm);
};
function select() {
vm.parent.selectTab(vm);
}
}

9. Ciclo de vida
• $onInit
• Si existe, llamado por la propia infraestructura
• Una sóla vez
• ¿Cuando?
• Una vez establecidos todos los bindigs del componente
• Antes de que se establezcan los de sus hijos
• Util para inicialización de estado
• Acceder a controladores de components padre

10. Tipos de componentes
• Puede ser un pequeño componente reutilizable
• O cada una de las páginas que resuelve el router
.state('incomings.list', {
url: '/incomings',
template: '<hb-incomings-list></hb-incomings-list>'
})

11. Testeo unitario
• $componentController
• Definido en angular-mock
• Factoría para construir components en el contexto de test
• Uso parecido al que hacíamos con $controller
it('should set the default values of the hero', function () {
// It's necessary to always pass the scope in the locals
component = $componentController('heroDetail', { $scope: scope });
expect(component.hero).toEqual({
name: undefined,
location: 'unknown'
});
});