Componentes en angularjs 1.5

831 views

Published on

Introducción a los componentes en angular 1.5

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
831
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Componentes en angularjs 1.5

  1. 1. Componentes en angular 1.5 Directivas con esteroides Hugo Biarge hbiarge@plainconcepts.com @hbiarge
  2. 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. 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. 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. 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. 6. Directivas versus componentes
  7. 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. 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. 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. 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. 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' }); });

×