AngularJS é uma estrutura para construir aplicativos da web de grande escala e alto desempenho, mantendo-os fáceis de manter. A seguir estão os recursos da estrutura AngularJS.

• AngularJS é uma poderosa estrutura de desenvolvimento baseada em JavaScript para criar RICH Internet Application (RIA).

• O AngularJS oferece aos desenvolvedores opções para escrever aplicativos do lado do cliente (usando JavaScript) de uma maneira MVC (Model View Controller) limpa.

• O aplicativo escrito em AngularJS é compatível com vários navegadores. O AngularJS lida automaticamente com o código JavaScript adequado para cada navegador.

• AngularJS é um software livre, totalmente gratuito e usado por milhares de desenvolvedores em todo o mundo. Ele é licenciado sob a Licença Apache versão 2.0.

A vinculação de dados é a sincronização automática de dados entre o modelo e os componentes de exibição. A diretiva ng-model é usada na vinculação de dados.

Escopos são objetos que se referem ao modelo. Eles agem como cola entre o controlador e a visualização.

Os controladores são funções JavaScript vinculadas a um escopo específico. Eles são os atores principais na estrutura do AngularJS e carregam funções para operar nos dados e decidir qual visualização deve ser atualizada para mostrar os dados baseados no modelo atualizado.

O AngularJS vem com vários serviços integrados. Por exemplo, $ https: serviço é usado para fazer XMLHttpRequests (chamadas Ajax). Os serviços são objetos singleton que são instanciados apenas uma vez no aplicativo.

Os filtros selecionam um subconjunto de itens de uma matriz e retornam uma nova matriz. Filtros são usados ​​para mostrar itens filtrados de uma lista de itens com base em critérios definidos.

As diretivas são marcadores em elementos DOM (como elementos, atributos, css e mais). Eles podem ser usados ​​para criar tags HTML personalizadas que servem como novos widgets personalizados. O AngularJS possui diretivas integradas (ng-bind, ng-model, etc) para realizar a maior parte das tarefas que os desenvolvedores devem realizar.

Os modelos são a visualização renderizada com informações do controlador e do modelo. Eles podem ser um único arquivo (como index.html) ou múltiplas visualizações em uma página usando "parciais".

É o conceito de troca de visualizações. O controlador baseado em AngularJS decide qual visualização renderizar com base na lógica de negócios.

O link direto permite codificar o estado do aplicativo na URL para que possa ser marcado. O aplicativo pode então ser restaurado do URL para o mesmo estado.

A seguir estão as vantagens do AngularJS.

• O AngularJS oferece a capacidade de criar aplicativos de página única de uma maneira muito limpa e sustentável.

• O AngularJS fornece capacidade de vinculação de dados para HTML, proporcionando ao usuário uma experiência rica e responsiva.

• O código AngularJS pode ser testado por unidade.

• AngularJS usa injeção de dependência e faz uso de separação de interesses.

• O AngularJS fornece componentes reutilizáveis.

• Com AngularJS, o desenvolvedor escreve menos código e obtém mais funcionalidade.

• No AngularJS, as visualizações são páginas html puras e os controladores escritos em JavaScript fazem o processamento do negócio.

• Os aplicativos AngularJS podem ser executados em todos os principais navegadores e smartphones, incluindo telefones / tablets baseados em Android e iOS.

A seguir estão as desvantagens do AngularJS.

• Not Secure- Por ser um framework somente JavaScript, os aplicativos escritos em AngularJS não são seguros. A autenticação e autorização do lado do servidor são necessárias para manter um aplicativo seguro.

• Not degradable - Se o usuário do seu aplicativo desabilitar o JavaScript, o usuário verá apenas a página básica e nada mais.

A seguir estão as três diretrizes principais do AngularJS.

• ng-app - Esta diretiva define e vincula um aplicativo AngularJS ao HTML.

• ng-model - Esta diretiva vincula os valores dos dados do aplicativo AngularJS aos controles de entrada HTML.

• ng-bind - Esta diretiva vincula os dados do aplicativo AngularJS a tags HTML.

Quando a página é carregada no navegador, acontecem as seguintes coisas:

• O documento HTML é carregado no navegador e avaliado por ele. O arquivo JavaScript AngularJS é carregado; o objeto global angular é criado. Em seguida, o JavaScript que registra as funções do controlador é executado.

• Em seguida, o AngularJS varre o HTML para procurar aplicativos e visualizações do AngularJS. Depois 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 fica pronta.

Model View Controller ou MVC, como é popularmente chamado, é um padrão de design de software para o desenvolvimento de aplicativos da web. Um padrão Model View Controller é composto das seguintes três partes:

• Model - É o nível mais baixo do padrão responsável por manter os dados.

• View - É responsável por exibir todos ou parte dos dados ao usuário.

