Toaz - Info Angularjs Mastery Code Like A Pro Guide PR

Machine Translated by Google
Domínio de AngularJS
Um guia Code-Like-a-Pro para iniciantes em AngularJS

ÿ Copyright 2016 Por Jonathan Bates - Todos os direitos

reservados
Este documento tem como objetivo fornecer informações exatas e confiáveis sobre o tema e assunto abordado. A publicação é
vendida com a ideia de que o editor não é obrigado a prestar serviços contábeis, oficialmente autorizados ou não, qualificados.
Se for necessário aconselhamento, jurídico ou profissional, deverá ser solicitado um indivíduo com experiência na profissão.
- De uma Declaração de Princípios que foi aceita e aprovada igualmente por um Comitê da American Bar Association e por um
Comitê de Editores e Associações.
De forma alguma é legal reproduzir, duplicar ou transmitir qualquer parte deste documento, seja por meio eletrônico ou em
formato impresso. A gravação desta publicação é estritamente proibida e qualquer armazenamento deste documento não é
permitido, a menos que haja permissão por escrito do editor. Todos os direitos reservados.
As informações aqui fornecidas são declaradas verdadeiras e consistentes, na medida em que qualquer responsabilidade, em
termos de desatenção ou de outra forma, por qualquer uso ou abuso de quaisquer políticas, processos ou instruções contidas
nele é de responsabilidade solitária e absoluta do leitor destinatário. Sob nenhuma circunstância qualquer responsabilidade legal
ou culpa será atribuída ao editor por qualquer reparação, danos ou perda monetária devido às informações aqui contidas, direta
ou indiretamente.
Os respectivos autores possuem todos os direitos autorais não pertencentes ao editor.
As informações aqui contidas são oferecidas apenas para fins informativos e, como tal, são universais. A apresentação das
informações é feita sem contrato ou qualquer tipo de garantia.
As marcas registradas usadas não têm qualquer consentimento e a publicação da marca registrada ocorre sem permissão ou
apoio do proprietário da marca registrada. Todas as marcas registradas e marcas contidas neste livro são apenas para fins de
esclarecimento e são de propriedade dos próprios proprietários, não afiliados a este documento.
Conteúdo
Introdução
Capítulo 1: O que exatamente é AngularJS?
Capítulo 2: Vantagens do AngularJS Capítulo 3:
Configurando seu ambiente de desenvolvimento Capítulo 4: O conceito
SPA Capítulo 5: O modelo MVC
Arquitetura MVC
O modelo
O controlador
Capítulo 6: Conceitos AngularJS
Recursos principais
Visualizações
Expressões
Módulos
Diretivas
A Diretiva do modelo ng
Ligação de dados
Visualização HTML
Vinculação bidirecional
Controladores
Escopos
Filtros
Serviços
JavaScript e XML assíncronos (AJAX) - $http
Métodos
Propriedades
JSON
Selecione
Eventos
Formulários
API Global
Inclui
Roteamento
Controladores
Modelos
Capítulo 7: Juntando tudo
Dicas para implementar AngularJS
Conclusão
Introdução
Quero agradecer e parabenizá-lo por baixar o livro “AngularJS Mastery: A Code-Like-a-Pro Guide for AngularJS
Beginners”. Este livro contém etapas e estratégias comprovadas sobre como criar aplicativos da Web poderosos
e dinâmicos usando essa popular estrutura JavaScript. Aprenda a teoria e os princípios por trás do AngularJS
enquanto acompanha este guia passo a passo fácil para o desenvolvimento de aplicativos da web.
Obrigado novamente por baixar este livro, espero que você goste!
Capítulo 1: O que exatamente é AngularJS?
Na constelação de frameworks JavaScript que estão agora disponíveis, AngularJS fornece um pacote de funções que permite aos
desenvolvedores projetar aplicações web rápidas e poderosas, capazes de lidar com grandes arquivos de dados. AngularJS é uma estrutura
de aplicativo da web de código aberto. AngularJS ajuda os desenvolvedores da web a criar lógica de programação para seus aplicativos na
página da web real e vincular o modelo de dados do aplicativo da web a bancos de dados e serviços de back-end. Essa interessante linguagem
de script de programa também permite que a lógica do design da UI seja expressa em um arquivo de modelo HTML. Isto é particularmente útil
para a apresentação de dados. AngularJS fornece uma estrutura útil para desenvolvimento web e agiliza todo o processo de design e teste de
aplicativos baseados na web. Ao aprender AngularJS, você será capaz de criar aplicações web interativas com código bem estruturado e
simples de atualizar e manter.
AngularJS é uma estrutura JavaScript para criação de aplicativos web dinâmicos. Ele expande os recursos de um modelo HTML,
permitindo que os designers transformem páginas da Web estáticas em aplicativos da Web totalmente interativos.
AngularJS usa os conceitos de vinculação de dados e injeção de dependência de maneiras que reduzem bastante a quantidade de código
que seria necessária com outras linguagens de programação web.
Isso é feito através da geração de novas estruturas HTML. Angular ajuda o navegador da web a interpretar a sintaxe original usando várias
diretivas, incluindo: Ligação de dados Estruturas de controle de objetos para replicar
elementos da
página da web.
Geração e validação de formulários de usuário.
Dando novos comportamentos aos elementos DOM.
Organizando e reutilizando componentes HTML.
Ao usar a estrutura JavaScript AngularJS, você será capaz de criar aplicativos da web poderosos e fáceis de manter. Os desenvolvedores
da Web usam o modelo Model View Controller (MVC) ao codificar em AngularJS. Essa linguagem de programação é popular entre os
desenvolvedores web, em parte porque o AngularJS funciona com JavaScript em qualquer navegador, e a biblioteca AngularJS é de código
aberto e totalmente gratuita.
Capítulo 2: Vantagens do AngularJS
Algumas vantagens do AngularJS incluem:
A capacidade de criar aplicativos de página única bem organizados.
A capacidade de vincular dados ao HTML.
Código testável.
Separação de responsabilidades dos componentes.
Componentes reutilizáveis.
Maior funcionalidade com código mais curto.
Compatibilidade com todos os principais navegadores e dispositivos móveis.
Desvantagens do AngularJS O
AngularJS não é seguro: como toda a estrutura consiste em JavaScript, os dados armazenados nos aplicativos AngularJS não são
seguros.
AngularJS não é degradável: Se o JavaScript estiver desabilitado no navegador do usuário, o aplicativo não funcionará.
Capítulo 3: Configurando Seu Desenvolvimento

Ambiente
Precisamos das seguintes ferramentas para configurar um ambiente de desenvolvimento para AngularJS:
Para trabalhar com este livro, você precisará configurar seu ambiente de desenvolvimento AngularJS.
Para isso você precisará de:
Editor de texto/IDE
Navegador
servidor web
Biblioteca Angular JS
Editor de texto/IDE
AngularJS é basicamente composto de HTML e JavaScript, portanto, qualquer editor de texto/IDE padrão serve. Você pode considerar um dos
seguintes programas gratuitos: Notepad++
Texto sublime
Estúdio Aptana 3
Ultraedição
Organizador de texto
Eclipse
Estúdio visual
*Você também pode usar editores online, como jsbin.com ou plnkr.com.
servidor web
Se você estiver desenvolvendo em seu computador local, poderá usar servidores web como Apache ou MS IIS.
Navegador da Web
Qualquer navegador importante, como Chrome, Firefox ou Safari, funcionará para essa finalidade e é compatível com vários navegadores
AngularJS. Apenas certifique-se de que o JavaScript esteja ativado.
Biblioteca Angular JS
Baixando AngularJS
Clique no link: https://angularjs.org/.
Existem três opções para baixar a biblioteca AngularJS: Visualizar no
GitHub - Ao clicar neste botão, você pode baixar e instalar a biblioteca para uso direto do seu servidor.
Baixe a versão 1
Baixe a versão 2
Se desejar fazer download de uma biblioteca, selecione Versão 1.
Usando a rede de distribuição de conteúdo

