Con el lanzamiento de Angular 1.5 podemos usar el atajo .component () para crear directivas de componentes.
¿Tiene alguna sugerencia sobre la forma de utilizarlo?
He sido un gran seguidor de tu guía de estilo durante algún tiempo y así es como suelo escribirlas.
Los pequeños, sin la necesidad de un controlador, me gusta escribir la plantilla dentro del mismo archivo que el valor de retorno de una función elevada
(function() {
'use strict';
var componentConfig = {
template: generateTemplate(),
bindings: {
kpiVal: '=',
kpiLabel: '=',
},
};
angular
.module('app.utils.kpi')
.component('sfKpi', componentConfig);
//
function generateTemplate() {
return [
'<div class="sf_kpi">',
' <div class="sf_kpi__number">{{ $ctrl.kpiVal }}</div>',
' <div class="sf_kpi__label">{{ $ctrl.kpiLabel }}</div>',
'</div>',
].join('');
}
}());
Para los más avanzados, me gusta poner la plantilla en un archivo separado y usar la propiedad 'templateUrl'.
(function() {
'use strict';
var componentConfig = {
templateUrl: 'components/active-places/active-places.widget.html',
controller: controller,
};
angular
.module('app.widget.activeplaces')
.component('activePlaces', componentConfig);
/* <strong i="12">@ngInject</strong> */
function controller($log, activityService) {
var vm = this;
vm.activities = [];
vm.isLoading = true;
vm.doFunnyStuff = doFunnyStuff;
activate();
function activate() {
$log.info('👊 activating activePlaces component');
activityService.getActivites()
.then(fetchData)
.catch(handleError)
.finally(stopLoader);
//
function fetchData(activities) {
vm.activities = activities;
$log.log('👓 activePlaces activities fetched: ', activities);
}
function handleError(err){
$log.error('💥 problem fetching activePlaces data', err);
}
function stopLoader() {
vm.isLoading = false;
$log.info('💪 activePlaces component started');
}
}
// methods
function doFunnyStuff() {
vm.activities.push('yolo');
}
}
}());
También tengo curiosidad por saber tu opinión sobre el gancho $ onInit y cómo crees que deberían probarse los componentes.
Gracias
(function() {
'use strict';
var componentConfig = {
bindings: {
data: '<'
},
templateUrl: 'components/active-places/active-places.widget.html',
controller: 'ActivePlacesController as vm',
};
angular
.module('app.widget.activeplaces')
.component('activePlaces', componentConfig)
.controller('ActivePlacesController', ActivePlacesController);
/* <strong i="5">@ngInject</strong> */
function ActivePlacesController($log, activityService) {
var vm = this;
vm.activities = [];
vm.isLoading = true;
vm.doFunnyStuff = doFunnyStuff;
// methods
function doFunnyStuff() {
vm.activities.push('yolo');
}
}
}());
De esta forma se puede probar el controlador.
Personalmente prefiero esta forma.
(function() {
'use strict';
angular
.module('app.widget.activeplaces')
.component('activePlaces', {
bindings: {
data: '<'
},
templateUrl: 'components/active-places/active-places.widget.html',
controller: 'ActivePlacesController as vm',
})
.controller('ActivePlacesController', ActivePlacesController);
function ActivePlacesController($log, activityService) {
var vm = this;
vm.activities = [];
vm.isLoading = true;
vm.doFunnyStuff = doFunnyStuff;
// methods
function doFunnyStuff() {
vm.activities.push('yolo');
}
}
}());
De esta forma se puede probar el controlador.
@softsimon : v1.5.0
presenta ngMock # $ componentController , por lo que no tiene que registrar el controlador por separado por el bien de la prueba: smiley:
Puedo segundo, gracias @gkalpak . @softsimon , simplemente puede omitir esta línea desde arriba:
.controller('ActivePlacesController', ActivePlacesController);
También soy un gran admirador de esta guía de estilo.
@xavhan por $onInit
Yo usaría de esta manera en tu ejemplo:
vm.$onInit = activate;
function activate() {
}
Podría llamarlo init
y no activarlo desde v1.5.0.
También tengo curiosidad por saber qué piensa @johnpapa sobre esto, agradezco su orientación de antemano.
: +1: para
vm.$onInit = activate;
function activate() {
}
cerrado para que # 766 sea el lugar para la discusión de componentes
Comentario más útil
Puedo segundo, gracias @gkalpak . @softsimon , simplemente puede omitir esta línea desde arriba:
.controller('ActivePlacesController', ActivePlacesController);
También soy un gran admirador de esta guía de estilo.
@xavhan por
$onInit
Yo usaría de esta manera en tu ejemplo:vm.$onInit = activate;
function activate() {
}
Podría llamarlo
init
y no activarlo desde v1.5.0.También tengo curiosidad por saber qué piensa @johnpapa sobre esto, agradezco su orientación de antemano.