Latest web development tutorials

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:

<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>

nota 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

<! DOCTYPE html>
<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.

nota 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

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

tente »

nota 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

<div data-ng-app="" data-ng-init="firstName='John'">

<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

<! DOCTYPE html>
<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

<Div ng-app = "myApp " ng-controller = "myCtrl">

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

var app = angular.module ( 'myApp', []);

AngularJS aplicações do controlador:

AngularJS Controllers

app.controller ( 'myCtrl', function ($ escopo) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});

No próximo tutorial, você vai aprender mais conhecimento e módulos de aplicativo.