AngularJS: Pourquoi ng-bind est meilleur que {{}} en angulaire?
J'étais dans l'un des angular présentations et l'un des participants à la réunion mentionnée ng-bind est meilleur que {{}} obligatoire.
Une des raisons, ng-bind a mis la variable dans la liste de surveillance et, en cas de modification du modèle, les données sont poussées à la visualisation. Par contre, {{}} interpolera l'expression à chaque fois (I devinez que c’est le cycle angular) et appuyez sur la valeur, même si la valeur a changé ou non.
De plus, il est dit que si vous n'avez pas beaucoup de données à l'écran, vous pouvez utiliser {{}} et le problème de performances ne sera pas visible. Quelqu'un peut-il m'éclairer sur ce problème?
Si vous n'utilisez pas _ng-bind_, utilisez plutôt ceci:
_<div>
Hello, {{user.name}}
</div>
_vous pouvez voir la valeur réelle _Hello, {{user.name}}_ pendant une seconde avant que _user.name_ soit résolu (avant que les données ne soient chargées)
Tu pourrais faire quelque chose comme ça
_<div>
Hello, <span ng-bind="user.name"></span>
</div>
_si c'est un problème pour vous.
Une autre solution consiste à utiliser ng-cloak .
Visibilité:
Pendant que votre angularjs s’amorce, l’utilisateur peut voir vos crochets placés dans le code HTML. Ceci peut être géré avec ng-cloak. Mais pour moi, il s’agit d’une solution de contournement que je n’ai pas besoin d’utiliser si j’utilise ng-bind.
Performance:
Le {{}} est beaucoup plus lent .
Cette ng-bind est une directive et placera un observateur sur la variable transmise. Ainsi, le ng-bind ne s'appliquera que lorsque la valeur transmise changera réellement .
Les crochets seront par contre cochés et actualisés dans tous les $digest, même si ce n'est pas nécessaire .
Je construis actuellement une grande application d'une seule page (~ 500 liaisons par vue). Passer de {{}} à strict ng-bind nous a permis d'économiser environ 20% sur chaque scope.$digest.
Suggestion :
Si vous utilisez un module de traduction tel que angular-translate , préférez toujours les directives avant les annotations entre crochets.
{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>
Si vous avez besoin d'une fonction de filtre, optez plutôt pour une directive, qui utilise simplement votre filtre personnalisé. Documentation pour le service de filtrage $
UPDATE 28.11.2014 (mais peut-être en dehors du sujet):
Dans Angular 1.3x, la fonctionnalité bindonce a été introduite. Par conséquent, vous pouvez lier une fois la valeur d'une expression/d'un attribut (elle sera liée quand! = 'Undefined').
Ceci est utile lorsque vous ne vous attendez pas à ce que votre liaison change.
Utilisation: Placez :: avant votre reliure:
<ul>
<li ng-repeat="item in ::items">{{item}}</li>
</ul>
<a-directive name="::item">
<span data-ng-bind="::value"></span>
Exemple:
ng-repeat pour afficher certaines données de la table, avec plusieurs liaisons par ligne. Les liaisons de traduction, les sorties de filtre, qui sont exécutées dans chaque résumé de portée.
_ng-bind_ est meilleur que _{{...}}_
Par exemple, vous pourriez faire:
_<div>
Hello, {{variable}}
</div>
_Cela signifie que tout le texte Hello, {{variable}} inclus par _<div>_ sera copié et stocké en mémoire.
Si vous faites plutôt quelque chose comme ceci:
_<div>
Hello, <span ng-bind="variable"></span>
</div>
_Seule la valeur de la valeur sera stockée en mémoire et angular enregistrera un observateur (expression de contrôle) constitué uniquement de la variable.
Fondamentalement, la syntaxe double-bouclée est plus naturellement lisible et nécessite moins de dactylographie.
Les deux cas produisent le même résultat, mais .. si vous choisissez d'aller avec {{}}, il est possible que l'utilisateur voie pendant quelques millisecondes le {{}} avant que votre modèle ne soit restitué sous forme angulaire. Donc, si vous remarquez un {{}} alors il vaut mieux utiliser ng-bind.
Ce qui est également très important, c’est que seul votre index.html de votre application angular vous permet d’avoir un {{}} non rendu. Si vous utilisez des directives, alors les templates, il n'y a aucune chance de voir cela parce que angular rend d'abord le template et l'ajoute ensuite au DOM.
{{...}} désigne une liaison de données bidirectionnelle. Mais ng-bind est en fait destiné à la liaison de données unidirectionnelle.
L'utilisation de ng-bind réduira le nombre d'observateurs de votre page. Par conséquent, ng-bind sera plus rapide que {{...}}. Donc, si vous voulez seulement afficher une valeur et ses mises à jour, et ne voulez pas refléter sa modification de l'interface utilisateur vers le contrôleur, optez pour ng-bind. Cela augmentera les performances de la page et réduira le temps de chargement de la page.
<div>
Hello, <span ng-bind="variable"></span>
</div>
En effet, avec {{}}, le compilateur angular considère à la fois le nœud de texte et son parent car il est possible de fusionner deux nœuds {{}}. Par conséquent, il existe des lieurs supplémentaires qui ajoutent au temps de chargement. Bien entendu, la différence est sans importance pour quelques-unes de ces situations, mais si vous l'utilisez dans un répéteur contenant un grand nombre d'éléments, cela aura un impact sur l'environnement d'exécution plus lent.
La raison pour laquelle Ng-Bind est meilleure parce que,
Lorsque votre page n'est pas chargée ou lorsque votre internet est lent ou lorsque votre site Web a été chargé à moitié, vous pouvez voir ce type de problèmes (Vérifiez la capture d'écran avec la marque de lecture) sera déclenché sur l'écran qui est complètement étrange. Pour éviter cela, nous devrions utiliser Ng-bind
Il y a un problème de scintillement dans {{}} comme lorsque vous actualisez la page, nous voyons alors un bref spam d'expression de temps. Nous devons donc utiliser ng-bind au lieu d'expression pour la représentation des données.
ng-bind a aussi ses problèmes.Lorsque vous essayez d'utiliser angular filtres, limite ou autre chose, vous pouvez peut-être peut avoir un problème si vous utilisez ng-bind. Mais dans les autres cas, ng-bind est meilleur dans UX side.Lorsque l'utilisateur ouvre une page, il/elle verra (10ms-100ms) qu'il imprimera des symboles ( {{...}}), c'est pourquoi ng-bind est préférable.
Selon Angular Doc:
Puisque ngBind est un attribut d'élément, il rend les liaisons invisibles pour l'utilisateur pendant le chargement de la page ... c'est la principale différence ...
Fondamentalement jusqu'à ce que tous les éléments dom ne soient pas chargés, nous ne pouvons pas les voir et parce que ngBind est un attribut sur l'élément, il attend que les doms entrent en jeu ... plus d'infos ci-dessous
ngBind
- directive dans le module ng
L'attribut ngBind indique AngularJS pour remplacer le texte. contenu de l'élément HTML spécifié avec la valeur d'une expression donnée et mettre à jour le contenu du texte lorsque la valeur de cette expression change.
Typiquement, vous n'utilisez pas ngBind directement , mais utilisez plutôt le balisage à double bouclage comme {{expression} } qui est similaire mais moins verbeux.
Il est préférable d’utiliser ngBind au lieu de {{expression}} si un modèle est momentanément affiché par le navigateur dans son état brut avant sa compilation par AngularJS. NgBind étant un attribut d'élément, il rend les liaisons invisibles pour l'utilisateur pendant le chargement de la page.
Une solution alternative à ce problème utiliserait la directive ngCloak . visitez ici
pour plus d'informations sur le ngbind , visitez cette page: https://docs.angularjs.org/api/ng/directive/ngBind
Vous pouvez faire quelque chose comme ceci comme attribut, ng-bind :
<div ng-bind="my.name"></div>
ou faites une interpolation comme ci-dessous:
<div>{{my.name}}</div>
ou de cette façon avec les attributs ng-cloak dans AngularJs:
<div id="my-name" ng-cloak>{{my.name}}</div>
ng-cloak, évitez de flasher sur le dom et attendez que tout soit prêt! ceci est égal à l'attribut ng-bind ...
Vous pouvez vous référer à ce site, il vous expliquera lequel est le mieux car je sais que {{}} c'est plus lent que ng-bind.
http://corpus.hubwiz.com/2/angularjs/16125872.html reportez-vous à ce site.
ng-bind est également plus sûr car il représente html sous forme de chaîne.
Ainsi, par exemple, '<script on*=maliciousCode()></script>' sera affiché sous forme de chaîne et ne sera pas exécuté.