Les expressions sont des extraits de code de type JavaScript, généralement placés dans la zone liée (comme {{expression}}). Les expressions sont analysées et exécutées via le service $ parse (http://code.angularjs.org/1.0.2/docs/api/ng.$arse).
Par exemple, ce qui suit est des expressions valides en angulaire:
1. Expression angulaire contre JS Expression
Cela est facile pour les gens d'associer une expression de la vision angulaire comme une expression JavaScript, mais ce n'est pas entièrement correct, car Angular n'évalue pas une expression via EVAM () de JavaScript. Vous pouvez considérer une expression angulaire comme une expression javascript avec les différences suivantes:
D'un autre côté, si nous voulons exécuter un code JavaScript arbitraire (dans une expression angulaire), nous pouvons écrire ce code dans l'une des méthodes du contrôleur et l'appeler. Si nous voulons évaluer () une expression angulaire dans JavaScript, nous pouvons utiliser la méthode $ ev ().
<! Doctype html> <html lang = "zh-cn" ng-app = "expressionTest"> <éadf> <meta charset = "utf-8"> <title> Expression-e1 </title> <style type = "text / css"> .ng-coak {display: non; } </ style> </ head> <body ng-controller = "myctrl"> 1 + 2 = {{1 + 2}} <br/> Expression: <input type = "text" ng-model = "expr" /> <Button ng-Click = "AddExp (Expr)"> [Button> <ul> <li ng-repeat = "Expr dans"> [Button> ng-click = "removeExp ($ index)" href = ""> x </a>] <tt> {{expr}} </pt> => <span ng-bind = "$ parent. $ eval (expr)"> </span> </li> </ ul> <script src = ".. / script> <1.1. type = "text / javascript"> var app = angular.module ("expressionTest", []); app.Controller ("myctrl", fonction ($ scope) {var exprs = $ scope.exprs = []; $ scope.expr = "3 * 10 | devise"; $ scope.addexp = function (expr) {exprs.push (expr);}; $ scope.removeExp = function (index) {expr.splice (index, 1); }); </cript> </ body> </html>2. Évaluation des biens
Le contexte de l'environnement d'analyse de l'expression angulaire est la portée, tandis que JavaScript est la fenêtre (il doit se référer au mode strict Evel), et Angular doit accéder à l'objet de fenêtre global via $ fenêtre. Par exemple, si nous devons appeler alert () défini sur un objet de fenêtre dans une expression, nous devons utiliser $ window.lerlert (). Ceci est destiné à éviter d'accéder accidentellement à l'état mondial (une source commune de bogues subtils).
<! Doctype html> <html lang = "zh-cn" ng-app = "PropertyEvaluation"> <éadf> <meta charset = "utf-8"> <itle> PropertyEvaluation </Title> <style type = "text / css"> .ng-coak {display: non; } </ style> </ head> <body> <div ng-controller = "myctrl"> name: <entrée ng-model = "name" type = "text" /> <button ng-click = "grel ()"> saluer </ bouton> </ div> <script src = "../ angular---1.0.1.js" type = "text / javascript"> </ script> type = "text / javascript"> var app = angular.module ("propriétéValuation", []); app.Controller ("myctrl", function ($ scope, $ window) {$ scope.name = "kitty"; $ scope.greet = function () {$ window.Alert ("hello" + $ scope.name);};}); </ script> </ body> </ html>3. Prédonner (tolérance, tolérance aux défauts?)
L'évaluation de l'expression pardonne indéfinie et nul. Dans JavaScript, lorsque A n'est pas un objet, évaluez ABC, une exception sera lancée. Parfois, cela est raisonnable pour les langues communes, et l'évaluation de l'expression est principalement utilisée pour la liaison des données, et la forme générale est la suivante:
{{abc}}
Si A n'existe pas, aucun écran ne semble plus raisonnable que de lancer une exception (à moins que nous n'attendons que le serveur réponde, qui sera défini dans un court moment). Si l'expression n'est pas suffisamment tolérante lors de l'évaluation, alors nous écrivons le code de liaison avec si confuse:
{{((a || {}). B || {}). C}} // this ...
De même, lors de la référence à une fonction ABC (), s'il n'est pas défini ou nul, il renvoie simplement indéfini.
4. Aucune instruction de flux de contrôle
Nous ne pouvons pas écrire des instructions de contrôle des processus dans les expressions. La raison derrière cela est que le système central d'Angular est que la logique de l'application doit être dans le contrôleur (portée), pas dans la vue. Si nous devons ajouter des branches conditionnelles, des boucles ou jeter des exceptions dans l'expression de la vue, nous pouvons plutôt déléguer la méthode JavaScript (vous pouvez appeler la méthode dans la portée).
5. Filtres
Lorsque nous présentons des données aux utilisateurs, nous devrons peut-être convertir les données du format d'origine en un format convivial (très lisible). Par exemple, nous avons un objet de données qui doit être formaté en fonction de la région avant d'être affiché à l'utilisateur. Nous pouvons transmettre des expressions à une série de filtres, tels que:
Nom | majuscule
Cet évaluateur d'expression peut simplement passer la valeur du nom dans le filtre en majuscules.
Les filtres à chaîne utilisent cette syntaxe:
Valeur | Filter1 | filtre2
Nous pouvons également transférer des paramètres divisés par des colons en filtres, par exemple, affichant 123 en deux décimales:
123 | Numéro: 2
6. Préfixe "$"
On peut le trouver étrange, quelle est la signification du préfixe "$"? Il s'agit d'un préfixe simple (prévention des conflits) utilisé par Angular pour différencier son nom d'API des autres API. Si Angular n'utilise pas $, l'évaluation de A.Length () retournera non définie. Parce que ni un ni angulaire ne définit cette propriété.
Étant donné que les futures versions d'Angular peuvent choisir d'augmenter la longueur, cela changera le comportement de cette expression. Ce qui est pire, c'est que nous, les développeurs, pouvons créer une propriété de longueur qui sera ensuite en conflit avec Angular. Ce problème existe car Angular étend l'objet actuellement existant en ajoutant des méthodes. En ajoutant le préfixe "$", Angular conserve un espace de noms spécifique, donc les développeurs et développeurs angulaires utilisant Angular peuvent vivre en harmonie.