Dengan rilis Angular 1.5 kita dapat menggunakan pintasan .component() untuk membuat arahan komponen.
Apakah Anda punya saran tentang cara menggunakannya?
Saya telah menjadi pengikut besar panduan gaya Anda selama beberapa waktu dan inilah cara saya biasanya menulisnya.
Yang kecil, tanpa perlu pengontrol, saya suka menulis templat di dalam file yang sama dengan nilai pengembalian dari fungsi yang diangkat
(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('');
}
}());
Untuk yang lebih maju, saya ingin meletakkan template di file terpisah dan menggunakan properti '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');
}
}
}());
Saya juga ingin tahu tentang pendapat Anda tentang hook $onInit dan bagaimana menurut Anda komponen harus diuji.
Terima kasih
(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');
}
}
}());
Dengan cara ini pengontrol dapat diuji.
Secara pribadi saya lebih suka cara ini.
(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');
}
}
}());
Dengan cara ini pengontrol dapat diuji.
@softsimon : v1.5.0
memperkenalkan ngMock#$componentController , jadi Anda tidak perlu mendaftarkan pengontrol secara terpisah demi testability :smiley:
Saya bisa kedua, thx @gkalpak . @softsimon Anda cukup melewati baris ini dari atas:
.controller('ActivePlacesController', ActivePlacesController);
Saya juga penggemar berat panduan gaya ini.
@xavhan untuk $onInit
Saya akan menggunakan cara ini dalam contoh Anda:
vm.$onInit = activate;
function activate() {
}
Saya mungkin menyebutnya init
dan tidak aktif dari v1.5.0.
Saya juga ingin tahu apa pendapat @johnpapa tentang ini,
:+1: untuk
vm.$onInit = activate;
function activate() {
}
ditutup untuk #766 menjadi tempat diskusi komponen
Komentar yang paling membantu
Saya bisa kedua, thx @gkalpak . @softsimon Anda cukup melewati baris ini dari atas:
.controller('ActivePlacesController', ActivePlacesController);
Saya juga penggemar berat panduan gaya ini.
@xavhan untuk
$onInit
Saya akan menggunakan cara ini dalam contoh Anda:vm.$onInit = activate;
function activate() {
}
Saya mungkin menyebutnya
init
dan tidak aktif dari v1.5.0.Saya juga ingin tahu apa pendapat @johnpapa tentang ini,