AngularJS: ngInclude vs directive
Je ne comprends pas très bien quand utiliser une directive et quand il serait plus approprié d'utiliser nginclude. Prenons cet exemple: j'ai un partiel, password-and-confirm-input-fields.html, c’est le code HTML permettant de saisir et de confirmer un mot de passe. J'utilise à la fois sous page d'inscription et sous page de changement de mot de passe. Ces deux pages ont chacune un contrôleur, le code HTML partiel n’a pas de contrôleur dédié.
Devrais-je utiliser directive ou ngInclude pour cela?
Tout dépend de ce que vous voulez de votre fragment de code. Personnellement, si le code n'a pas de logique, ou n'a même pas besoin de contrôleur, alors je vais avec ngInclude. En général, je mets de gros fragments html "statiques" que je ne veux pas encombrer ici. (C'est-à-dire: disons une grande table dont les données proviennent du contrôleur parent. De toute façon, il vaut mieux avoir <div ng-include="bigtable.html" /> que toutes ces lignes encombrant la vue)
S'il y a une logique, une manipulation DOM ou si vous avez besoin qu'elle soit personnalisable (autrement dit rendre différemment) dans différentes instances, alors directives est le meilleur choix (ils sont intimidants au début, mais ils sont très puissant, donnez-lui le temps).
ngInclude
Parfois, vous verrez ngInclude's Affectés par leur extérieur $scope/interface. Comme un répéteur de grande taille/compliqué, disons. Ces 2 interfaces sont liées entre elles à cause de cela. Si quelque chose dans le $scope Principal change, vous devez modifier/changer votre logique dans votre partiel inclus.
Directives
D'autre part, les directives peuvent avoir des portées/contrôleurs/etc. explicites. Donc, si vous songez à un scénario dans lequel vous devriez réutiliser quelque chose plusieurs fois, vous pouvez voir: comment avoir son propre domaine connecté rendrait la vie plus facile et moins déroutante.
De plus, chaque fois que vous allez interagir avec le DOM, vous devez utiliser une directive. Cela facilite les tests et dissocie ces actions du contrôleur/service/etc., ce que vous souhaitez!
Astuce: Assurez-vous que n'est pas à utiliser restreindre: 'E' si vous vous souciez de IE8! Il existe des moyens de contourner ce problème, mais ils sont agaçants. Simplifiez-vous la vie et respectez les attributs/etc. <div my-directive />
Composants [Mise à jour 3/1/2016]
Ajouté dans Angular 1.5, il s’agit essentiellement d’un wrapper autour de .directve(). Le composant doit être utilisé la plupart du temps. Il supprime beaucoup de code de directive standard, en utilisant par défaut des éléments tels que restrict: 'E', scope : {}, bindToController: true. Je recommande fortement de les utiliser pour presque tout dans votre application, afin de pouvoir passer plus facilement à Angular2.
En conclusion:
Vous devriez créer des composants et des directives la majorité du temps.
- Plus extensible
- Vous pouvez modéliser et avoir votre fichier en externe (comme ngInclude)
- Vous pouvez choisir d'utiliser la portée parent ou sa propre portée isolate dans la directive.
- Meilleure réutilisation tout au long de votre application
Mise à jour du 3/1/2016
Maintenant que Angular 2 est en train de se terminer, et nous connaissons le format général (bien sûr, il y aura toujours des changements ici et là) je voulais juste ajouter à quel point il est important de le faire components (parfois des directives si vous avez besoin qu'elles soient restrictives: 'E' par exemple).
Les composants sont très similaires aux Angular 2 @Component. De cette façon, nous encapsulons la logique & html dans le même domaine.
Assurez-vous d’encapsuler le plus de choses possible dans les composants, cela facilitera beaucoup la transition vers Angular 2! (Si vous choisissez de faire la transition)
Voici un article de Nice décrivant ce processus de migration en utilisant directives (très similaire si vous utilisiez des composants bien sûr): http://angular-tips.com/blog/2015/09/migrating -directives-to-angular-2 /