Como AngularJS é uma biblioteca JavaScript, a única coisa necessária para trabalhar com AngularJS em seu
ambiente é fornecer ao aplicativo acesso ao arquivo da biblioteca angular.js com uma tag <script> nos modelos HTML.
Isso pode ser feito usando a Content Delivery Network (CDN), que fornece uma URL para baixar a biblioteca de uma
fonte on-line, como o Google's
(<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js">
</script>). Se o aplicativo não conseguir se conectar à fonte, ele não funcionará. Outra forma de fornecer a biblioteca
angular.js é baixá-la diretamente de (http://angularjs.org) e forneça a biblioteca por meio de seu servidor web. Isso torna
o aplicativo mais lento, mas é mais confiável. Usaremos a biblioteca on-line CDN ao longo deste livro.
Inicializando AngularJS
Para usar AngularJS em sua aplicação web você deve incluir o seguinte Script. <script src="http://code.angularjs.org/
1.0.5/angular.js"> </script>. O navegador carrega e executa este arquivo ao mesmo tempo. Cada segmento de código
AngularJS em seu aplicativo funciona como uma função singular, e a última linha incluída no script executa essa função
específica. (function(window, document, undefined) {'use strict';......// Todo o código AngularJS da sua aplicação está
escrito aqui.})(window, document); //a última linha do seu código informa ao navegador para iniciar a função.
Cada função AngularJS requer um objeto para o local HTML específico em que o código está escrito. Quando o objeto
é identificado, o ouvinte de evento "DOMContentLoaded" do AngularJS envia um retorno de chamada para iniciar a
execução de todas as diretivas da função. Assim que o AngularJS recebe um retorno de chamada, indicando que o objeto
foi carregado, ele consulta a "diretiva ng-app" para saber quais elementos HTML serão afetados pela função. As instruções
são então executadas para essa função específica e ela começa a implementar as diretivas. AngularJS refere-se a todo
esse processo como “Inicialização Automática”.
Existem duas partes neste processo. A primeira parte envolve o uso da diretiva ng-app para definir o módulo do
aplicativo. Esta diretiva (normalmente carregada na tag <html>) sinaliza ao compilador para considerá-la a raiz. A segunda
parte é carregar a biblioteca angular.js com a tag <script> mencionada acima. A diretiva ng-app serve para garantir que
toda a página da web seja incluída; entretanto, você poderia adicioná-lo a outro elemento do contêiner, e apenas os
elementos dentro desse contêiner seriam incluídos na compilação do AngularJS e, consequentemente, na funcionalidade
do aplicativo AngularJS.
AngularJS inclui um compilador HTML que procura diretivas no modelo AngularJS e usa código de diretiva JavaScript
para criar elementos HTML estendidos. O compilador HTML permite ensinar ao navegador a nova sintaxe HTML. Também
permite atribuir comportamentos a quaisquer elementos ou atributos HTML. Na verdade, você pode até criar novos
elementos ou atributos HTML que tenham comportamentos exclusivos.
Essas extensões HTML são chamadas de diretivas. Angular tem muitas diretivas integradas que são úteis na construção
de qualquer aplicativo. Todas as diretivas são executadas pelo navegador da web, eliminando qualquer necessidade de
codificação no servidor.
Compilar: Pesquise o objeto HTML e colete todas as instruções (diretivas).
Link: Combine as diretivas com um escopo (dados) e produza uma visualização ao vivo para o usuário. Todas as alterações no modelo
de escopo são projetadas na visualização. Todas as alterações nas interações do usuário na visualização também são atualizadas no
modelo de escopo.
O compilador é carregado no navegador da web quando a biblioteca é inicializada. Depois de carregado, o compilador
examinará o HTML, vinculará qualquer código JavaScript de back-end aos elementos da página da web e renderizará a
visualização do cliente para o usuário do aplicativo. Como o compilador procura por diretivas assim que o script angular.js
é carregado, é uma prática recomendada incluir a biblioteca angular.js como uma das últimas tags no <body> do HTML,
o que ajuda a carregar a página da web. mais rapidamente.
_____________________________________________________________________________
Exemplo (Carregando a Biblioteca)_____________________________________________________
<!doctype html>
<html ng-app="myApp">
<body>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> <script
src="/lib/myApp.js"></script> </body>
</html>
______________________________________________________________________________
Capítulo 4: O Conceito SPA

Ao contrário dos aplicativos tradicionais de computador desktop, os aplicativos da Web são projetados para operar em uma variedade
de sistemas operacionais e dispositivos. Eles têm a vantagem de serem facilmente implantados e implementados em qualquer lugar com
conexão à Internet. A maioria dos aplicativos da web é construída usando estruturas compostas de JavaScript.
Um aplicativo de página única (SPA) é um aplicativo completo que funciona inteiramente em um navegador da web.
Como consistem em páginas da web únicas, o SPA não exige que as páginas sejam recarregadas durante uma sessão do cliente.
Recursos do SPA
As páginas da Web em SPAs são geradas dinamicamente. Isso permite apresentações e experiências personalizadas com base na
interação do usuário com o aplicativo. Os SPAs não estão restritos a caminhos lineares de URL a URL em um site. Eles funcionam no
modelo MVC (explicado posteriormente neste livro), que permite que um controlador determine a sequência de apresentações de páginas,
com base nas interações do usuário.
Todas as interações do usuário resultam na criação e carregamento de várias seções da página web.
Tudo isso é regulado por componentes AngularJS integrados que são especialmente projetados para executar partes separadas do
processo.
As páginas web geradas dinamicamente podem ser carregadas em momentos diferentes com conteúdo de diferentes servidores,
porque AngularJS usa AJAX (Asynchronous JavaScript and XML), um protocolo de programação web.
AngularJS está acima dos aplicativos da web que dependem do modelo de modelagem de servidor, usando seu servidor da web de
aplicativos para lidar com a alteração de dados e incorporá-los ao HTML. Quando interage com a página da web, uma operação HTTP
POST ou HTTP GET é executada no servidor da web, resultando em um novo HTML sendo passado para o navegador e renderizado para
o usuário.
Capítulo 5: O Modelo MVC
Modelo para representar o estado atual do seu aplicativo
Visualizar para exibir os dados

Controlador que controla a relação entre Modelos e Visualizações.
A estrutura AngularJS é baseada no modelo MVC (Model View Controller). Com essa estrutura, os desenvolvedores podem
criar aplicativos poderosos, altamente estruturados, relativamente fáceis de entender e simples de manter. O modelo MVC possui
três componentes: o Modelo (que é a fonte de dados), a Visualização (que é o que é visto na página web) e o Controlador (que
regula as interações entre o Modelo e a Visualização). O modelo MVC foi projetado para separar tarefas Java Script (JS), o que
ajuda a manter seu código JS organizado e compreensível.
Analisaremos mais de perto cada componente.
Arquitetura MVC
Um benefício do MVC é que ele separa a lógica da aplicação da interface do usuário e compartimenta as preocupações. O
controlador obtém solicitações do aplicativo e ajuda o modelo a preparar os dados necessários para a visualização. Assim, separa a
lógica de negócios, a lógica de apresentação e a lógica de navegação. A visão, por sua vez, utiliza os dados entregues pelo
controlador para renderizar uma apresentação do cliente. Abaixo está uma representação gráfica deste modelo.
O modelo
O modelo gerencia os dados do aplicativo respondendo às solicitações da visualização e do controlador para se atualizar.
A vista
Esta é uma apresentação renderizada de dados para o cliente/usuário. A visualização é ativada pelas instruções do controlador para
apresentar os dados. Muitos sistemas baseados em scripts, como JSP, ASP, PHP e relativamente simples de integrar com a
tecnologia AJAX (Asynchronous JavaScript and XML).
O controlador
O controlador opera em resposta à entrada do usuário. Ele recebe solicitações do usuário, constrói o objeto modelo e passa esse
objeto para a visualização.
Modelo
Um modelo em AngularJS pode ser uma string, um número, um booleano ou qualquer objeto JavaScript. O modelo existe dentro do
controlador.
Visualizar
A visualização é o que o cliente vê dentro de um elemento HTML. Com AngularJS, a visualização é um objeto no Document Object
Model (DOM) que exibe dados do controlador. AngularJS usa vinculação de dados bidirecional (discutida posteriormente neste livro),
em que a visualização é atualizada automaticamente quando há alterações no modelo. Você não precisa escrever um código especial
para lidar com esse processo; o controlador cuida disso automaticamente.
Controlador
O controlador é onde colocamos nossa lógica de aplicação. No AngularJS, um controlador é formado por classes javascript. Os
controladores nos permitem solicitar componentes para trabalhar. O modelo de dados é colocado dentro do controlador.
______________________________________________________________________________
Exemplo_(Criando o Controlador)__________________________________________________
Listagem 1: Criando o primeiro controlador
função ExemploCtrl($escopo) {
//código do controlador aqui
__________________________________________________________________________
Isso cria uma classe JavaScript que é nosso controlador. O argumento com o cifrão ($) é chamado de escopo e é necessário um para
cada controlador que criamos. O objetivo do escopo é unir o controlador e a visualização.
Criação de modelo
O modelo também é um objeto JavaScript regular que fica dentro do controlador. O modelo está disponível para a visualização, pois
está vinculado ao escopo do controle ($scope), conforme explicado anteriormente.
__________________________________________________________________________
Exemplo_________________________________________________________________
Criação de modelos.
função ExemploCtrl($escopo) {
//modelo chamado 'welcome' que é uma string
$scope.welcome = “Olá, estudantes AngularJS!”; var

usuários = [
{nome: “Micky”, ponto: 45 },
{nome: “Tim”, ponto: 85},
{nome: “Susy”, ponto: 55} ];
// modelo chamado 'students' que é um array de objetos
$scope.students = Students;
__________________________________________________________________________
No código acima, criamos nosso primeiro modelo chamado ‘welcome’ que é uma string e um modelo chamado ‘students’,
que é um array de objetos. Como queremos que os dados do modelo sejam sincronizados com a nossa visualização,
tornamos cada modelo uma propriedade de $scope.
Completando a View
Agora que configuramos nosso controlador e definimos os modelos, devemos criar uma view para exibir os dados
ao usuário. Como view é o Document Object Model (DOM), escrevemos a view como se estivéssemos escrevendo
HTML normal e adicionaremos uma expressão.
______________________________________________________________________________
Exemplo_(Criando uma Visualização)________________________________________________________
<!DOCTYPEhtml>
<html do aplicativo>
<cabeça>
<title>Bem-vindo ao AngularJS</title>
</head>
<corpo>
<div ng-controller=”ExampleCtrl”>
<h1>{{bem-vindo}}</h1>
<ol>
<li ng-repeat=”alunos em alunos”>{{student.name}} -

{{student.point}}</li>
</ol>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script> <script>

função
ExemploCtrl($scope) {
// modelo chamado 'welcome' que é uma string
$scope.welcome = “Olá, Angular é incrível!”;
var usuários = [
{nome: “Micky”, ponto: 45 },

{nome: “Tim”, ponto: 85},
{nome: “Suzy”, ponto: 55} ];
// modelo chamado 'student' que é um array de objetos

$scope.users = Students;
} </script>
</body>
</html>
__________________________________________________________________________
Agora temos nosso modelo MVC com nossos dados, apresentação do cliente e mecanismo para manter ambos
sincronizados automaticamente. Esta é a primeira etapa para concluir um aplicativo AngularJS funcional. A seguir,
aprenderemos os componentes básicos, suas finalidades, suas responsabilidades específicas e as formas como
interagem entre si. Examinaremos agora os componentes conceituais de uma aplicação AngularJS.
Capítulo 6: Conceitos AngularJS
O diagrama a seguir descreve os principais elementos do AngularJS que serão discutidos neste livro.
Recursos principais
Os principais recursos do AngularJS incluem:
Expressões: instruções JavaScript que informam ao aplicativo o que fazer.
Vinculação de dados: A sincronização automática de dados entre os componentes do modelo (backend) e da visualização (frontend).
Escopo: Objetos que mantêm a continuidade entre o controlador e a visualização.
Controlador: Funções JS vinculadas a um escopo específico.
Serviços: Objetos que são instanciados apenas uma vez por sessão.
Filtros: Função para selecionar subconjuntos de itens de arrays.
Diretivas: Marcadores em elementos Document Object Model (DOM) que podem ser usados para gerar tags HTML personalizadas.
Modelos: visualizações totalmente renderizadas contendo informações do controlador e do modelo.
Roteamento: O método usado para alternar visualizações.
Model View Controller (MVC): Este é um padrão de divisão de um aplicativo nos seguintes componentes: o Modelo, a
Visualização e o Controlador. Todos esses componentes têm responsabilidades específicas.
Deep Linking: o deep linking codifica o estado de um aplicativo na URL, para que ele possa ser restaurado para o mesmo
estado da URL em uma nova sessão.
Injeção de dependência: um subsistema integrado para ajudar no desenvolvimento e teste de aplicativos AngularJS.
Visualizações
No AngularJS, cada elemento HTML é representado por um objeto DOM (Document Object Model). O
o navegador lê as propriedades do objeto DOM e renderiza o elemento HTML na página.
Aplicativos da web dinâmicos normalmente utilizam JavaScript ou bibliotecas baseadas em JavaScript, como jQuery, para
apresentar objetos DOM em seu comportamento e aparência renderizados com base nas propriedades do DOM. O produto
final renderizado é chamado de visualização. O número de visualizações possíveis em uma única página da web é ilimitado.
Expressões
AngularJS inclui a capacidade de colocar expressões de dados dentro de elementos HTML. AngularJS avalia expressões
e projeta dinamicamente o resultado em uma visualização do cliente. Como as expressões estão vinculadas ao escopo, a
expressão pode utilizar valores no escopo. À medida que o modelo de dados muda, também mudam os valores da expressão.
As expressões podem ser colocadas entre colchetes duplos: {{ expressão }}. Eles também podem ser escritos dentro de uma
diretiva: ng-bind="expression". Depois que as expressões são executadas, o controlador envia os resultados para o local
HTML onde a expressão foi escrita. Assim como as expressões JavaScript, elas podem incluir literais, operadores e variáveis.
Exemplo_(Expressões)_____________________________________________________________
<!DOCTYPEhtml>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-
app>
<p>Exemplo de
expressão : {{10 - 8 }}</p>

</div>
</body>
</html>
Saída
Expressão de exemplo: 2
Expressões Angulares vs. Expressões JavaScript
Expressões angulares são como expressões JavaScript com as seguintes diferenças: Contexto: As
expressões JavaScript são interpretadas globalmente em todo o aplicativo. As expressões AngularJS são avaliadas dentro do
escopo de um objeto.
Tentar avaliar propriedades indefinidas em JavaScript resulta em “ReferenceError” ou “TypeError”.

A avaliação da expressão AngularJS simplesmente resulta em “indefinido” e “nulo”.
Sem instruções de fluxo de controle: AngularJS não possui estas expressões de programação comuns: “condicionais”, “loops”
ou “exceções”.
Nenhuma declaração de função: As funções não podem ser declaradas em expressões AngularJS, nem mesmo dentro da
diretiva ng-init.
Para código JavaScript mais complexo, você pode criar um método de controlador que é iniciado na visualização do cliente.
Módulos
Tudo em seu aplicativo AngularJS está contido em um módulo. Eles são usados para manter controladores e outros códigos relevantes sobre nosso
aplicativo. Colocar o código dentro de módulos diferentes protege o código de ser considerado de escopo “global”, dando a você mais controle sobre o
funcionamento do seu aplicativo. Um módulo representa componentes em um aplicativo. É um tipo de contêiner para os controladores de aplicativos. O
nome dado a um módulo ajuda você a referenciar escopos, diretivas e outros componentes do aplicativo. Módulos nomeados são muito úteis para
empacotar e reutilizar vários elementos de um aplicativo. A diretiva ng-app atribui cada página da web e visualização a um módulo específico.
Exemplo_(Módulos)______________________________________________________________ <div ng-
app="exampleApp">...</div> <script> var app

=
angular.module("myApp", []); </script>
Adicionando um controlador
Agora adicionaremos um controlador à nossa aplicação, referindo-nos ao controlador com a diretiva ng-
controller:
______________________________________________________________________________
Exemplo (Diretiva do Controlador)
<!DOCTYPEhtml>
<html>
app="exampleApp" ng- controlador="exemploCtrl">

{{ primeiro+ " " + último }}

</div>
<script>
var app = angular.module("exampleApp", []);
app.controller("exampleCtrl", function($scope)
{ $scope.firstName = "eBook";
$scope.last_name = "Leitor"; });
</
script> </
body>
</html>
Saída
leitor de ebook
Diretivas
As diretivas ajudam a dar vida aos aplicativos AngularJS. As diretivas são usadas para criar a sintaxe original e
cada uma começa com o prefixo ng- (que significa "Angular"). Uma diretiva é atribuída para dar a um elemento
DOM um comportamento especial. Por exemplo, “ng-repeat” repete um elemento específico e “ng-show” mostra
um elemento apenas sob certas condições. A ideia por trás das diretivas é simplesmente tornar seu HTML
verdadeiramente interativo, anexando ouvintes de eventos (objetos que iniciam ações em resposta a outras ações)
aos elementos e agindo no DOM atribuído. AngularJS inclui uma variedade de diretivas integradas úteis, mas
também é útil para criar diretivas personalizadas para suas necessidades individuais. Você também pode criar suas
próprias diretivas. A diretiva ng-app inicia um aplicativo AngularJS. A diretiva ng-init inicia os dados do aplicativo. A
diretiva ng-model sincroniza o valor dos controles de entrada do usuário com os dados do aplicativo.
Você pode criar diretivas personalizadas, porém é uma boa prática não usar o prefixo “ng”, devido a possíveis conflitos.
______________________________________________________________________________
Exemplo (Diretivas)_____________________________________________________________
<!DOCTYPEhtml>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body>
<div ng-app="exampleApp" Diretiva de exemplo></div>

<roteiro>
var app = angular.module("exampleApp", []);
app.directive("exampleDirective", function() {
return
{ template: "exemplo de construtor de diretiva"
}; }); </
script> </body>
</html>
Saída
Exemplo de construtor de diretiva
A diretiva ng-model Esta

diretiva sincroniza o valor dos controles HTML com os dados. A diretiva “ng-model” permite vincular um valor de
entrada a uma variável criada em seu aplicativo.
______________________________________________________________________________
Exemplo_(Diretrizes)_____________________________________________________________
<!DOCTYPEhtml>
<html>

<div ng-
app="myApp" ng- controlador="exampleCtrl"> Nome: <input
ng-model="nome">
</div>
<script>
var app = angular.module('exampleApp', []);
app.controller('exemploCtrl', function($escopo) {
$scope.name = "Leitor de e-
book"; });
</script> <p>Esta é a diretiva ng-model.</
p> </body>
</html>
Saída
Nome:
Esta é a diretiva do modelo ng

______________________________________________________________________________
AngularJS permite combinar modelos com diferentes diretivas, para que você possa combinar o HTML com o JavaScript para
exibições dinâmicas e exclusivas. Isso amplia muito os recursos do HTML. As directivas estão divididas em duas partes. A Parte 1
inclui: classes CSS, atributos adicionados e elementos que são adicionados ao HTML. A segunda parte inclui JavaScript, que
estende o comportamento do HTML.
Um recurso popular do AngularJS são as diretivas AngularJS integradas que lidam com a maior parte da manipulação do DOM
necessária para sincronizar o conteúdo do escopo com os elementos na visualização do cliente.
Você pode criar suas próprias diretivas personalizadas para adicionar funcionalidade ao seu aplicativo da web.
Ligação de dados
A vinculação de dados integrada é talvez o recurso mais popular do AngularJS. A vinculação de dados é a sincronização entre
a visualização e o modelo de dados. O processo de vinculação de dados une os dados do modelo (a coleção de dados disponíveis
para o aplicativo) com a visualização (elementos na página da web). Com AngularJS, os dados são vinculados em ambas as
direções. À medida que os dados são inseridos por meio da página da web, o modelo de dados de back-end é atualizado e, quando
os dados são modificados no modelo de back-end, a página da web é atualizada automaticamente. Desta forma, os dados atuais
do modelo são sempre representados com precisão para o usuário, tornando a visualização uma simples projeção do modelo.
______________________________________________________________________________
Exemplo_(vinculação de dados)__________________________________________________________

app.controller('exampleCtrl', function($scope)
{ $scope.firstname = "eBook";
$scope.last_name = "Leitor"; });
______________________________________________________________________________
Visualização HTML
O contêiner da página da web onde os objetos e dados do aplicativo são exibidos para o usuário é chamado de visualização. A
visualização está vinculada ao modelo por meio do processo de vinculação de dados. Uma maneira de exibir os dados do modelo
na visualização é usar a diretiva ng-bind.
______________________________________________________________________________
Exemplo_(Visualização HTML)__________________________________________________________
<!DOCTYPEhtml>
<html>

<p of-bind="sobrenome"></p>
</div>
<script>
$scope.last_name = "Leitor"; }); </
script>
<p>A diretiva ng-bind para sincronizar os elementos HTML com o modelo de dados.</p> </
body>
</html>
Saída A
diretiva ng-bind para sincronizar os elementos HTML com o modelo de dados.
Você também pode usar colchetes duplos {{ }} para exibir o conteúdo do modelo (por exemplo, nome: {{last_name}}).
Vinculação bidirecional
A vinculação de dados no AngularJS envolve reunir o modelo (dados) e a visualização (o que o usuário vê). Quando os
dados no modelo são alterados, a visualização reflete a alteração e, quando os dados na visualização são alterados, o modelo
também é atualizado. Isso acontece simultaneamente, mantendo o modelo e a visualização sempre sincronizados. A vinculação
de dados bidirecional é uma maneira de realizar essa sincronização. Qualquer mudança que aconteça no back-end acontece no
front-end e vice-versa. Esse processo permite que você obtenha alto desempenho em seu aplicativo da web com muito menos
esforço do que seria necessário em qualquer outra linguagem de programação ou codificação. Para fazer isso em jQuery, você
teria que codificar a lógica no modelo e na visualização.
No entanto, no AngularJS o $scope faz o trabalho para você.
______________________________________________________________________________
Exemplo_(vinculação bidirecional)______________________________________________________
<!DOCTYPEhtml>
<html>
Nome: <input ng-model="laststname">
<h1>{{last_name}}</h1>
</div>
<script>

script>
<p>Quando você altera o nome dentro do campo de entrada, os dados do modelo serão alterados automaticamente,
assim como o cabeçalho.</
p> </body>
</html>
Saída
Nome:
Leitor
Quando você altera o nome dentro do campo de entrada, os dados do modelo serão alterados automaticamente, assim
como o cabeçalho.
Controladores
Um Controller é um objeto que gerencia outros objetos no aplicativo. O controlador não conhece detalhes sobre o
objeto que controla, porém sabe como acessar o objeto, como obter informações sobre ele ou como passá-lo para a
visualização para exibição. Se sua aplicação tiver um objeto como aluno, ela também terá um alunoController. A estrutura
MVC é completada por meio de controladores. Esses controladores são usados para regular os dados e o fluxo de
aplicações AngularJS. Controladores são adicionados a elementos HTML por meio de diretivas implementadas como
objetos JavaScript, que contêm propriedades e funções.
Eles complementam o escopo da aplicação estabelecendo seu estado e dando-lhe comportamentos específicos. A diretiva
ng-controller é usada para definir o controlador AngularJS. O parâmetro $scope refere-se à aplicação ou módulo que será
tratado por um controlador específico. Como o modelo e a visualização estão sincronizados, um controlador pode ser
totalmente separado da visualização e simplesmente operar nos dados do modelo.
Devido à ligação de dados do AngularJS, a visualização sempre refletirá as alterações feitas no controlador.
______________________________________________________________________________
Exemplo (Controlador)_______________________________________________________________
<!DOCTYPEhtml>
<html>
app="exampleApp" ng- controller="exampleCtrl"> Nome: <input
type="text" ng-model="firstName"><br> Sobrenome: <input type="text"
ng-model="last_name"><br>
<br>
""
Nome completo: {{primeiroNome + + sobrenome}}
</div>
<script>
script> </
body>
</html>
Saída
Primeiro nome:
Sobrenome:
Nome Completo: Leitor de e-book
______________________________________________________________________________
A aplicação AngularJS é definida por ng-app="myApp". A aplicação é executada dentro do <div>. O atributo ng-
controller="exampleCtrl" é uma diretiva AngularJS. Ele define um controlador.
A função exampleCtrl é uma função JavaScript. AngularJS invocará o controlador com um objeto $scope. No AngularJS,
$scope é o objeto do aplicativo (o proprietário das variáveis e funções do aplicativo).
O controlador cria duas propriedades (variáveis) no escopo (firstName e last_name). As diretivas do modelo ng vinculam os
campos de entrada às propriedades do controlador (firstName e last_name).
Métodos de controlador
O exemplo acima demonstrou um objeto controlador com duas propriedades: last_name e firstName. Um controlador também
pode ter métodos (variáveis como funções):
______________________________________________________________________________
Exemplo_(Método do Controlador)______________________________________________________
<!DOCTYPEhtml>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<corpo>
<div ng-app="exampleApp" ng-controller="exampleCtrl">
Primeiro: <input type="text" ng-model="firstName"><br>
Último: <input type="text" ng-model="last_name"><br>

<br>
Nome Completo: {{nomecompleto()}}
</div>
<script>
$scope.last_name = "Leitor";
$scope.fullName = function() { return

""
$scope.firstName + + $escopo.último_nome;
}; }); </
script> </body>
</html>
Saída
Primeiro:
Durar:
Nome Completo: Leitor de e-book
______________________________________________________________________________
Escopos
O escopo sincroniza o HTML (visualização) e o JavaScript (controlador). Este é um objeto com propriedades e métodos acessíveis. É acessível tanto
para a visualização quanto para o controlador, que passa o objeto no $scope como argumento. Assim que seu aplicativo é iniciado, o AngularJS gera o
“$rootScope”. À medida que o escopo pesquisa o DOM, ele encontra e processa diretivas, algumas das quais (como “ng-controller”) solicitam novos
escopos. Assim que a compilação for concluída, o AngularJS terá produzido uma réplica da árvore de escopo da árvore DOM. Escopos separados
permitem que diferentes partes da visualização separem suas apresentações do modelo de dados.
______________________________________________________________________________
Exemplo_(Escopo)________________________________________________________________
<!DOCTYPEhtml>
<html>
<body>
<app-div="exampleApp" controller="exampleCtrl"> <h1>{{estado}}
</h1>
</div>
<script>
{ $scope.state = "Califórnia"; });
</
script> </
body>
</html>
Saída
Califórnia
___________________________________________________________________
Quando você adiciona propriedades ao $scope dentro do controlador, essas propriedades também são acessadas pela visualização.
Na visualização, você apenas se refere ao nome de uma propriedade, como {{state}} em vez de usar o prefixo $scope.
O escopo possui propriedades que são compartilhadas tanto com a visualização quanto com o controlador.
______________________________________________________________________________
Exemplo_(Propriedades do Escopo)_______________________________________________________
<!DOCTYPEhtml>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-

