Neste capítulo, discutiremos como configurar a biblioteca AngularJS para usar no desenvolvimento de aplicativos da web. Também examinaremos brevemente a estrutura do diretório e seu conteúdo.
Ao abrir o link https://angularjs.org/, você verá que existem duas opções para baixar a biblioteca AngularJS:
Download do Github - Clique neste botão para ir ao Github e obter os scripts mais recentes.
Download - ou clique neste botão e você verá:
Esta tela oferece várias opções para usar o ângulo JS da seguinte forma:
Baixar arquivos e localhost
Existem duas opções diferentes: antigas e mais recentes. O nome em si é a auto-explicação. A versão antiga já está menor que a versão 1.2.x e a mais recente é a versão 1.3.x.
Também podemos usar versões minificadas, não compactadas ou compactadas.
Acesso ao CDN: você também pode usar o CDN. O CDN dará acesso ao mundo, neste caso o Google hospeda data centers regionais. Isso significa usar a CDN com a responsabilidade do host móvel por arquivos de seu próprio servidor para uma variedade de fatores externos. Isso também fornece a vantagem de que, se o visitante, sua página baixou uma cópia do AngularJS da mesma CDN, ela não precisa ser baixada novamente.
Use a biblioteca da versão CDN neste tutorial.
exemplo
Agora vamos escrever um exemplo simples usando a biblioteca AngularJS. Crie um arquivo html myfirstexample.html da seguinte forma:
<! Doctype html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> </cript> </head> <body ng-- ng-- " ng-controller = "hellocontroller"> <h2> Bem-vindo {{helloto.title}} para o mundo de yiibai! $ scope.helloto.title = "angularjs"; </script> </body> </html>O capítulo a seguir descreve o código acima em detalhes:
Incluindo AngularJS
Já incluímos a página HTML no arquivo JavaScript de AngularJS, para que possamos usar o AngularJS:
<Head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </sCript> </ad Head>
Confira a versão mais recente do AngularJs em seu site oficial.
Apontar para aplicação angularjs
Em seguida, vamos me dizer que parte do HTML contém aplicativos AngularJS. Isso pode ser feito colocando o atributo NG-App no elemento HTML na raiz do aplicativo AngularJS. Pode ser adicionado a um elemento HTML ou elemento corporal da seguinte forma:
<corpo ng-app = "myApp"> </body>
visualizar
Visualizações para esta parte:
<div ng-controller = "hellocontroller"> <h2> Bem-vindo {{helloto.title}} para o mundo de yiibai! </h2> </div>NG Controller diz ao AngularJS o que são controladores e visualizações. heltoto.title diz a AngularJS para escrever o valor do "modelo" de html chamado helloto.title nessa posição.
Controlador
A parte do controlador é:
<Script> angular.module ("myApp", []) .Controller ("Hellocontroller", função ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = "angularjs";});Este código primeiro registra uma função chamada MyApp Angle Module Controller no Hellocontroller. Aprenderemos mais sobre módulos e controladores em seus respectivos capítulos. A função do controlador é registrada no ângulo via angular.Module (...). Controlador (...) chamada de função.
O modelo de parâmetro $ scope passou para a função do controlador. A função do controlador adiciona o objeto JavaScript do Helloto, que possui um campo de título adicionado a ele.
implementar
Salve o código acima como myfirstexample.htmlll Abra -o em qualquer navegador. Você verá a seguinte saída:
Quando a página é carregada no navegador, ocorre o seguinte evento:
Os documentos HTML são carregados no navegador e calculados pelo navegador. O arquivo JavaScript AngularJS é carregado e os objetos globais do ângulo são criados. Em seguida, uma função do controlador de registro no JavaScript é executada.
AngularJS digitaliza via HTML para encontrar aplicações e vistas do AngularJS. Depois que a visualização é encontrada, ela conecta a visualização à função do controlador correspondente.
Em seguida, o AngularJS executa a função de controle. Em seguida, ele renderiza uma visualização de dados com o modelo de controlador povoado. A página agora está pronta.