Primeira Aplicação
Antes de começar com a criação de aplicação usando o AngularJS, vamos ver quais são as partes reais de uma aplicação AngularJS. Uma aplicação AngularJS consiste em seguir três partes importantes.
- ng-app - Define e linka uma aplicação AngularJS com o HTML.
- ng-model - Linka os valores de dados da aplicação AngularJS com o HTML para inserir dados.
- ng-bind - Linka os dados da aplicação com as tags HTML.
Passos para criar uma aplicação AngularJS:
Passo 1 - Carregar framework
Sendo um framework JavaScript puro, ele pode ser adicionado usando a tag <script>.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
Passo 2 - Definir uma aplicação AngularJS utilizando a diretiva ng-app
<div ng-app = ""> ... </div>
Passo 3 - Defina o nome da model utilizando a diretiva ng-model
<p>Insira seu nome: <input type = "text" ng-model = "name"></p>
Passo 3 - Vincular o valor da model utilizando a diretiva ng-bind.
<p>E aee \0/ <span ng-bind = "name"></span>!</p>
Utilize as três etapas acima em uma página HTML.
Nome do arquivo: teste_angular.html
Nome do arquivo: teste_angular.html
<html> <head> <title>AngularJS</title> </head> <body> <h1>Primeira Aplicação</h1> <div ng-app = ""> <p>Insira seu nome: <input type = "text" ng-model = "name"></p> <p>E aee \0/ <span ng-bind = "name"></span>!</p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </body> </html>
Resultado:
Integração do AngularJS com HTML
- ng-app: indica o início da aplicação AngularJS.
- ng-model: cria uma variável model chamada "name" que pode ser usada com a página html e dentro da div tendo a diretiva ng-app.
- ng-bind: usa a model de name a ser exibida na tag span html sempre que o usuário inserir algo na caixa de texto.
Nenhum comentário:
Postar um comentário