AngularJS Olá Mundo: Seu Primeiro Programa de Exemplo
James Hartmann
⚡ Resumo Inteligente
Os programas "Hello World" do AngularJS precisam apenas de um único arquivo HTML, uma referência de script e duas diretivas, ng-app e ng-controller, para vincular uma variável de escopo de controlador à página por meio de uma expressão entre chaves duplas.
A melhor maneira de perceber o poder de uma aplicação AngularJS é criar seu primeiro programa básico, um aplicativo "Olá Mundo", em AngularJS.
Existem muitos ambientes de desenvolvimento integrados que você pode usar para AngularJS desenvolvimento, alguns dos mais populares são mencionados abaixo. Em nosso exemplo, estamos usando Webstorm como nosso IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
Olá mundo, AngularJS
Nota de versão: O AngularJS 1.x deixou de ter suporte de longo prazo em 31 de dezembro de 2021, e a equipe do framework confirma isso. O suporte ao AngularJS foi oficialmente encerrado. Em janeiro de 2022, com a versão 1.8.3 como lançamento final e sem patches de segurança posteriores. Cada etapa e bloco de código abaixo é preservado exatamente como foi escrito. Novos projetos pertencem ao Angular moderno, onde o mesmo exercício começa com ng serve e um componente independente e ainda usa o mesmo {{ }} sintaxe de interpolação.
O exemplo abaixo mostra a maneira mais fácil de criar sua primeira aplicação “Hello world” em AngularJS.
A captura de tela anotada abaixo identifica cada parte desse arquivo, e seus sete números correspondem ao Code Abaixo segue uma lista de explicações. A captura de tela foi feita em uma versão anterior, a 1.4.0, portanto, a linha de script difere da versão fixada no código.
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf 8"> <title>Guru99</title> </head> <body> <h1 ng-controller="HelloWorldCtrl">{{message}}</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script> angular.module("app", []).controller("HelloWorldCtrl", function($scope) { $scope.message="Hello World" } ) </script> </body> </html>
Code Explicação:
- O "aplicativo ngA palavra-chave “aplicação” é usada para indicar que esta aplicação deve ser considerada como uma aplicação AngularJS. Qualquer nome pode ser dado a esta aplicação.
- O controlador é o que contém a lógica de negócios. Na tag h1, queremos acessar o controlador, que terá a lógica para exibir “Olá Mundo”, então podemos dizer que, nesta tag, queremos acessar o controlador chamado “HelloWorldCtrl”.
- Estamos usando uma variável de membro chamada “message” que nada mais é do que um espaço reservado para exibir a mensagem “Hello World”.
- A tag “script” é usada para referenciar o script angular.js, que contém todas as funcionalidades necessárias para o AngularJS. Sem essa referência, qualquer função do AngularJS não funcionará.
- "Controller" é o local onde criamos nossa lógica de negócios, que é o nosso controlador. Os detalhes de cada palavra-chave serão explicados nos capítulos subsequentes. É importante observar que estamos definindo um método de controlador chamado 'HelloWorldCtrl', que é referenciado na Etapa 2.
- Estamos criando uma "função" que será chamada quando nosso código invocar este controlador. O objeto `$scope` é um objeto especial no AngularJS, sendo um objeto global usado em todo o AngularJS. O objeto `$scope` é usado para gerenciar os dados entre o controlador e a visualização.
- Estamos criando uma variável membro chamada "message", atribuindo a ela o valor "Hello World" e associando a variável membro ao objeto de escopo.
NOTA: A diretiva ng-controller é uma palavra-chave definida em AngularJS (Etapa 2) e é usado para definir controladores em sua aplicação. Aqui em nossa aplicação, usamos a palavra-chave ng-controller para definir um controlador chamado 'HelloWorldCtrl'. A lógica real para o controlador será criada na (Etapa 5).
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
A mensagem 'Olá Mundo' será exibida.
Como carregar o AngularJS: CDN ou arquivo local
O exemplo acima funciona porque uma única linha carrega o framework na página antes que o navegador chegue ao final do corpo. O AngularJS é distribuído como um único componente. JavaArquivo de script, portanto, um primeiro programa não precisa de etapa de compilação nem de gerenciador de pacotes. Um simples arquivo HTML aberto em um navegador é suficiente.
Existem duas maneiras de importar esse arquivo.
- Consulte uma cópia do CDN. O exemplo aponta para
code.angularjs.orge a versão 1.6.9 do Pins. Esse host ainda serve versões 1.x, sendo a mais recente a 1.8.2, enquanto Google A seção Bibliotecas Hospedadas não lista mais o AngularJS. - Baixe uma cópia local. Salve o arquivo ao lado da página HTML e aponte a tag de script para ele. Uma cópia local mantém o exemplo funcionando offline, o que é importante quando um proxy bloqueia a CDN.
<!-- Option 1: reference a CDN copy --> <script src="https://code.angularjs.org/1.8.2/angular.min.js"></script> <!-- Option 2: reference a downloaded copy in the same folder --> <script src="angular.min.js"></script>
Uso angular.js enquanto aprendia e angular.min.js Em produção: a versão não minificada imprime uma pilha legível. tracsim, enquanto a versão minificada reporta variáveis renomeadas.
Assim que o arquivo for carregado, ng-app Inicia o framework. O AngularJS procura esse atributo quando o documento termina de carregar, trata o elemento que o contém como a raiz de compilação e inicializa o módulo nomeado em seu valor. Três consequências se seguem:
- Apenas o primeiro
ng-appUma página é inicializada automaticamente. Uma segunda página é ignorada, a menos que...angular.bootstrapé chamada manualmente. - O valor deve nomear um módulo registrado com angular.module, caso contrário, o console reporta
[$injector:modulerr]. - Colocação
ng-appnahtmlO elemento, como no exemplo, integra todo o documento ao AngularJS; um contêiner mais estreito também funciona.
Como funcionam as expressões {{ }} e a vinculação do ng-model
As duplas braçadeiras ao redor message Os elementos da tag h1 não são espaços reservados preenchidos apenas no momento do carregamento. O AngularJS compila esse nó de texto em um observador do conteúdo ao redor. escopo, então a saída renderizada tracks $scope.message Enquanto a página existir.
O ciclo se executa em três etapas.
- O controlador grava um valor em
$scope. - Uma análise de resumo compara cada expressão observada com seu resultado anterior.
- Cada expressão cujo valor foi alterado é renderizada novamente no mesmo local.
Uma expressão interpolada é, portanto, unidirecional, do escopo para a visualização. A vinculação bidirecional precisa de modelo ng, Directivas Projetado para controles de formulário. Adicionar <input ng-model="message"> Ao lado do título, digite na caixa e o título mudará a cada tecla pressionada, porque o ng-model grava o valor do campo de volta na mesma propriedade de escopo que a expressão monitora.
As expressões são deliberadamente limitadas. Elas leem propriedades de escopo, chamam métodos de escopo e toleram valores indefinidos silenciosamente, mas não podem declarar variáveis, usar instruções de fluxo de controle ou acessar objetos globais como window.
Como corrigir uma página em branco ou um elemento não renderizado {{ }}
Um primeiro programa AngularJS falha de uma das duas maneiras visíveis: a página permanece em branco ou o texto literal é exibido. {{message}} aparece onde deveria estar "Hello World". Ambos os casos significam que o framework nunca assumiu o controle da marcação. Execute as verificações abaixo na ordem, com o console do navegador aberto.
- Confirme se a biblioteca foi carregada. Abra o painel de Rede e procure por
angular.jssolicitação. Um erro 404 ou uma CDN inacessível não altera os colchetes na tela. - Verifique o caminho do script. Um caminho relativo resolve para a pasta que contém o arquivo HTML, portanto, uma cópia em um
jssubpasta precisajs/angular.min.js. - Verificar ng-app. Um atributo ausente ou com erro ortográfico não significa nada para o Bootstrap. O atributo é hifenizado como
ng-appna marcação, mesmo que a diretiva esteja em camelCase em JavaRoteiro. - Leia o erro no console.
[$injector:modulerr]Significa que o módulo nomeado por ng-app nunca foi registrado.[ng:areq]geralmente significa que o nome do controlador na marcação não corresponde ao nome passado para.controller(). - Procure por um segundo ng-app. Apenas o primeiro é inicializado automaticamente (bootstrap), portanto, uma cópia perdida deixada em um elemento interno desativa silenciosamente essa parte da página.
Outras duas causas são responsáveis pela maioria dos relatos restantes.
- O protocolo de arquivo. Este exemplo de arquivo único funciona bem quando aberto diretamente do disco, mas qualquer modelo obtido via XHR é bloqueado pelas regras de origem do navegador. Sirva a pasta via HTTP assim que os modelos estiverem disponíveis.
- Um breve vislumbre do aparelho ortodôntico. Quando a marcação é renderizada antes da compilação pelo framework, a expressão bruta fica visível por um instante. Adicione
ng-cloakpara o elemento, ou troque a expressão porng-bind="message", que nunca exibe sua própria marcação.
Se nenhuma dessas opções se aplicar, reduza a página ao exemplo acima e adicione seu próprio código uma linha de cada vez.
