Visão geral do AngularJS
Na Brat Tech LLC em 2009, os desenvolvedores Misko Hevery e Adam Abrons desenvolveram uma estrutura AngularJS, após a qual ocorreu uma revolução no desenvolvimento front-end e na criação de aplicativos de página única. AngularJS é uma estrutura javascript, que liga elementos Html a objetos javascript. A ligação de dados e a Injeção de Dependências são alguns dos principais recursos do AngularJs, que economizam tempo ao escrever códigos longos, facilitando o trabalho de desenvolvedores e navegadores. Como isso é alcançado será explicado mais detalhadamente, mas por enquanto você se lembra dessas terminologias. Neste tópico, vamos aprender sobre a versão do AngularJS.
Versões do AngularJS
AngularJS são as versões do Angular 1.x e, depois disso, o Angular 2 é desenvolvido, diferente do Angular 1.x. trabalho.
Por que versão do AngularJS e como isso funciona?
O AngularJS nos ajuda a desenvolver aplicativos interativos de página única. Por aplicativos de página única, quero dizer que a página única que você visitou carregará todo o outro conteúdo usando javascript. Esse recurso ajuda o aplicativo a ser rápido e eficaz.
Quando usamos javascript e html para criar aplicativos, você precisará vincular a visualização ao modelo usando funções e objetos JS. Mas se você acha que essa ligação de dados bidirecional em uma aplicação industrial prática, a mesma abordagem se torna tediosa com códigos longos. Essa é uma das principais razões pelas quais havia a necessidade de aprender e desenvolver o AngularJS.
Hora de aprender alguns conceitos básicos antes de começar a desenvolver aplicativos nos quais o AngularJS se baseia:
- Modelo: o modelo contém dados, objetos e lógica.
- Ver: É a apresentação visual do aplicativo, que também é chamada de interface do usuário.
- Visualizar no modelo Vinculação bidirecional: O objeto javascript, ou seja, o objeto que você deseja vincular a um DOM HTML, por exemplo, uma caixa de texto, entrada ou qualquer tag HTML e vice-versa, pode ser feito facilmente usando algumas bibliotecas AngularJS predefinidas.
- Controladores: controladores são funções javascript que conectam o modelo e a visualização.
- Serviços: os serviços AngularJS são funções javascript que executam tarefas ou funcionalidades específicas mantidas e testadas por javascript. Alguns exemplos de serviços são $ scope, $ http, $ rootScope.
- Expressões: Expressões são usadas para vincular dados com Html. Esse recurso também é conhecido como interpolação. Expressões são escritas com chaves ((expression)). As expressões são avaliadas e podem ser escritas sem tags html.
- Módulos: os módulos funcionam como um contêiner que contém diferentes partes do aplicativo angular, como controlador, serviços, diretivas etc.
Diretrizes e escopo
Vamos nos concentrar em algumas das diretrizes predefinidas e em como elas realmente funcionam. A maior parte desta diretiva começa com 'ng' retirado de Angular
1. Âmbito
- O escopo define o objeto javascript com o qual os dados podem ser acessíveis do Modelo para o HTML. O escopo funciona como um conector entre os dois.
- Alguns serviços de escopo são $ scope, $ rootScope. '$' define que esses serviços são predefinidos e não podem ser modificados. Lembre-se de que o HTML não diferencia maiúsculas de minúsculas, mas o AngularJS diferencia maiúsculas de minúsculas; portanto, $ Scope lançará um erro indefinido.
- É necessário declarar isso em nossa função de controlador e o angular o injetará automaticamente.
2. ng-controller
- Esta diretiva é usada para criar uma instância / objeto do controlador através do qual o HTML DOM se comunicará com a lógica real.
- O HTML diz que qualquer tag com '-' será ignorada ao criar o DOM HTML.
- Depois que o DOM é criado, o intérprete angular encontra uma diretiva ng-controller e cria uma instância do controlador específico que também fornece um serviço $ scope.
- Pode haver muitos controladores de ng em uma única página HTML.
3. ng-app
- Esta diretiva atua como um contêiner que contém controladores, diretivas, filtros, expressões etc. Ela registra ou inicia o aplicativo ou o módulo.
- Existe apenas um aplicativo ng no seu HTML. Sob um aplicativo ng, pode haver muitos controladores ng.
Isso instancia um objeto de aplicativo com o serviço $ rootScope.
- Assim, variáveis / funções $ rootScope estão acessíveis em um aplicativo completo.
4. modelo ng
- ng-model é usado para vincular os dados do html ao objeto de modelo. Ele fornece ligação bidirecional.
5. ng-se
- Para executar instruções condicionais em tags HTML, ng-if é usado. Se a condição for falsa, o DOM não incluirá essa div no DOM.
6. ng-bind
- Em vez de usar (()) para interpolação, o ng-bind também pode ser usado.
7. ng-desativado
- Com base em uma condição, um elemento na visualização pode ser desativado.
8. ng-show
- Se a condição especificada para o ng-show for verdadeira, o elemento específico será mostrado no DOM.
9. ng-hide
- Se a condição fornecida para ng-hide for verdadeira, o elemento em particular permanecerá oculto no DOM.
10. ng-repeat
- Ele repetirá a div ou extensão específica em Html com o comprimento da matriz ou lista fornecida.
11. ng-click
- No evento click no elemento html, ele executará a funcionalidade ou tarefa fornecida.
Dica: A melhor maneira de aprender qualquer idioma é codificá-lo. Então, vamos ver o nosso primeiro código.
Exemplos de versão do AngularJS
Aqui estão alguns dos exemplos dados abaixo
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Resultado:
Primeiro nome: Joseph
Sobrenome: Alex
Seu nome é: Joseph Alex
Há alguns pontos a serem focados no snippet de codificação acima:
- Na linha 3, um arquivo angular.min.js é adicionado à página que carregará todas as bibliotecas necessárias para executar o aplicativo AngularJS.
- O AngularJS possui principalmente 2 bibliotecas angular.js e uma versão compactada deste arquivo como angular.min.js.
- Na linha 5, você pode ver a diretiva como ng-app, que é ignorada pelo Html ao criar o DOM do HTML e adotada pelo AngularJS como uma de suas diretrizes para iniciar o aplicativo.
- Na linha 6, 7 ng-model é usado o que ligará o texto que você digitará na caixa de texto às variáveis fname e lname. Lembre-se de que essas variáveis diferenciam maiúsculas de minúsculas.
- Na linha 8, você vê a expressão ((fname + ”“ + lname)) que angular avaliará e exibirá os dados inseridos nas caixas de texto. Isso é conhecido como interpolação.
Vamos explorar por mais um exemplo:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Primeiro nome:
Último nome:
O nome do cliente é ((customerName)) e a idade é ((customerAge))
Neste exemplo, na linha 5, um aplicativo é criado com o nome CustomerApp, que incluirá todas as partes do aplicativo. Na linha seguinte, um controlador é criado e recebe o nome de firstController. $ scope é declarado como um parâmetro de função. O AngularJS injeta automaticamente no aplicativo para uso direto, o desenvolvedor não precisa criá-lo explicitamente.
Esse recurso é conhecido como injeção de dependência. De maneira semelhante, o ng-controller é usado para o mesmo controller na tag ng-app. Lembre-se de que o escopo do aplicativo ou controlador estará onde a div termina ou qualquer coisa em que você defina um aplicativo ou controlador. Nesse caso, você não pode acessar o controlador ou aplicativo após a linha 16.
Artigos recomendados
Este é um guia para o que é a versão do AngularJS. Aqui discutimos as versões do AngularJS com diretrizes, escopo e como o AngularJS funciona. Você também pode consultar os seguintes artigos para saber mais -
- Arquitetura AngularJS
- Aplicação JS angular
- Teste de unidade AngularJS
- Carreira no AngularJS
- O que é Angular 2?