• Controller - É um código de software que controla as interações entre o modelo e a vista.

A diretiva ng-app define e vincula um aplicativo AngularJS ao HTML. Ele também indica o início do aplicativo.

A diretiva ng-model vincula os valores dos dados do aplicativo AngularJS aos controles de entrada HTML. Ele cria uma variável de modelo que pode ser usada com a página html e dentro do controle de contêiner (por exemplo, div) tendo a diretiva ng-app.

A diretiva ng-bind liga os dados do aplicativo AngularJS a tags HTML. ng-bind atualiza o modelo criado pela diretiva ng-model para ser exibido na tag html sempre que o usuário inserir algo no controle ou atualiza os dados do controle html quando os dados do modelo são atualizados pelo controlador.

A diretiva ng-controller diz ao AngularJS qual controlador usar com esta visão. O aplicativo AngularJS depende principalmente de controladores para controlar o fluxo de dados no aplicativo. Um controlador é um objeto JavaScript que contém atributos / propriedades e funções. Cada controlador aceita $ scope como um parâmetro que se refere ao aplicativo / módulo que o controlador deve controlar.

AngularJS sendo uma biblioteca baseada em javaScript puro se integra facilmente com HTML.

Step 1 - Incluir libray javascript angularjs na página html

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

Step 2 - Aponte para o aplicativo AngularJS

Em seguida, informamos que parte do HTML contém o aplicativo AngularJS. Isso é feito adicionando o atributo ng-app ao elemento HTML raiz do aplicativo AngularJS. Você pode adicioná-lo ao elemento html ou ao elemento body conforme mostrado abaixo:

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

A diretiva ng-init inicializa os dados do aplicativo AngularJS. É usado para atribuir valores às variáveis ​​a serem usadas na aplicação.

A diretiva ng-repeat repete elementos html para cada item em uma coleção.

As expressões são usadas para vincular os dados do aplicativo ao html. As expressões são escritas entre colchetes como {{expression}}. As expressões se comportam da mesma maneira que as diretivas ng-bind. As expressões de aplicativo AngularJS são expressões JavaScript puras e geram os dados onde são usadas.

O filtro de maiúsculas converte um texto em texto em maiúsculas.

No exemplo a seguir, adicionamos filtro em maiúsculas a uma expressão usando a barra vertical. Aqui, adicionamos o filtro de maiúsculas para imprimir o nome do aluno em letras maiúsculas.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

O filtro de minúsculas converte um texto em texto em minúsculas.

No exemplo a seguir, adicionamos um filtro de minúsculas a uma expressão usando a barra vertical. Aqui, adicionamos um filtro de minúsculas para imprimir o nome do aluno em todas as letras minúsculas.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

O filtro de moeda formata o texto em um formato de moeda.

No exemplo a seguir, adicionamos o filtro de moeda a um número de retorno de expressão usando a barra vertical. Aqui, adicionamos o filtro de moeda para imprimir taxas usando o formato de moeda.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

filtro filtro é usado para filtrar a matriz para um subconjunto dela com base nos critérios fornecidos.

No exemplo abaixo, para exibir apenas assuntos obrigatórios, usamos subjectName como filtro.

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

O filtro orderby ordena a matriz com base nos critérios fornecidos.

No exemplo abaixo, para ordenar os assuntos por marcas, usamos as marcas orderBy.

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

A diretiva ng-disabled desativa um determinado controle.

No exemplo abaixo, adicionamos o atributo ng-disabled a um botão HTML e passamos a ele um modelo. Em seguida, anexamos o modelo a uma caixa de seleção e podemos ver a variação.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

A diretiva ng-show mostra um determinado controle.

No exemplo abaixo, adicionamos o atributo ng-show a um botão HTML e passamos a ele um modelo. Em seguida, anexamos o modelo a uma caixa de seleção e podemos ver a variação.

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

A diretiva ng-hide oculta um determinado controle.

No exemplo a seguir, adicionamos o atributo ng-hide a um botão HTML e passamos a ele um modelo. Em seguida, anexamos o modelo a uma caixa de seleção e podemos ver a variação.

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

A diretiva ng-click representa um evento de clique do AngularJS.

No exemplo abaixo, adicionamos o atributo ng-click a um botão HTML e adicionamos uma expressão para atualizar um modelo. Então podemos ver a variação.

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

angular.module é usado para criar módulos AngularJS junto com seus módulos dependentes. Considere o seguinte exemplo:

var mainApp = angular.module("mainApp", []);

Aqui, declaramos um aplicativo mainAppmódulo usando a função angular.module. Passamos um array vazio para ele. Este array geralmente contém módulos dependentes declarados anteriormente.

O AngularJS enriquece o preenchimento e validação de formulários. Podemos usar sinalizadores $ dirty e $ invalid para fazer as validações de maneira contínua. Use novalidate com uma declaração de formulário para desabilitar qualquer validação específica do navegador.

