AngularJS é um framework JavaScript. Ele pode ser adicionado a uma página HTML com uma tag <script>.
AngularJS estende atributos HTML com as directivas, e liga-se dados para HTML com expressões.
AngularJS é um framework JavaScript
AngularJS é um framework JavaScript. É uma biblioteca escrita em JavaScript.
AngularJS é distribuído como um arquivo JavaScript, e pode ser adicionado a uma página web com uma tag script:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS Estende HTML
AngularJS estende HTML com NG-directivas.
A directiva ng-app define uma aplicação AngularJS.
A directiva ng-modelo liga o valor de controles HTML (input, select, textarea) para dados de aplicativos.
A directiva ng-bind liga os dados de aplicativos para a vista HTML.
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Tente você mesmo " Exemplo explicou:
AngularJS inicia-se automaticamente quando a página web foi carregado.
A directiva ng-app diz AngularJS que o elemento <div> é o "dono" de uma aplicação AngularJS.
A directiva ng-modelo vincula o valor do campo de entrada para o nome da variável do aplicativo.
A directiva ng-bind liga o innerHTML do elemento <p> para o nome da variável do aplicativo.
directivas AngularJS
Como você já viu, AngularJS directivas são atributos HTML com um prefixo ng.
A directiva ng-init inicializa variáveis de aplicativo AngularJS.
Exemplo AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Tente você mesmo " Alternativamente com HTML válida:
Exemplo AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Tente você mesmo "  | Você pode usar dados-GN-, em vez de GN-, se você quiser fazer a sua página HTML válida. |
|---|
Você vai aprender muito mais sobre diretrizes mais tarde neste tutorial.
AngularJS Expressões
AngularJS expressões são escritas entre chaves duplas: {{expressão}}.
AngularJS vai de dados "saída", exatamente onde a expressão está escrito:
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Tente você mesmo " AngularJS expressões vincular dados AngularJS para HTML da mesma forma que a directiva ng-bind.
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Tente você mesmo " Você vai aprender mais sobre expressões mais adiante neste tutorial.
AngularJS Applications
AngularJS módulos definem aplicações AngularJS.
AngularJS controladores controlar aplicativos AngularJS.
A directiva ng-app define a aplicação, a directiva ng-controlador define o controlador.
Exemplo AngularJS
<div ng-app=" myApp " ng-controller=" myCtrl ">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module(' myApp ', []);
app.controller(' myCtrl ',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Tente você mesmo " AngularJS módulos definem aplicações:
Módulo AngularJS
var app = angular.module('myApp', []);
AngularJS aplicações de controle de controladores:
AngularJS Controlador
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Você vai aprender mais sobre os módulos e controladores mais adiante neste tutorial.