Introdução ao AngularJS
- Página Anterior Tutorial AngularJS
- Próxima Página Expressões AngularJS
O AngularJS é Framework JavaScript. Ele pode ser adicionado à página HTML usando uma tag <script>.
O AngularJS atravésInstruçãoExpande as propriedades HTML e usaExpressãoLiga os dados ao HTML.
O AngularJS é uma framework JavaScript
O AngularJS é uma framework JavaScript escrita em JavaScript.
O AngularJS é distribuído na forma de arquivo JavaScript e pode ser adicionado à página da web usando a tag <script>:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
O AngularJS expande o HTML
O AngularJS usa ng-instruçãoExpande o HTML.
ng-app O comando define um aplicativo AngularJS.
ng-model O comando liga o valor do controle HTML (input, select, textarea) aos dados do aplicativo.
ng-bind O comando liga os dados do aplicativo ao visual HTML.
Exemplo AngularJS
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/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 de explicação:
Quando a página da web é carregada, o AngularJS inicia automaticamente.
ng-app O comando informa ao AngularJS que o elemento <div> é um AngularJS Aplicativodo “proprietário”.
ng-model O comando liga o valor do campo de entrada ao variável do aplicativo. name.
ng-bind As diretivas ligam o conteúdo do elemento <p> à variável do aplicativo. name.
Directivas AngularJS
Como você pode ver, as diretivas AngularJS têm ng propriedades HTML com prefixo.
ng-init Inicialização de variáveis do aplicativo AngularJS pela diretiva.
Exemplo AngularJS
<div ng-app="" ng-init="firstName='Bill'"> <p>Nome é <span ng-bind="firstName"></span></p> </div>
ou use HTML válido:
Exemplo AngularJS
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>Nome é <span data-ng-bind="firstName"></span></p> </div>
Se você quiser que o HTML da página seja válido, você pode usar data-ng- em vez de ng-.
Você aprenderá mais sobre diretivas em parte posterior deste tutorial.
Expressões AngularJS
As expressões AngularJS são escritas dentro de chaves duplas:{{ expressão }}.
O AngularJS "saída" dados no local da expressão:
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Minha primeira expressão:{{ 5 + 5 }}</p>
</div>
</body>
</html>
As expressões AngularJS ligam dados AngularJS ao HTML, como ng-bind Da mesma forma que as diretivas.
Exemplo AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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 em parte posterior deste tutorial.
Aplicação AngularJS
AngularJS MóduloDefinição do aplicativo AngularJS.
AngularJS ControladorControle do aplicativo AngularJS.
ng-app Definição de aplicativo,ng-controller Definição de diretiva de controlador.
Exemplo AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="firstName"><br>Nome:
Sobrenome：<input type="text" ng-model="lastName"><br>
<br>
Nome Completo：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
Módulos AngularJS definem a aplicação:
Módulos AngularJS
var app = angular.module('myApp', []);
Controladores AngularJS controlam a aplicação:
Controladores AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
Você aprenderá mais sobre módulos e controladores neste tutorial.
- Página Anterior Tutorial AngularJS
- Próxima Página Expressões AngularJS