app="exampleApp"> <h1>{ {forma}}
</h1> <div ng-
controller="exampleCtrl"> <h1>{{forma}}
</h1>
</div>
<h1>{{shape}}</h1>
<script>
app.run(função($rootScope){
$rootScope.shape = 'círculo'; });
app.controller('exemploCtrl', function($escopo) {
$scope.shape = "quadrado"; });
</
script> </
body>
</html>
Saída
círculo
quadrado
círculo
______________________________________________________________________________
Filtros
Filtra dados de formato no aplicativo. AngularJS inclui vários filtros para transformar dados: arrays
orderBy Orders. moeda
Formata números para moeda.

data Formata datas.
filter Seleciona partes de um
array. number Formata números em
strings. JSON Formata objeto para strings
JSON. limitTo Limita strings ou arrays a números específicos.
lowercase Formata strings para minúsculas.
maiúscula Formata strings para letras maiúsculas.

Adicionando filtros a expressões
Filtros podem ser adicionados colocando um símbolo de “barra vertical” | na frente do filtro.
Neste exemplo, veremos um filtro para letras maiúsculas:

______________________________________________________________________________
Exemplo_(Filtros)________________________________________________________________
<!DOCTYPEhtml>
<html>

<div ng-
app="exampleApp" ng- controller="personCtrl"> <p>Seu apelido
é {{ last_name | maiúsculas }}</p>
</div>
<script>
angular.module('exampleApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "eBook",
$scope.last_name = "Leitor" });
</
script> </
body>
</html>
Saída
O apelido dele é LEITOR