O seguinte pode ser usado para rastrear erros.

• $dirty - afirma que o valor foi alterado.

• $invalid - afirma que o valor inserido é inválido.

• $error - indica o erro exato.

Usando AngularJS, podemos embutir páginas HTML em uma página HTML usando a diretiva ng-include.

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

AngularJS fornece $ https: control que funciona como um serviço para fazer chamadas ajax para ler dados do servidor. O servidor faz uma chamada ao banco de dados para obter os registros desejados. O AngularJS precisa de dados no formato JSON. Assim que os dados estiverem prontos, $ https: pode ser usado para obter os dados do servidor da seguinte maneira:

function studentController($scope,$https:) {
   var url = "data.txt";
   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

$ routeProvider é o serviço principal que define a configuração de urls, mapeia-os com a página html ou ng-template correspondente e anexa um controlador com o mesmo.

Scope é um objeto JavaScript especial que desempenha a função de unir o controlador às visualizações. O escopo contém os dados do modelo. Nos controladores, os dados do modelo são acessados ​​por meio do objeto $ scope. $ rootScope é o pai de todas as variáveis ​​de escopo.

Os escopos são específicos dos controladores. Se definirmos controladores aninhados, então o controlador filho herdará o escopo de seu controlador pai.

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
	  
      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

A seguir estão os pontos importantes a serem considerados no exemplo acima.

• Definimos valores para modelos em shapeController.

• Substituímos a mensagem no controlador filho circleController. Quando "mensagem" é usada no módulo do controlador circleController, a mensagem substituída será usada.

Os serviços são funções JavaScript e são responsáveis ​​apenas por tarefas específicas. Cada serviço é responsável por uma tarefa específica, por exemplo, $ https: é usado para fazer uma chamada ajax para obter os dados do servidor. $ route é usado para definir as informações de roteamento e assim por diante. Os serviços integrados são sempre prefixados com o símbolo $.

Usando o método de serviço, definimos um serviço e atribuímos um método a ele. Também injetamos um serviço já disponível para ele.

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) { 
      return MathService.multiply(a,a); 
	}
});

Usando o método de fábrica, primeiro definimos uma fábrica e, em seguida, atribuímos um método a ela.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {     
   var factory = {};  
		
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
});

O método de fábrica é usado para definir uma fábrica que pode mais tarde ser usada para criar serviços como e quando necessário, enquanto o método de serviço é usado para criar um serviço cujo propósito é realizar alguma tarefa definida.

O AngularJS fornece um mecanismo de injeção de dependência supremo. Ele fornece os seguintes componentes principais que podem ser injetados uns nos outros como dependências.

• value
• factory
• service
• provider
• constant

provedor é usado pelo AngularJS internamente para criar serviços, fábrica, etc. durante a fase de configuração (fase durante a qual o AngularJS se autoinicializa). O script de menção abaixo pode ser usado para criar MathService que criamos anteriormente. Provider é um método de fábrica especial com um método get () que é usado para retornar o valor / serviço / fábrica.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
	
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
		
   });
});

constantes são usadas para passar valores na fase de configuração, considerando o fato de que o valor não pode ser usado para passar durante a fase de configuração.

mainApp.constant("configParam", "constant value");

Sim! No AngularJS, podemos criar uma diretiva personalizada para estender as funcionalidades existentes do AngularJS.

As diretivas personalizadas são usadas no AngularJS para estender a funcionalidade do HTML. As diretivas personalizadas são definidas usando a função "diretiva". Uma diretiva personalizada simplesmente substitui o elemento para o qual está ativada. O aplicativo AngularJS durante o bootstrap encontra os elementos correspondentes e faz uma atividade única usando seu método compile () da diretiva personalizada e, em seguida, processa o elemento usando o método link () da diretiva personalizada com base no escopo da diretiva.

AngularJS fornece suporte para criar diretivas personalizadas para os seguintes tipos de elementos.

• Element directives - A diretiva é ativada quando um elemento correspondente é encontrado.

• Attribute - A diretiva é ativada quando um atributo correspondente é encontrado.

• CSS - A diretiva é ativada quando um estilo css correspondente é encontrado.

• Comment - A diretiva é ativada quando um comentário correspondente é encontrado.

A internacionalização é uma forma de mostrar informações específicas do local em um site. Por exemplo, exiba o conteúdo de um site em inglês nos Estados Unidos e em dinamarquês na França.

AngularJS oferece suporte à internacionalização embutida para três tipos de filtros: moeda, data e números. Precisamos apenas incorporar os js correspondentes de acordo com a localidade do país. Por padrão, ele lida com a localidade do navegador. Por exemplo, para usar a localidade dinamarquesa, use o seguinte script

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>