AngularJS - Primeiro Aplicativo

Antes de criar o Hello World! aplicativo usando AngularJS, vamos ver as partes de um aplicativo AngularJS. Um aplicativo AngularJS consiste em seguir três partes importantes -

  • ng-app - Esta diretiva define e vincula um aplicativo AngularJS ao HTML.

  • ng-model - Esta diretiva vincula os valores dos dados do aplicativo AngularJS aos controles de entrada HTML.

  • ng-bind - Esta diretiva vincula os dados do aplicativo AngularJS a tags HTML.

Criando aplicativo AngularJS

Etapa 1: carregar a estrutura

Sendo um framework JavaScript puro, pode ser adicionado usando a tag <Script>.

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Etapa 2: Definir o aplicativo AngularJS usando a diretiva ng-app

<div ng-app = "">
   ...
</div>

Etapa 3: Definir um nome de modelo usando a diretiva ng-model

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Etapa 4: vincular o valor do modelo acima definido usando a diretiva ng-bind

<p>Hello <span ng-bind = "name"></span>!</p>

Executando o aplicativo AngularJS

Use as três etapas mencionadas acima em uma página HTML.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Resultado

Abra o arquivo testAngularJS.htm em um navegador da web. Digite seu nome e veja o resultado.

Como AngularJS se integra com HTML

  • A diretiva ng-app indica o início do aplicativo AngularJS.

  • A diretiva ng-model cria uma variável de modelo denominada nome, que pode ser usada com a página HTML e dentro da diretiva div que tem ng-app.

  • O ng-bind então usa o modelo de nome a ser exibido na tag HTML <span> sempre que o usuário insere entrada na caixa de texto.

  • A tag de fechamento </div> indica o fim do aplicativo AngularJS.