______________________________________________________________________________
Adicionando filtros às diretivas
Filtros podem ser adicionados a diretivas, como ng-repeat, usando a barra vertical |, seguida por um filtro:
______________________________________________________________________________
Exemplo_(Adicionando Filtros às Diretivas)______________________________________________
<!DOCTYPEhtml>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div
ng-
controller="namesCtrl" ng- app="exampleApp" > <p>Loop com
objetos:</p>
<ul>
<li ng-repeat="x em nomes | orderBy:'state'">
{{ x.name + ', ' + x.state }}

</li>
</ul>
</div>
<script>
angular.module('exampleApp', []).controller('namesCtrl', function($scope) {

$ escopo.names = [
{nome:'Lisa',estado:'Illinois'},
{nome:'Carl',estado:'Marylad'},
{nome:'Susan',estado:'Texas'},
{nome:'Lisa',estado :'Geórgia'},
{nome:'Mick',estado:'Massachusettes'},
{nome:'Gary',estado:'Flórida'},
{nome:'Marcia',estado:'Louisiana'}, ];
});
</script>
</body>
</html>
Saída
Loop com objetos:
Gary, Flórida
Lisa, Geórgia
Lisa, Illinois
Márcia, Luisiana
Carl, Marylad
Mick, Massachusetts
Susana, Texas
______________________________________________________________________________
O Filtro “Filtro”
O filtro “filtro” é usado para analisar subseções de arrays.
______________________________________________________________________________
Exemplo_(Filtro Filtro)____________________________________________________________
Nomes de filtros contendo “e”:
<!DOCTYPEhtml>
<html>
app="exampleApp" ng- controller="nomesCtrl">

