AngularJS Introdução
AngularJS é um framework JavaScript. Ele pode ser adicionado a páginas HTML através do tag <script>.
AngularJS por directiva estende o HTML, e através dos expressão de dados ligam a HTML.
AngularJS é um framework JavaScript
AngularJS é um framework JavaScript. É uma biblioteca escrita em JavaScript.
arquivo AngularJS JavaScript é uma forma de libertação pode ser adicionado pela tag script para a página:
Propomos roteiro na parte inferior do elemento <body>. Isto irá aumentar a velocidade de carregamento da página, porque o HTML não está sujeito a carregar script para carregar. |
Cada versão angularjs download: https://github.com/angular/angular.js/releases
AngularJS estende HTML
AngularJS por NG-directivas estendida HTML.
directiva ng-app define uma aplicação AngularJS.
NG-modelo comandar os valores de elementos (tais como o valor do campo de entrada) ligadas à aplicação.
comando ng-bind para vincular dados de aplicativos para a vista HTML.
AngularJS exemplos
<Html>
<Head>
<Charset Meta = "utf-8 ">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>
<Div ng-app = "" >
<P> Nome: <input type = "text" ng-model = "name"> </ p>
<H1> Olá {{name} } </ h1>
</ Div>
</ Body>
</ Html>
tente »
Exemplos de explicar:
Quando a página é carregada, AngularJS automaticamente.
directiva ng-app diz AngularJS, <div> elemento é a aplicação AngularJS do "dono".
directiva ng-modelo vincula o valor do campo de entrada para o nome da variável do aplicativo.
comando ng-se ligam a um nome de variável de aplicação está vinculado a um parágrafo innerHTML.
Se você remover a directiva ng-app, HTML será exibido diretamente para a expressão, não para avaliar a expressão dos resultados. |
O que é AngularJS?
AngularJS faz com que o desenvolvimento da moderna aplicação de uma única página (ZPE: Aplicações Page Individual) mais fácil.
- AngularJS dados de aplicativos se ligam a elementos HTML.
- AngularJS elementos HTML podem ser clonados e repita.
- AngularJS pode ocultar e mostrar elementos HTML.
- AngularJS pode adicionar código para o elemento HTML "para trás".
- AngularJS apoiar validação de entrada.
AngularJS directivas
Como você pode ver, AngularJS instrução é prefixado atributos HTML ng.
comando ng-init para inicializar variáveis de aplicativo AngularJS.
AngularJS exemplos
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
tente »
HTML5 permite estender a propriedade (caseiro) para data- início. AngularJS propriedade início GN-a, mas você pode usar dados-GN-a fazer páginas da web para HTML5 válido. |
Com HTML5 válido:
AngularJS exemplos
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
tente »
AngularJS expressão
AngularJS expressões escritas entre chaves: {{expressão}}.
AngularJS expressão para vincular os dados para HTML, que comando ng-bind tem a mesma finalidade.
AngularJS expressão na escrita de posição de dados "Saída".
AngularJS expressões como expressões JavaScript: eles podem conter texto, operadores e variáveis.
Exemplos 5 + 5 {{}} ou {{firstName + "" + lastName}}
AngularJS exemplos
<Html>
<Head>
<Charset Meta = "utf-8">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>
<Div ng-app = "">
<P> A minha primeira expressão: {{5 + 5}} </ p>
</ Div>
</ Body>
</ Html>
tente »
AngularJS Applications
AngularJS módulo (Module) define aplicações AngularJS.
AngularJS Controllers (Controlador) para controlar aplicações AngularJS.
directiva ng-app define a aplicação, ng-controlador define o controlador.
AngularJS exemplos
Nome: <input type = "text" ng-model = "firstName"> <br>
Apelido: <input type = "text" ng-model = "Sobrenome"> <br>
<br>
Nome: {{firstName + "" + lastName}}
</ Div>
<Script>
var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ escopo) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>
tente »
AngularJS definição módulo de aplicação:
AngularJS módulo
AngularJS aplicações do controlador:
AngularJS Controllers
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
No próximo tutorial, você vai aprender mais conhecimento e módulos de aplicativo.