Integre o AngularJS ao projeto e escreva o aplicativo hello world
Neste artigo, iniciaremos um programa Hello world com angularJS
Mục lục
Baixar AngularJS
Você vai até a página inicial do AngularJS, clica em DOWNLOAD ANGULARJS e baixa o framework:
Acesse: https://angularjs.org e baixe o framework AngularJS:
Executar configurações de ambiente (opcional)
Para começar com o Angular, é completamente possível colocar no diretório do seu projeto HTML e executá-lo, porém, se for usado com esta solução, ao usar o template em angular vai dar um erro, por isso é recomendado instalar o ambiente host local do servidor como XAMPP ou NodeJS como ambiente de tempo de execução. Você pode ver o artigo sobre como instalar o localhost usando o xampp
Comece a escrever o programa Helloworld
Como para começar com o angularJS, precisamos de uma combinação de modelo, exibição, controlador, juntamente com propriedades de estrutura, por esse motivo, antes de entender o problema, executamos este código-fonte de exemplo primeiro e, em seguida, saiba mais sobre o problema nos artigos a seguir.
Passo 1: Crie um diretório de projeto, inicialize o arquivo index.html e importe a biblioteca Angular da seguinte forma (com a forma abaixo eu uso CDN):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> </body> </html>Etapa 2: inicie a estrutura de código da seguinte maneira:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="toanngo92App"> <div ng-controller="toanngo92Controller"> <h1>Hello {{name}}</h1> <p>You are {{age}} years old, your score is {{score}}</p> <input type="text" ng-model="name"> </div> </div> <script> var app = angular.module('toanngo92App', []); app.controller('toanngo92Controller', function($scope) { $scope.name = 'Toanngo92'; $scope.age = 18; $scope.score = 9.5; }); </script> </body> </html>Resultados ao executar o código no navegador:
Analise o código que acabou de ser escrito em sequência:
- Integrar o framework Angular no projeto na linha 8
- Linha 11: <div ng-app="Toanngo92App"> Informa ao angular que o(s) elemento(s) fragment(tags) Angular pode entender e se comunicar através do atributo ng-app , o valor "toanngo92App" é o nome da aplicação, pode ser definido arbitrariamente. Ao usar o atributo na estrutura HTML, faz sentido que apenas os elementos da tag que contém o atributo para os elementos internos possam ser consultados pelo angular. Tome nota disso!
- Linha 19: inicialize o objeto angular através da função angular.module('toanngo92App',[]), sendo o primeiro parâmetro o nome da aplicação, o próximo parâmetro é o array vazio, que será mais mencionado nos próximos artigos. .
- Linha 20: chame o método do controlador , dentro são 2 parâmetros, o primeiro parâmetro é uma string que define o nome do controlador 'toanngo92Controller', o segundo parâmetro é uma função anônima com o parâmetro sendo uma variável interna ($scope), dentro desta função, defina 3 propriedades para $ nome da variável de escopo, idade, pontuação, este é o modelo
- Linhas 12 – 16: dentro da estrutura da tag ng-app, está uma estrutura da tag com o atributo ng-controller="toanngo92Controller", aqui temos o entendimento de que esta é a view retornada do controller chamado "tonngo92Controller" , os dados em o controlador passará pela view através da variável $scope .
Em seguida, vamos tentar inserir mais dados na caixa de entrada exibindo dados tonngo92, veremos que os dados na tag h1 após a palavra hello são atualizados de acordo com os dados inseridos sem escrever nenhuma linha adicional de código js, esses são os dados -binding e o poder do angularJS, com javascript puro ou Jquery, os passos sequenciais teriam que ser: pegar o evento onkeyup do usuário, pegar os dados da entrada em foco, depois atualizar na tag <h1>.
Aqui está um código de exemplo de um aplicativo de faturamento simples com angularJS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="calculateApp" ng-controller="calculateController"> <label>Quantity:</label> <input type="number" min="1" max="10" ng-model="qty" /> <label>Price</label> <input type="number" min="0" max="5000" ng-model="price" /> <div>Total: {{total | currency: '$ '}}</div> <button ng-click="calculate()">Calculate</button> </div> <script> var app = angular.module('calculateApp', []); app.controller('calculateController',function($scope){ $scope.qty = 0; $scope.price = 0; $scope.total = 0; $scope.calculate = function(){ this.total = this.qty * this.price; } }); </script> </body> </html>Resultado ao executar o teste no navegador:
No exemplo acima é uma combinação de alguns conceitos de angularJS incluindo:
- ng-app, ng-controller, ng-model, ng-click dentro da estrutura html são atributos de tag, reconhecidos e usados pelo angularJS, chamados de diretivas
- {{total | moeda: '$ '}} Este conceito é chamado de filtros padrão do angularJS (refiltrando o valor para o modelo quando exibido)
- $scope é uma variável interna do angularjs, usada para comunicar dados comuns entre o controlador e a visualização
- angular.module() , app.controller() , estes são os métodos embutidos na estrutura angularJS que serão abordados nos próximos artigos
Para este artigo, escreva seu primeiro programa helloworld, antes de mergulhar nos conceitos teóricos em artigos posteriores.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