<ul>
<li ng-repeat="x em nomes | filtro: 'e'">
{{x}}
</li>
</ul>
</div>
<script>
angular.module('exampleApp', []).controller('namesCtrl', function($scope) {
$ escopo.names = [
'Pele',
'Carlo',
'John',
'Branco',
'João',
'Marco',
'Sara',
];
});
</script>
</body>
</html>
Saída
Pele
Joe
______________________________________________________________________________
Filtros personalizados
Ao registrar uma função chamada “fábrica de filtros” com seu módulo, você pode criar seus próprios filtros personalizados:
Neste exemplo, criaremos um filtro exclusivo que tornará todas as letras maiúsculas.
______________________________________________________________________________
Exemplo_(Filtro Personalizado)__________________________________________________________
Crie o filtro personalizado, "exampleFilter":
<!DOCTYPEhtml>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <ul ng-
app="exampleApp" ng- controller="namesCtrl"> <li ng-repeat="y
em nomes">
{{y | exemploFiltro}}
</li>
</ul>
<script>
app.filter('exemploFiltro', function() {
função de retorno (y)

{ var i, c, txt = "";
for (i = 0; i < y.comprimento; i++) {
c = x[eu];
if (i% 2 == 0) { c =
c.toUpperCase();
}
txt+= c;
}
retornar txt;
}; }); app.controller('namesCtrl', function($scope)
{ $scope.names = [
'Janeiro',
'Carlo',
'Maggie',
'Mesclado',
'João',
'Gary',
'Terraço',
'Marco',
];
});
</script>
</html>
Saída
Janeiro
CaRl
Magali
Mesclado
JoE
GaRy
TeRrAnCe
MaRc
______________________________________________________________________________
Serviços
AngularJS usa objetos individualizados chamados serviços para realizar tarefas especializadas. Filtros e
controladores dependem de serviços conforme a necessidade. Os serviços normalmente usam o mecanismo de
injeção de dependência. Existem muitos serviços integrados ao AngularJS, como $route, $location, $window, $http,
etc., cada um no controle de uma tarefa diferente. O serviço $http, por exemplo, contém tudo o que é necessário
para acessar e coletar dados de um servidor web e repassá-los ao serviço $route, que por sua vez os define.
Você também pode criar serviços personalizados e reutilizá-los em todo o seu código. Os serviços integrados são
fáceis de identificar no código, pois sempre começam com o cifrão ($).
______________________________________________________________________________
Exemplo_(Serviço)_______________________________________________________________
<!DOCTYPEhtml>
<html>
<corpo>
<div ng-controller="exampleCtrl" ng-app="exampleApp" >
<p>O endereço URL desta página é:</p>
<h3>{{exampleUrl}}</h3>
</div>
<roteiro>
app.controller('exampleCtrl', function($scope, $location)
{ $scope.exampleUrl = $location.absUrl();
});
</script>
</body>
</html>
Saída
O endereço url desta página é:

