С выпуском Angular 1.5 мы можем использовать ярлык .component () для создания директив компонентов.
Есть ли у вас какие-нибудь предложения по его использованию?
Некоторое время я был большим последователем вашего руководства по стилю, и вот как я обычно их пишу.
Маленькие, без необходимости в контроллере, мне нравится писать шаблон в том же файле, что и возвращаемое значение поднятой функции.
(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('');
}
}());
Для более продвинутых я предпочитаю помещать шаблон в отдельный файл и использовать свойство 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');
}
}
}());
Мне также интересно ваше мнение о хуке $ onInit и о том, как, по вашему мнению, следует тестировать компоненты.
Спасибо
(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');
}
}
}());
Таким образом можно протестировать контроллер.
Лично я предпочитаю этот способ.
(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');
}
}
}());
Таким образом можно протестировать контроллер.
@softsimon : v1.5.0
представляет ngMock # $ componentController , поэтому вам не нужно регистрировать контроллер отдельно для удобства тестирования: smiley:
Я могу второе, спасибо @gkalpak . @softsimon, вы можете просто пропустить эту строку сверху:
.controller('ActivePlacesController', ActivePlacesController);
Я также большой поклонник этого руководства по стилю.
@xavhan для $onInit
Я бы использовал этот способ в вашем примере:
vm.$onInit = activate;
function activate() {
}
Я мог бы назвать это init
и не активировать с версии 1.5.0.
Мне также интересно, что думает по этому поводу @johnpapa, заранее оцените ваше руководство.
: +1: для
vm.$onInit = activate;
function activate() {
}
закрыта для # 766, чтобы быть местом для обсуждения компонентов
Самый полезный комментарий
Я могу второе, спасибо @gkalpak . @softsimon, вы можете просто пропустить эту строку сверху:
.controller('ActivePlacesController', ActivePlacesController);
Я также большой поклонник этого руководства по стилю.
@xavhan для
$onInit
Я бы использовал этот способ в вашем примере:vm.$onInit = activate;
function activate() {
}
Я мог бы назвать это
init
и не активировать с версии 1.5.0.Мне также интересно, что думает по этому поводу @johnpapa, заранее оцените ваше руководство.