Avec la sortie d'Angular 1.5, nous pouvons utiliser le raccourci .component() pour créer des directives de composant.
Avez-vous des suggestions pour l'utiliser ?
Je suis un grand adepte de votre guide de style depuis un certain temps et voici comment je les écris habituellement.
Les petits, sans avoir besoin d'un contrôleur, j'aime écrire le modèle dans le même fichier que la valeur de retour d'une fonction hissée
(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('');
}
}());
Pour les plus avancés, j'aime mettre le modèle dans un fichier séparé et utiliser la propriété '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');
}
}
}());
Je suis également curieux de connaître votre opinion sur le crochet $onInit et comment pensez-vous que les composants devraient être testés.
Merci
(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 cette façon, le contrôleur peut être testé.
Personnellement, je préfère cette façon.
(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 cette façon, le contrôleur peut être testé.
@softsimon : v1.5.0
introduit ngMock#$componentController , vous n'avez donc pas besoin d'enregistrer le contrôleur séparément pour des raisons de testabilité :smiley:
Je peux seconder, merci @gkalpak . @softsimon, vous pouvez simplement sauter cette ligne d'en haut :
.controller('ActivePlacesController', ActivePlacesController);
Je suis aussi un grand fan de ce guide de style.
@xavhan pour $onInit
J'utiliserais cette façon dans votre exemple :
vm.$onInit = activate;
function activate() {
}
Je pourrais l'appeler init
et ne pas l'activer à partir de la v1.5.0.
Je suis également curieux de savoir ce que @johnpapa pense à ce sujet, appréciez vos conseils à l'avance.
:+1: pour
vm.$onInit = activate;
function activate() {
}
fermé pour #766 pour être le lieu de discussion des composants
Commentaire le plus utile
Je peux seconder, merci @gkalpak . @softsimon, vous pouvez simplement sauter cette ligne d'en haut :
.controller('ActivePlacesController', ActivePlacesController);
Je suis aussi un grand fan de ce guide de style.
@xavhan pour
$onInit
J'utiliserais cette façon dans votre exemple :vm.$onInit = activate;
function activate() {
}
Je pourrais l'appeler
init
et ne pas l'activer à partir de la v1.5.0.Je suis également curieux de savoir ce que @johnpapa pense à ce sujet, appréciez vos conseils à l'avance.