https://angularjs.org/
______________________________________________________________________________
O serviço $http O
serviço $http é um serviço comumente usado em AngularJS. Uma solicitação ao servidor é iniciada pelo serviço
e o aplicativo trata da resposta.
______________________________________________________________________________
Exemplo_($http Serviço)__________________________________________________________
Solicite dados do servidor usando o serviço $http:
<!DOCTYPEhtml>
<html>
app="exampleApp" ng- controller="exampleCtrl"> <h1>{{exampleBem-
vindo}}</h1>
</div>
<script>
app.controller('exampleCtrl', function($scope, $http)
{ $http.get("bem-vindo.htm").then(função (resposta)
{ $scope.exampleBem-vindo = resposta.dados; }); }) ;
</
script> </
body>
</html>
Saída
Bem-vindo ao AngularJS!
______________________________________________________________________________
JavaScript e XML assíncronos (AJAX) - $http Para obter acesso aos dados
em suas aplicações web, o cliente deve fazer solicitações a servidores remotos. Com JavaScript, elas são chamadas de solicitações AJAX. Usando
serviços $http, o AngularJS faz solicitações AJAX de dados de servidores remotos e retorna uma resposta ao aplicativo. AngularJS usa arquitetura de
serviços para apoiar o conceito de separação de interesses do AngularJS. É uma boa prática fazer chamadas AngularJS AJAX agrupando a solicitação
$http em uma fábrica e usando-a para servir dados. Isso ajuda a manter seu código mais organizado e separar as preocupações. Também permite pré-
processar os dados e usá-los em vários controladores.
As páginas da web padrão interagem com bancos de dados e servidores usando um formulário HTML para executar
scripts que GET e POST dados no servidor. O usuário clica em um botão para enviar/obter os dados, aguarda a resposta
do servidor e visualiza uma nova página de resultados que deve ser carregada no navegador. Esse processo pode ser lento,
principalmente ao lidar com arquivos grandes ou grandes quantidades de dados.
Ao utilizar AJAX, o JavaScript interage diretamente com o servidor, utilizando um objeto XMLHttpRequest.
Isso permite que uma página da web faça solicitações e obtenha respostas de servidores da web, sem que a página nunca
recarregando. O usuário clica em um botão que executa um script e os resultados são mostrados em um elemento HTML
identificado por um ID.
<div id=”ajaxResponse”></div>
______________________________________________________________________________
Exemplo_(AJAX- $http) __________________________________________________________
Faça uma solicitação ao servidor AJAX e exiba o resultado em um cabeçalho:
<!DOCTYPEhtml>
<html>
<p>Controlador div="exampleAppCtrl="exampleApp" "> <p>A mensagem
da escola é:</p> <h1>{{exampleSchools}}
</h1>
</div>
<p>A escola está fechada hoje por causa da chuva.</
p> <script>
var sdntService = angular.module('schoolService', [])
schoolService.factory('schoolDataOp', ['$http', function ($http) { var urlBase =
'http://localhost:2307/Service1.svc' ;
var schoolDataOp = {};
SchoolDataOp.getSchols=função(){
return $http.get(urlBase+'/GetSchools');
};
SchoolDataOp.addSchool = função (garanhão) {
return $http.post(urlBase + '/AddSchool', escolas);
};
retornar StudentDataOp; }]);
Saída
A mensagem da escola é:
{{exampleSchools}}
A Escola está fechada hoje por causa da chuva.
______________________________________________________________________________
Métodos
O exemplo acima usa o método .get do serviço $http.

O método .get é um método de atalho do serviço $http. Existem vários métodos de
atalho: .delete() .get() .head() .jsonp() .patch() .post() .put()

Os métodos acima são todos atalhos para chamar o serviço $http:
______________________________________________________________________________
Exemplo_(Método)_________________________________________________________________
<!DOCTYPEhtml>
<html>
<p>App div="exampleApp" controller="exampleCtrl"> <p>A

mensagem da escola é:</p>
<h1>{{exampleSchools}}</h1>
</div>
<p>A escola está fechada hoje por causa da chuva.</
p> <script>
var sdntService = angular.module('schoolService', [])

schoolService.factory('schoolDataOp', ['$http', function ($http) { var
urlBase = 'http://localhost:2307/Service1.svc' ;
var schoolDataOp = {};
SchoolDataOp.getSchols=função(){
return $http.get(urlBase+'/GetSchools');
};
SchoolDataOp.addSchool = função (garanhão) {

return $http.post(urlBase + '/AddSchool', escolas);
};
retornar StudentDataOp; }]);
Saída
A mensagem da escola
é: {{exampleSchools}}
A Escola está fechada hoje por causa da chuva.
______________________________________________________________________________
O exemplo acima mostra o serviço $http usando um objeto como argumento
Propriedades
A resposta do servidor é um objeto com estas propriedades: .config o
objeto utilizado para gerar a solicitação. .data uma
string ou um objeto que transporta a resposta do servidor. .headers uma
função a ser usada para obter informações de
cabeçalho. .status um número que define o
status HTTP. .statusText uma string que define o status HTTP.
______________________________________________________________________________
Exemplo (Propriedades)_______________________________________________________________
<!DOCTYPEhtml>
<html>

<div ng-
app="exampleApp" ng- ; controller="exampleCtrl"> <p>Dados:
{{data}</p> <p>Status:
{{status}}</p> <p>StatusText:
{{ext}}</p>
</div>
<script>
app.controller('exampleCtrl', function($scope, $http)
{ $http.get("welcome.htm") .then(function(response)
{ $scope.content = response.data;
$scope.statuscode = resposta.status; $scope.statustext = resposta.statusText; }); }); </script> </body>

</html>
Saída
Dados: Olá, alunos do AngularJS

Estado: 200
Texto de status: OK
______________________________________________________________________________
JSON
JSON (JavaScript Object Notation) é um formato para empacotar e armazenar dados. Uma vantagem deste formato é
que ele pode ser compreendido por leitores humanos.
Como um exemplo simples, as informações sobre mim podem ser escritas em JSON da seguinte forma:
_____________________________________________________________________________
Exemplo_(JSON - Objeto Único)__________________________________________________
var jason_Data = {
"idade": "30,
"cidade": "Chicago, IL"
"Nome": "João"
};
______________________________________________________________________________
Esta variável possui propriedades e valores contidos entre chaves. Esses valores podem ser acessados
chamando a variável e especificando a propriedade que queremos conhecer.
Uma única variável como essa pode incluir várias entradas adicionando mais chaves, colocando o objeto entre
colchetes e separando os objetos com vírgulas.
_____________________________________________________________________________
Exemplo_(JSON- Vários Objetos)________________________________________________
var jason_Data = [
{"Nome": "John"
"idade": "30,
"cidade": "Chicago,
IL", }, {
"nome": "Shelly",
"idade": "20",
"cidade": "Atlanta" }];
______________________________________________________________________________
JSON pode ser expresso em matrizes múltiplas e complexas sem comprometer sua simplicidade e legibilidade.
Os dados JSON podem ser armazenados em um servidor remoto e seguro ou em uma página do seu aplicativo da
web.
Selecione
AngularJS inclui listas suspensas baseadas no conteúdo de arrays ou em um objeto. Para criar uma lista suspensa,
com base em um objeto ou array em AngularJS, use a diretiva ng-options para criar uma caixa de seleção usando
ng-options.
______________________________________________________________________________
Exemplo_(Selecionar)________________________________________________________________
<html>

<div ng-
app="exampleApp" ng- controller="exampleCtrl"> <select ng-
model="selectedName" ng-options="x para x em nomes">
</selecionar>
</div>
<script>
{ $scope.names = ["James", "Irving", "Shelly"]; }); </
script> </
body>
</html>
Saída
______________________________________________________________________________
Eventos
As diretivas de eventos sinalizam ao aplicativo para responder às mudanças no ambiente. Algumas das alterações podem
ser iniciadas pelo usuário, outras podem ser funções automatizadas do programa. As diretivas a seguir podem ser
colocadas em seu HTML para escutar eventos aos quais seu aplicativo pode
responder.
ng-desfocar ng-mudar ng-clique
de cópia
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter ng-
mouseleave
movimento do mouse
ng-mouseover
do mouse
ng-paste
As diretivas de evento permitem chamar funções AngularJS em eventos de usuário específicos.
Se você tiver um evento AngularJS e um evento HTML, ambos os eventos ocorrerão.
Eventos de mouse
Um evento Mouse acontece quando o usuário move o cursor sobre um elemento HTML:
entrada do mouse
movimento do mouse
ng-mouseleave
ng-mouseover
do mouse
Ou quando o botão é clicado em um elemento:
ng-mousedown ng-
click
Eventos de mouse podem ser adicionados a qualquer elemento da página da web. Examinaremos a diretiva ng-click.
______________________________________________________________________________
Exemplo (evento de mouse)___________________________________________________________

