Com o lançamento do Angular 1.5, podemos usar o atalho .component () para criar diretivas de componentes.
Você tem alguma sugestão de como usá-lo?
Há algum tempo que sou um grande seguidor do seu guia de estilo e aqui está como normalmente os escrevo.
Pequenos, sem a necessidade de um controlador, gosto de escrever o modelo dentro do mesmo arquivo que o valor de retorno de uma função içada
(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 os mais avançados, gosto de colocar o modelo em um arquivo separado e usar a propriedade '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');
}
}
}());
Também estou curioso para saber sua opinião sobre o gancho $ onInit e como você acha que os componentes devem ser testados.
Obrigado
(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');
}
}
}());
Desta forma, o controlador pode ser testado.
Pessoalmente, prefiro assim.
(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');
}
}
}());
Desta forma, o controlador pode ser testado.
@softsimon : v1.5.0
introduz o ngMock # $ componentController , então você não precisa registrar o controlador separadamente para fins de testabilidade: smiley:
Posso concordar , thx @softsimon, você pode simplesmente pular esta linha acima:
.controller('ActivePlacesController', ActivePlacesController);
Eu também sou um grande fã deste guia de estilo.
@xavhan por $onInit
Eu usaria desta forma no seu exemplo:
vm.$onInit = activate;
function activate() {
}
Posso chamá-lo de init
e não ativar a partir da v1.5.0.
Também estou curioso para saber o que Sua orientação com antecedência.
: +1: para
vm.$onInit = activate;
function activate() {
}
fechado para # 766 para ser o local para discussão de componentes
Comentários muito úteis
Posso concordar , thx @softsimon, você pode simplesmente pular esta linha acima:
.controller('ActivePlacesController', ActivePlacesController);
Eu também sou um grande fã deste guia de estilo.
@xavhan por
$onInit
Eu usaria desta forma no seu exemplo:vm.$onInit = activate;
function activate() {
}
Posso chamá-lo de
init
e não ativar a partir da v1.5.0.Também estou curioso para saber o que Sua orientação com antecedência.