AngularJS - Configuração de ambiente

Este capítulo descreve como configurar a biblioteca AngularJS para ser usada no desenvolvimento de aplicativos da web. Também descreve resumidamente a estrutura do diretório e seu conteúdo.

Quando você abre o link https://angularjs.org/, você verá que há duas opções para baixar a biblioteca AngularJS -

View on GitHub - Ao clicar neste botão, você é desviado para o GitHub e obtém todos os scripts mais recentes.
Download AngularJS 1 - Ao clicar neste botão, uma tela você verá uma caixa de diálogo mostrada como -

Esta tela oferece várias opções de uso de Angular JS da seguinte forma -

Downloading and hosting files locally
- Existem duas opções diferentes: Legacy e Latest. Os próprios nomes são autodescritivos. O Legacy tem versão inferior a 1.2.x e o Latest vem com a versão 1.3.x.
- Também podemos escolher a versão minimizada, descompactada ou compactada.
CDN access- Você também tem acesso a um CDN. O CDN oferece acesso a data centers regionais. Nesse caso, o host do Google. O CDN transfere a responsabilidade de hospedar arquivos de seus próprios servidores para uma série de servidores externos. Também oferece a vantagem de que, se o visitante de sua página da web já tiver baixado uma cópia do AngularJS do mesmo CDN, não haverá necessidade de baixá-lo novamente.

Estamos usando as versões CDN da biblioteca em todo este tutorial.

Exemplo

Agora vamos escrever um exemplo simples usando a biblioteca AngularJS. Vamos criar um arquivo HTML myfirstexample.html mostrado a seguir -

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

Vamos examinar o código acima em detalhes -

Incluir AngularJS

Incluímos o arquivo AngularJS JavaScript na página HTML para que possamos usá-lo -

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

Você pode verificar a versão mais recente do AngularJS em seu site oficial.

Aponte para o aplicativo AngularJS

Em seguida, é necessário informar qual parte do HTML contém o aplicativo AngularJS. Você pode fazer isso adicionando o atributo ng-app ao elemento HTML raiz do aplicativo AngularJS. Você pode adicioná-lo ao elemento html ou ao elemento body como mostrado abaixo -

<body ng-app = "myapp">
</body>

Visão

A visão é esta parte -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller diz ao AngularJS qual controlador usar com esta visualização. helloTo.title diz ao AngularJS para escrever o valor do modelo denominado helloTo.title em HTML neste local.

Controlador

A parte do controlador é -

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

Este código registra uma função de controlador chamada HelloController no módulo angular chamado myapp . Estudaremos mais sobre módulos e controladores em seus respectivos capítulos. A função do controlador é registrada em angular por meio da chamada de função angular.module (...). Controller (...).

O modelo de parâmetro $ scope é passado para a função do controlador. A função do controlador adiciona um objeto helloTo JavaScript e, nesse objeto, adiciona um campo de título .

Execução

Salve o código acima como myfirstexample.html e abra-o em qualquer navegador. Você verá a seguinte saída -

Welcome AngularJS to the world of Tutorialspoint!

O que acontece quando a página é carregada no navegador? Vamos ver -

O documento HTML é carregado no navegador e avaliado por ele.
O arquivo JavaScript AngularJS é carregado, o objeto global angular é criado.
O JavaScript que registra as funções do controlador é executado.
Em seguida, o AngularJS varre o HTML para procurar aplicativos AngularJS, bem como visualizações.
Uma vez que a visualização é localizada, ele a conecta à função do controlador correspondente.
Em seguida, o AngularJS executa as funções do controlador.
Em seguida, ele renderiza as visualizações com dados do modelo preenchido pelo controlador. A página agora está pronta.