<!DOCTYPEhtml>
<html>
controller="exampleCtrl ng-app ="exampleApp" "> <button ng-
click="count = count + 1">Clique em mim!</button> <p>{{ count }}</p>
</div>
<script>
{ $scope.count =
0; }); </
script> </body>
</html>
Saída
Embora não seja renderizado aqui, no seu navegador você verá um botão. Ao clicar no botão, o número abaixo dele
aumentará incrementalmente em 1.
______________________________________________________________________________
Formulários
Os formulários em AngularJS são usados para validação de controles de entrada e ajudam na vinculação de dados e.
Quando um objeto de formulário é encontrado pelo compilador AngularJS, o compilador usa a diretiva ngForm para criar
um controlador de formulário. O objeto controlador de formulário procura todos os elementos de entrada e cria os controles
para cada um. O que é necessário a seguir é um atributo de modelo de dados para estabelecer a ligação de dados
bidirecional, que fornecerá feedback instantâneo ao usuário por meio dos métodos de validação AngularJS.
Métodos de validação integrados
Existem 14 métodos de validação integrados no AngularJS. Esses métodos funcionam bem com elementos de entrada
HTML5 e são confiáveis em todos os principais navegadores da web.
Controles de entrada
Os controles de entrada são os elementos de entrada HTML: elementos
de entrada
selecione elementos
elementos de botão
elementos de área de texto
Os controles de
entrada de vinculação de dados usam a diretiva ng-model para vinculação de dados.
______________________________________________________________________________
Exemplo_(Formulário)________________________________________________________________
<!DOCTYPEhtml>
<html lang="pt">

<div ng-
app="exampleApp" ng- controlador="formCtrl">
<formulário novalidate>
Nome:<br> <input
type="text" ng-model="user.firstName"><br>
Sobrenome:<br>
<input type="text" ng-model="user.last_name">
<br><br>
<click button="reset()">RESET</button>
</form>
<p>formulário = {{usuário}}
</p> <p>mestre = {{mestre}}</p>
</div>
<script>
app.controller('formCtrl', function($scope)
{ $scope.master = {firstName:"eBook", last_name:"Reader"};
$scope.reset = function()
{ $scope.user = angular.copy ($escopo.master);
};
$scope.reset(); });
</
script> </
body>
</html>
Saída
Primeiro nome:
Sobrenome:
REINICIAR
form = {"firstName":"eBook","last_name":"Leitor"} master

= {"firstName":"eBook","last_name":"Leitor"}
______________________________________________________________________________
Explicação
“Novalidate” desativa a validação padrão do navegador. A diretiva, ng-app, define o aplicativo. O

A diretiva, ng-controller, define o controlador de aplicativo AngularJS. A diretiva, modelo ng, sincroniza
elementos de entrada do modelo. O controlador, formCtrl, define o método set() e fornece valores para
o objeto mestre . O método reset() torna os objetos usuário e mestre iguais. A diretiva, ng-click, chama o método reset() , se
o botão for clicado.
API Global
A API Global é uma coleção de funções JavaScript globais que executam tarefas, como:
Comparando objetos
Iterando objetos
Convertendo dados
A API Global é acessada usando o objeto angular.

Funções comuns da API:
API Descrição
angular.minúsculas() Converte uma string em minúscula
angular.maiúsculas() Converte uma string em maiúscula
angular.isString() Se a referência for uma string, retorna verdadeiro
angular.isNumber() Se a referência for um número, retorna verdadeiro

angular.minúsculas()
______________________________________________________________________________
Exemplo_(API – Minúsculas)_______________________________________________________
<!DOCTYPEhtml>
<html>

<div ng-
app="exampleApp" ng- ; controller="exampleCtrl"> <p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
{ $scope.x1 = "MIKE";
$scope.x2 = angular.lowercase($scope.x1); });
</
script> </
body>
</html>
Saída
MIKE
Mike
______________________________________________________________________________
Inclui
Com AngularJS Included, HTML externo pode ser incluído em sua página da web. Isso é feito usando a diretiva ng-include:
______________________________________________________________________________
Exemplo_(Inclui)______________________________________________________________
<!DOCTYPEhtml>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="">
<div ng-include
="'exampleFile.htm'"></div> </body>
</html>
Saída
Incluir este cabeçalho
______________________________________________________________________________
Roteamento O módulo ngRoute permite navegar para diferentes partes do seu aplicativo sem que a página precise ser
recarregada. Você pode usar o módulo ngRoute para rotear seu aplicativo para várias páginas dessa maneira. Para preparar
seus aplicativos para roteamento, você deve incluir o módulo Route: <script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> Você deve então incluir o
ngRoute como uma dependência no módulo do aplicativo: var app = angular.module("exampleApp",
["ngRoute"]); Isso permite que seu aplicativo acesse o módulo de
rota, usando “$routeProvider” para mapear várias rotas em seu aplicativo:
______________________________________________________________________________
Exemplo_(Rota)________________________________________________________________
app.config(function($routeProvider)
{ $routeProvider
.quando("/", {
templateUrl: "main.htm" }) .when("/
1", { templateUrl:
"file1.htm" }) .when("/2",
{ templateUrl:
"file2.htm" }) .when("/ 3",
{ templateUrl:
"arquivo3.htm" }); });
______________________________________________________________________________
Os aplicativos AngularJS requerem um contêiner (diretiva ng-view) para armazenar os dados que o roteamento fornece.
Aqui examinamos as maneiras de incluir este contêiner:
______________________________________________________________________________
Exemplo_(Contêiner_____________________________________________________________
<div de visualização></div>
<ng-view></ng-view>
<div class="ng-view"></div>
______________________________________________________________________________
AngularJS permite apenas uma diretiva ng-view por aplicativo. Este é o espaço reservado para todas as visualizações fornecidas
pela rota.
$routeProvider
Usando o $routeProvider, você pode delinear qual página exibir quando um determinado link for clicado.
______________________________________________________________________________
Exemplo_(Provedor de rota)_________________________________________________________
var app = angular.module("exampleApp", ["ngRoute"]);
app.config(function($routeProvider)
{ $routeProvider
.when("/",
{ templateUrl:
"main.htm" }) .when("/1",
{ templateUrl:
"file1.htm" }) .when("/2",
{ templateUrl: "file2.htm " }); });
______________________________________________________________________________
O $routeProvider é definido usando o método de configuração AngularJS. Os processos carregados no método de configuração
são executados à medida que o aplicativo é carregado.
Controladores
Usando “$routeProvider” você também pode atribuir um controlador para cada visualização do cliente.
_____________________________________________________________________________
Exemplo (adicionar controladores)________________________________________________________
app.config(function($routeProvider){
$routeProvider
.when("/",
{ templateUrl :
"main.htm" }) .when("/1", { templateUrl : "file1.htm",

controlador: "londonCtrl"
}) .when("/2",
{ templateUrl : "file2.htm",
controlador: "arquivo2Ctrl"
}); }); app.controller("arquivo1Ctrl", function ($scope)
{ $scope.msg = "Este é o
arquivo1"; }); app.controller("file2Ctrl", function ($scope)
{ $scope.msg = "Este é o
arquivo2"; });
______________________________________________________________________________
O "file1.htm" e o "file2.htm" são arquivos HTML padrão, aos quais você pode adicionar expressões da mesma forma que faria
com qualquer outra seção HTML do seu aplicativo.
Modelos
Você pode usar a propriedade template para codificar HTML diretamente em um valor de propriedade.
______________________________________________________________________________
Exemplo_(Modelo)_____________________________________________________________
Escreva modelos:
app.config(function($routeProvider){
$routeProvider
.when("/",
{ template : "<h1>Main</h1><p>Clique nos links para alterar este conteúdo</p>" }) .when("/
apple", {
template : "<h1>Maçã</h1><p>Maçãs são vermelhas.</
p>" }) .when("/orange", {
template : "<h1>Laranja</h1><p>Laranjas são laranja.</p>" }); });
______________________________________________________________________________
Capítulo 7: Juntando tudo
Agora construiremos um aplicativo AngularJS completo. Vamos criar uma lista simples de alunos onde podemos adicionar ou
remover indivíduos:
Minha lista de alunos

Michael
Trina
Jill
Adicione alunos aqui
Adicionar
Primeiros passos:
comece criando um aplicativo chamado studentList e adicione um controlador chamado exampleCtrl a ele.
O controlador adiciona um array chamado Students ao $scope atual.
No HTML, usamos a diretiva ng-repeat para exibir uma lista usando os alunos no array.
______________________________________________________________________________
Exemplo_(Lista de Alunos)___________________________________________________________
Neste ponto, fizemos uma lista HTML baseada nos alunos em um array:
<script>
var app = angular.module("exampleStudentList", []);
{ $scope.students = ["Michael", "Trina", "Jill"]; }); </
script>
<div of-app="exampleStudentList" of-controller="exampleCtrl">

<ul>
<li ng-repeat="x em alunos">{{x}}</li>

</ul>
</div>
______________________________________________________________________________
Adicionando Alunos:
Adicione um campo de texto ao HTML e vincule-o ao seu aplicativo usando a diretiva ng-model.
Crie uma função no controlador e nomeie-a como addStudent. Use addMe como o valor do campo de entrada e adicione um
item à matriz Students.
Adicione um botão que inclua a diretiva ng-click. Isso executará a função addStudent quando o usuário clicar no botão.
______________________________________________________________________________
Exemplo_(Adicionar Alunos)__________________________________________________________
Agora adicionaremos itens à nossa lista de alunos:
<script>
{ $scope.students = ["Michael", "Trina", "Jill"];
$scope.addStudent = function () {
$scope.students.push($scope.addMe);
} }); </script>

<ul>
<li ng-repeat="x em alunos">{{x}}</li>

</ul>
<input of-model="addMe"> <button
of-click="addStudent()">Adicionar</button>
</div>
______________________________________________________________________________
Removendo Alunos:
Precisamos ser capazes de remover alunos de nossa lista de alunos.
Faça uma função no controlador, chamada “removeStudent”. Isso aceitará o índice do aluno que você deseja remover como
parâmetro.
Crie um elemento <span> para cada aluno no HTML e forneça a eles uma diretiva ng-click que inicia a função removeStudent
com o $index atual.
_____________________________________________________________________________
Exemplo_(Remover Alunos)______________________________________________________
Agora podemos remover alunos da nossa lista de alunos:
<script>
$scope.addStudent = function () {
$scope.students.push($scope.addMe);
} $scope.removeStudent = function (x)
{ $scope.students.splice(x, 1);
} }); </script>

