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.htmlc'est le html pour entrer et confirmer un mot de passe. J'utilise ceci à la fois sous la page d'inscription et sous la page de changement de mot de passe. Ces deux pages ont chacune un contrôleur, le HTML partiel n'a pas de contrôleur dédié.

Dois-je utiliser directive ou ngIncludepour cela?

Tout dépend de ce que vous attendez de votre fragment de code. Personnellement, si le code n'a aucune logique, ou n'a même pas besoin d'un contrôleur, alors je vais avec ngInclude. Je mets généralement de gros fragments HTML plus "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. C'est plus propre d'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 (c'est-à-dire rendre différemment) dans différentes instances où elle est utilisée, alors directivesc'est le meilleur choix (elles sont intimidantes au début, mais elles sont très puissantes, laissez-lui le temps) .

ngInclude

Parfois, vous verrez ngInclude'squi sont affectés par leur extérieur $scope/ interface. Comme un répéteur grand / compliqué disons. Ces 2 interfaces sont liées ensemble à cause de cela. Si quelque chose dans le principal $scopechange, vous devez modifier / changer votre logique dans votre partiel inclus.

Directives

D'un autre côté, les directives peuvent avoir des portées / contrôleurs / etc. explicites. Donc, si vous pensez à un scénario où vous auriez à réutiliser quelque chose plusieurs fois, vous pouvez voir comment avoir sa propre portée connectée rendrait la vie plus facile et moins déroutant.

De plus, à chaque fois que vous allez interagir avec le DOM, vous devez utiliser une directive. Cela le rend meilleur pour les tests et dissocie ces actions d'un contrôleur / service / etc, ce que vous voulez!

Astuce: assurez-vous de ne pas utiliser restrict: 'E' si vous vous souciez d'IE8! Il existe des moyens de contourner cela, mais ils sont ennuyeux. Simplifiez-vous la vie et tenez-vous-en à l'attribut / etc.<div my-directive />

Composants [Mise à jour du 01/03/2016]

Ajouté dans Angular 1.5, c'est essentiellement un wrapper .directve(). Le composant doit être utilisé la plupart du temps. Il supprime beaucoup de code de directive standard, par défaut à des choses comme restrict: 'E', scope : {}, bindToController: true. Je recommande vivement 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 plupart 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 dans toute votre application

Mise à jour du 01/03/2016

Maintenant qu'Angular 2 se termine lentement, et nous connaissons le format général (bien sûr, il y aura encore des changements ici et là) je voulais juste ajouter à quel point il est important de faire components(parfois des directives si vous avez besoin qu'elles soient restrictives: '' E 'par exemple).

Les composants sont très similaires à Angular 2 @Component. De cette façon, nous encapsulons la logique et le HTML dans le même domaine.

Assurez-vous d'encapsuler autant de choses que possible dans les composants, cela rendra la transition vers Angular 2 beaucoup plus facile! (Si vous choisissez de faire la transition)

Voici un bel article décrivant ce processus de migration en utilisant directives(très similaire si vous alliez bien sûr utiliser des composants): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/