Introdução ao AngularJS
AngularJS é uma estrutura JavaScript . Ele pode ser adicionado a uma página HTML com uma tag <script>.
AngularJS estende atributos HTML com Diretivas e vincula dados a HTML com Expressões .
AngularJS é um framework JavaScript
AngularJS é um framework JavaScript escrito em JavaScript.
O AngularJS é distribuído como um arquivo JavaScript e pode ser adicionado a uma página da Web com uma tag de script:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS estende HTML
AngularJS estende HTML com ng-directives .
A diretiva ng-app define um aplicativo AngularJS.
A diretiva ng-model vincula o valor dos controles HTML (input, select, textarea) aos dados do aplicativo.
A diretiva ng-bind vincula os dados do aplicativo à visualização HTML.
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>
Exemplo explicado:
O AngularJS é iniciado automaticamente quando a página da Web é carregada.
A diretiva ng-app diz ao AngularJS que o elemento <div> é o "proprietário" de um aplicativo AngularJS .
A diretiva ng-model vincula o valor do campo de entrada ao nome da variável do aplicativo .
A diretiva ng-bind vincula o conteúdo do elemento <p> à variável do aplicativo name .
Diretivas AngularJS
Como você já viu, as diretivas AngularJS são atributos HTML com um prefixo ng .
A diretiva ng-init inicializa as variáveis do aplicativo AngularJS.
Exemplo AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Alternativamente com HTML válido:
Exemplo AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Você pode usar data-ng- , em vez de ng- , se quiser tornar sua página HTML válida.
Você aprenderá muito mais sobre diretivas posteriormente neste tutorial.
Expressões AngularJS
As expressões AngularJS são escritas entre chaves duplas: {{ expressão }} .
O AngularJS "exibirá" os dados exatamente onde a expressão está escrita:
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
As expressões AngularJS vinculam dados AngularJS a HTML da mesma maneira que a diretiva ng-bind .
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Você aprenderá mais sobre expressões posteriormente neste tutorial.
Aplicativos AngularJS
Os módulos AngularJS definem aplicativos AngularJS.
Os controladores AngularJS controlam os aplicativos AngularJS.
A diretiva ng-app define o aplicativo, a diretiva ng-controller 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>
Os módulos AngularJS definem aplicativos:
Módulo AngularJS
var app = angular.module('myApp', []);
Os controladores AngularJS controlam aplicativos:
Controlador AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Você aprenderá mais sobre módulos e controladores posteriormente neste tutorial.