<ul>
<li ng-repeat="x em alunos"> {{x}}
<span
ng-click="removeStudent($index)">×
</li>
</ul>
<input of-model="addMe"> <button
of-click="addStudent()">Adicionar</button>
</div>
______________________________________________________________________________
Manipulação de erros:
O aplicativo apresenta alguns erros, como se você tentar adicionar o mesmo aluno duas vezes, o aplicativo trava.
Além disso, não deve ser permitido adicionar itens vazios.
Corrigiremos isso verificando o valor antes de adicionar novos alunos.
No HTML, adicionaremos um contêiner para mensagens de erro e escreveremos uma mensagem de erro quando alguém
tentar adicionar um aluno existente.
______________________________________________________________________________
Exemplo_(Tratamento de erros)_________________________________________________________
Nossa lista de alunos agora pode escrever mensagens de erro:
<script>
$scope.addStudent = function ()
{ $scope.errortext = ""; if
(!$scope.addMe) {return;} if
($scope.students.indexOf($scope.addMe) == -1)
{ $scope.students.push($scope.addMe); }
else
{ $scope .errortext = "O aluno já está na sua lista de alunos.";
} $scope.removeStudent = função (x) {
$scope.errortext = "";
$scope.alunos.splice(x, 1);
} }); </script>

<ul>
<li ng-repeat="x em alunos"> {{x}}
<span
ng-click="removeStudent($index)">×
</li>
</ul>
<model input="addMe">
<clickbutton="addStudent()">Adicionar</button>
<p>{{errortext}}</p>
</div>
______________________________________________________________________________
Design:
Nosso aplicativo agora está funcional, porém precisa de um design melhor. Se você não quiser gastar muito tempo projetando
CSS, acesse http://www.extractcss.com/, e selecione estilos que serão convertidos automaticamente em formato CSS para você.
Dicas para implementar AngularJS
AngularJS é considerado uma linguagem de script que simplifica a codificação e expande o leque de possibilidades para
interações do usuário baseadas na web. Apesar de seus muitos recursos integrados úteis, o AngularJS não é perfeito para todo
o desenvolvimento de aplicativos da web. Editores de jogos e GUI, por exemplo, exigem aplicativos com manipulações
avançadas de elementos DOM. Esses tipos de aplicativos são Geralmente, aplicativos de banco de dados CRUD (Criar,
Recuperar, Atualizar e Excluir) são os mais adequados para AngularJS. Nestes casos pode ser melhor utilizar uma biblioteca
online com menor nível de abstração, como JQuery.
Separe os scripts lógicos do aplicativo dos scripts de manipulação do DOM. Isso pode ajudar a tornar sua estrutura de
codificação mais adequada para testes.
É útil separar o lado do cliente do lado do servidor durante o desenvolvimento do aplicativo. Isso permite reutilizar ambos os
lados do código para outros projetos de desenvolvimento não relacionados.
Use estruturas para design de UI, modelagem lógica e testes de aplicativos para orientá-lo durante o processo de desenvolvimento
de aplicativos. Isso economizará muito tempo e energia; Não há necessidade de reinventar a roda.
Use bootstrapping para injetar automaticamente serviços e recursos on-line predefinidos em seu aplicativo. Isso ajuda você a
implementar recursos mais rapidamente. Isso também evitará que você tenha que escrever páginas de código de inicialização
em um esforço para fazer os recursos básicos funcionarem.

Toaz - Info Angularjs Mastery Code Like A Pro Guide PR

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Toaz - Info Angularjs Mastery Code Like A Pro Guide PR

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

Um guia Code-Like-a-Pro para iniciantes em AngularJS

ÿ Copyright 2016 Por Jonathan Bates - Todos os direitos

Os respectivos autores possuem todos os direitos autorais não pertencentes ao editor.

Capítulo 1: O que exatamente é AngularJS?

Capítulo 2: Vantagens do AngularJS Capítulo 3:

Configurando seu ambiente de desenvolvimento Capítulo 4: O conceito

SPA Capítulo 5: O modelo MVC

Capítulo 6: Conceitos AngularJS

JavaScript e XML assíncronos (AJAX) - $http

Capítulo 1: O que exatamente é AngularJS?

Geração e validação de formulários de usuário.

Dando novos comportamentos aos elementos DOM.

Organizando e reutilizando componentes HTML.

Capítulo 2: Vantagens do AngularJS

Algumas vantagens do AngularJS incluem:

A capacidade de criar aplicativos de página única bem organizados.

A capacidade de vincular dados ao HTML.

Separação de responsabilidades dos componentes.

Maior funcionalidade com código mais curto.

Compatibilidade com todos os principais navegadores e dispositivos móveis.

Capítulo 3: Configurando Seu Desenvolvimento

*Você também pode usar editores online, como jsbin.com ou plnkr.com.

Clique no link: https://angularjs.org/.

Existem três opções para baixar a biblioteca AngularJS: Visualizar no

Usando a rede de distribuição de conteúdo

Compilar: Pesquise o objeto HTML e colete todas as instruções (diretivas).

Exemplo (Carregando a Biblioteca)_____________________________________________________

Capítulo 4: O Conceito SPA

Capítulo 5: O Modelo MVC

Modelo para representar o estado atual do seu aplicativo

Visualizar para exibir os dados

Analisaremos mais de perto cada componente.

Listagem 1: Criando o primeiro controlador

//modelo chamado 'welcome' que é uma string

$scope.welcome = “Olá, estudantes AngularJS!”; var

{nome: “Micky”, ponto: 45 },

{nome: “Tim”, ponto: 85},

{nome: “Susy”, ponto: 55} ];

// modelo chamado 'students' que é um array de objetos

Exemplo_(Criando uma Visualização)________________________________________________________

<li ng-repeat=”alunos em alunos”>{{student.name}} -

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script> <script>

{nome: “Micky”, ponto: 45 },

// modelo chamado 'student' que é um array de objetos

Capítulo 6: Conceitos AngularJS

Os principais recursos do AngularJS incluem:

Expressões: instruções JavaScript que informam ao aplicativo o que fazer.

Escopo: Objetos que mantêm a continuidade entre o controlador e a visualização.

Controlador: Funções JS vinculadas a um escopo específico.

Filtros: Função para selecionar subconjuntos de itens de arrays.

Modelos: visualizações totalmente renderizadas contendo informações do controlador e do modelo.

Roteamento: O método usado para alternar visualizações.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-

expressão : {{10 - 8 }}</p>

Expressões Angulares vs. Expressões JavaScript

Tentar avaliar propriedades indefinidas em JavaScript resulta em “ReferenceError” ou “TypeError”.

Exemplo_(Módulos)______________________________________________________________ <div ng-

app="exampleApp">...</div> <script> var app

Exemplo (Diretiva do Controlador)

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-

app="exampleApp" ng- controlador="exemploCtrl">

{{ primeiro+ " " + último }}