Depois de introduzir brevemente a estrutura do AngularJS, este artigo usa um exemplo para demonstrar o uso do método de interpolação {{}} e a instrução NG-b-Bind.
Ao contrário do JQuery, que é apenas uma biblioteca de classes que fortalece e simplifica o desenvolvimento do front-end, o AngularJS é uma estrutura completa na Web front-end, portanto a curva de aprendizado é muito maior.
O AngularJS me dá a sensação de que é semelhante à estrutura de mola de Java, que cola outros componentes na posição de contêiner central. Muitos de seus componentes embutidos já podem atender a cenários gerais e podemos expandir cenários especiais de acordo com a idéia da estrutura.
Vamos começar com o conteúdo mais básico:
A cópia do código é a seguinte:
<! Doctype html>
<html ng-app>
<head>
<meta charset = "utf-8">
<title> Diretiva NG-Bind </title>
</head>
<corpo ng-controller = "hellocontroller">
<div>
<p> Expandir string literais diretamente </p>
Olá {{"World"}}
<HR>
</div>
<div>
<p> Use espaços reservados para produzir variáveis </p>
Olá {{saudação}}
<HR>
</div>
<div>
<p> Use a instrução NG-Bind para produzir variáveis </p>
Olá <span ng-bind = "saudação"> </span>
<HR>
</div>
<script src = "../ lib/angularjs/1.2.26/angular.min.js"> </script>
<Cript>
função hellocontroller ($ scope) {
$ scope.greeting = "World";
}
</script>
</body>
</html>
NG-App declara um módulo AngularJS e é limitado ao escopo da declaração de tags HTML.
NG Controller é um controlador que declara um AngularJS no módulo. O controlador pode ter vários controladores, mas o contexto é isolado e o escopo do controlador deve ser reduzido o máximo possível.
{{}} é a sintaxe de interpolação dos angulares, semelhante à expressão EL $ {} de JSP. A primeira saída é porque o "mundo" é um valor literal, e o programa será lançado diretamente; A segunda saída é porque a saudação é uma variável definida no controlador; portanto, o valor correspondente da variável também será emitido, que também é mundo; A terceira saída usa a instrução de atributo NG-Bind incorporada em AngularJS, e o resultado final é equivalente a {{}}, mas observe que a instrução = é seguida por uma string, não a escreva incorretamente.
O helocontrolador em JS corresponde às instruções sobre o corpo. O parâmetro de entrada $ SCOPE é um serviço fornecido pela estrutura, representando o contexto do controlador atual, e existem outros serviços semelhantes. A estrutura será injetada automaticamente e a entenderemos lentamente mais tarde. O corpo do método possui apenas uma linha e define uma variável no escopo $, que é a variável referenciada no código HTML.
Este artigo é muito simples e você pode executar o código depois de copiá -lo. Observe que o angular.min.js é a versão mais recente da ramificação 1.2. O mesmo código não pode ser executado com a versão 1.3.0. O motivo é desconhecido. Pode ser que o 1.3.0 não seja a versão final de lançamento.