Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Componentes en angularjs 1.5

1,493 views

Published on

Introducción a los componentes en angular 1.5

Published in: Software
  • Be the first to comment

  • Be the first to like this

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' }); });

×