As expressões são trechos de código do tipo JavaScript, geralmente colocados na área ligada (como {{Expression}}). As expressões são analisadas e executadas através do Serviço $ parse (http://code.angularjs.org/1.0.2/docs/api/ng.$parse).
Por exemplo, os seguintes são expressões válidas no Angular:
1. Expressão angular vs. expressão JS
Isso é fácil para as pessoas associarem uma expressão de visão angular como uma expressão de JavaScript, mas isso não é totalmente correto, porque o Angular não avalia uma expressão através da Eval () do JavaScript. Você pode pensar em uma expressão angular como uma expressão de JavaScript com as seguintes diferenças:
Por outro lado, se quisermos executar o código JavaScript arbitrário (em uma expressão angular), podemos escrever esse código em um dos métodos do controlador e chamá -lo. Se quisermos avaliar () uma expressão angular no JavaScript, podemos usar o método $ avali ().
<! Doctype html> <html lang = "zh-cn" ng-App = "ExpressionTest"> <head> <meta charset = "utf-8"> <title> expressão-e1 </title> <style type = "text/css"> .ng-cloak {exibir: nenhum; } </style> </head> <corpo ng-controller = "myctrl"> 1 + 2 = {{1 + 2}} <br/> expressão: <input type = "text" ng-model = "expr"/> <butt ng-click = "addEx (expr)"> Extiate </button " ng-click = "Remonexp ($ index)" href = "" "> x </a>] <tt> {{expr}}} </tt> => <span ng-bind =" $ parent. $ avali (expr) "> </span> </li> </ul> <script src = "/ angular-1.0 type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("ExpressionTest", []); App.Controller ("myctrl", function ($ scope) {var exprs = $ scope.exprs = []; $ scope.expr = "3*10 | moeda"; $ scope.adDexp = function (expr) {exprs.push (expr);}; $ scope.roMovexPexp = funct) {exprs.push (expr);}; }); </script> </body> </html>2. Avaliação da propriedade
O contexto do ambiente de análise de expressão angular é o escopo, enquanto o JavaScript é a janela (ele deve se referir ao modo rigoroso Evel), e o Angular precisa acessar o objeto global da janela através da janela $. Por exemplo, se precisarmos chamar alert () definido em um objeto de janela em uma expressão, precisamos usar $ window.alert (). Isso pretende evitar acidentalmente acessar o estado global (uma fonte comum de bugs sutis).
<! Doctype html> <html lang = "zh-cn" ng-App = "PropertyEvaluation"> <head> <meta charset = "utf-8"> <title> PropertyEvaluation </title> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng --Controller = "myctrl"> nome: <input ng-model = "name" type = "text"/> <botão ng-click = "greet ()"> greet </button> </div> <script src = "/ angular-1.0.1.js "tipos </div" </script srclt = "/ angular-) "> type = "text/javascript"> var app = angular.module ("PropertyEvaluation", []); App.Controller ("myctrl", função ($ scope, $ window) {$ scope.name = "kitty"; $ scope.greet = function () {$ window.alert ("hello" + $ scope.name);};}); </script> </body> </html>3. Perdoador (tolerância, tolerância a falhas?)
A avaliação da expressão é perdoadora indefinida e nula. Em JavaScript, quando A não é um objeto, avalie o ABC, uma exceção será lançada. Às vezes, isso é razoável para idiomas comuns, e a avaliação da expressão é usada principalmente para ligação de dados, e a forma geral é a seguinte:
{{abc}}
Se A não existir, nenhuma tela parece ser mais razoável do que jogar uma exceção (a menos que aguardamos o servidor responder, que será definido em pouco tempo). Se a expressão não for tolerante o suficiente ao avaliar, escrevemos o código de ligação de maneira tão confusa:
{{((a || {}). B || {}). C}} // this ...
Da mesma forma, ao se referir a uma função ABC (), se for indefinida ou nula, basta retornar indefinido.
4. Sem declarações de fluxo de controle
Não podemos escrever declarações de controle de processo em expressões. A razão por trás disso é que o sistema central do Angular é que a lógica do aplicativo deve estar no controlador (escopo), não na visualização. Se precisarmos adicionar ramificações, loops ou exceções condicionais na expressão de visualização, podemos delegar o método JavaScript (você pode chamar o método no escopo).
5. Filtros
Quando apresentamos dados aos usuários, podemos precisar converter os dados do formato original em um formato amigável (altamente legível). Por exemplo, temos um objeto de dados que precisa ser formatado com base na região antes de ser exibido ao usuário. Podemos passar expressões para uma série de filtros, como:
nome | maiúsculas
Este avaliador de expressão pode simplesmente passar o valor do nome no filtro de maiúsculas.
Os filtros de cadeia usam esta sintaxe:
valor | filtro1 | filtro2
Também podemos transferir parâmetros divididos por colonos para filtros, por exemplo, exibindo 123 em dois lugares decimais:
123 | Número: 2
6. Prefixo "$"
Podemos achar estranho, qual é o significado do prefixo "$"? É um prefixo simples (impedindo conflitos) usado pelo Angular para diferenciar seu nome de API de outras APIs. Se o Angular não usar $, a avaliação de A.Length () retornará indefinida. Porque nem um nem um angular definem essa propriedade.
Considerando que as versões futuras do Angular podem optar por aumentar o comprimento, isso mudará o comportamento dessa expressão. O pior é que nós, desenvolvedores, podemos criar uma propriedade de comprimento que entrará em conflito com o Angular. Esse problema existe porque o Angular estende o objeto atualmente existente adicionando métodos. Ao adicionar o prefixo "$", o Angular mantém um espaço de nome específico, de modo que desenvolvedores e desenvolvedores angulares que usam Angular podem viver em harmonia.