Academia Web Apps - O Que É AngularJS

4/11/2016
O que AngularJS? - Academia Web Apps
O que AngularJS?
Postado por:Weliton em:novembro 13, 2015 Em:Desenvolvimento Sem comentrios
AngularJS classicado como umaframework, que foi desenvolvida pelo Google. A grande maioria dos
produtos que fazem parte deste grande guarda-chuva, que a marca da gigante da internet, acabam
chegando ao mercado com o objetivo bsico de conseguir facilitar determinados processos, tornando a vida
dos usurios mais simples. Esse recurso atua diretamente ligado ao HTML e na prtica funciona como uma
extenso de linguagem, o que o diferencia dos frameworks disponveis no mercado.
Ele acaba apresentando algumas diferenas importantes quando comparada com outras frameworks. Uma
delas o fato dele adotar uma abordagem mais ligada sintaxe HTML. Desta forma, de acordo com o prprio
time de desenvolvedores do Google, ele funciona como uma espcie de extenso da linguagem.
Atravs deste tipo de framework, os desenvolvedores podero comear a criar uma srie de aplicativos que
podero ser acessados diretamente a partir de um navegador de internet, o que acaba sendo diferente de um
aplicativo nativo, por exemplo. Desta forma, este framework acaba tendo um objetivo, que acaba sendo
basicamente o de facilitar tanto o desenvolvimento quanto o teste dos aplicativos.
Em termos de caractersticas tcnicas do AngularJS, podemos salientar que ele conta com uma srie de tags
especiais, que permite com que ele execute a diretiva na qual essa tag pertence. Da mesma forma, o programa
tambm acaba fazendo a ligao entre a apresentao e o seu modelo. O valor dessas
variveisJavaScriptpodem ser setadas manualmente, ou via um recursoJSONesttico ou dinmico.
Algo que acaba tambm diferenciando esta framework de outros sistemas parecidos o fato de que ele
consegue estender e adaptar a linguagem HTML convencional, aquela utilizada para a criao de simples sites
na web mas que pode ser utilizada, tambm, para criar uma srie de aplicativos permitindo que o
desenvolvedor oferea para os usurios uma experincia diferente quando o assunto a experincia com
contedo dinmico.
Resumidamente o AngularJS, framework desenvolvida pelo Google, pode ser muito interessante quando os
desenvolvedores esto diante de um projeto considerado com pginas HTML de alta complexidade.
Primeiros Passos com AngularJS Tutorial

Binding Bidirecional
O AngularJS tem uma caracterstica muito importante, com ele as alteraes feitas na sintaxe do HTML
comeam a funcionar em tempo real. As aplicaes feitas, comeam a valer por conta do conceito deBinding
Bidirecional, que faz com que as mudanas feitas em um lugar reitam em outras partes do arquivo. Esse
conceito importante por oferecer mais recursos aos usurios e deixar todo o processo mais fcil e mais
funcional.
Comeando a utilizar o AngularJS Verses disponveis

Em primeiro lugar, preciso fazer o download do AngularJS. H duas verses da ferramenta: a verso 1.3.x e
https://academiawebapps.com/o-que-e-angularjs/
a verso 1.4.x. O que diferencia essas duas verses o suporte que elas oferecem aos navegadores da
1/4
4/11/2016
Internet Explorer 7 e outros do mesmo tipo. De qualquer forma, o mais recomendvel a verso 1.4.X.
A insero de cdigos no AngularJS

O site da AngularJS fornece um cdigo que deve ser inserido na tag <head>. Entretanto, esse cdigo fornecido
pelo site da AngularJS pode ser modicado, De acordo com as necessidades e com a inteno da pessoa que
est utilizando a ferramenta.
A propriedade ng-app
Para utilizar o AngularJS, como se sabe, preciso ter uma pgina. Entretanto, quando se usa o AngularJS,
uma nova propriedade adicionada tag dessa pgina: a propriedadeng-app. Essa propriedade tem a funo
de dizer que est se usando o AngularJS e ela pode ser usada em todo e qualquer DOM. Entretanto, o HTML
no ser totalmente uma aplicao Angular; na verdade, apenas parte do HTML ser.
O AngularJS e o JavaScript
Apesar de o AngularJS estar muito associado ao JavaScript, h quem diga que seu foco o HTML. Em todo
caso, chegou-se o momento de utilizar os cdigos JavaScript. Os itens de cdigos desse tipo cam guardados
em uma parte especca: o escopo da aplicao.
Um exemplo de criao JavaScript: criao de um controller

O processo muito simples: para criar um controller, por exemplo, basta acrescentar o cdigo functions
ListaComprasController ($scope) {. Na linha seguinte: $scope.itens = [ . Na prxima linha coloca-se os produtos
da lista de compras e, ao nal, na ltima linha, coloca-se ].
Coisas novas para o HTML: ng-controller

Utilizando o AngularJS h algumas novidades quando o assunto HTML. Uma dessas novidades diz respeito
ao atributo chamadong-controller. A funo desse atributo dizer o controller JavaScript presente em um
bloco, por exemplo, a lista de compras citada acima.
Coisas novas para o HTML: no-repeat

Outra novidade do AngularJS ono-repeat, um atributo responsvel por fazer um loop na varivel chamada
itens, varivel essa que est presente no escopo. O atributono-repeatretorna e tambm imprime o produto e a
sua quantidade em uma tabela. O formato da tag para utilizar esse atributo <retorno> in <coleo>.
O uso do atributo ng-model

Com relao ao AngularJS, h mais dois atributos muito importantes e muito teis na hora de fazer uma
programao: ong-modele ong-click. O atributong-model utilizado para estabelecer o modelo usado nos
inputs. Dessa forma, o controller comea a receber, de forma direta, informaes a esse respeito.
O uso do atributo ng-click

J o atributong-click responsvel por funes que devem ser explicitadas no controller. No caso da lista de
2/4
compras citada anteriormente, ele faz com que os produtos sejam adicionados. Como possvel ver, utilizar o
4/11/2016
AngularJS muito fcil e oferece um grande leque de opes de funcionalidade.
As formas de se inicializar o AngularJS

H duas maneiras possveis de se iniciar o AngularJS: forma automtica ou forma manual. Caso a forma
escolhida seja a automtica, o processo o seguinte por parte do AngularJS: busca por diretiva ng-app;
designao da fonte; carregamento do mdulo relacionado diretiva; criao de injetor de aplicao e
compilao do DOM j com a fonte.
Todo esse processo torna claro que possvel solicitar ao AngularJS que aplique as mudanas feitas apenas a
uma parte especca do DOM. Um exemplo : <html ng-app=optionalModuleName >. No cdigo usado como
exemplo foi carregado o arquivo chamado Optional Module Name e as alteraes so feitas de modo
automtico.
Inicializao manual do AngularJS Quando usar?

Esse processo, por ser mais complexo, tem seu uso recomendado no caso da necessidade de fazer algo com
a pgina antes que o AngularJS a compile. Quando utilizada a forma manual de inicializao qualquer
alterao feita passa a valer apenas depois de toda a pgina carregada.
Os mdulos do Angular
Os mdulos so um agrupamento de itens em comum. Na prtica, os mdulos servem para juntar elementos
que trabalham juntos para alcanar determinado objetivo. Para ilustrar, h o exemplo de cdigo
aangular.module(mymodule.[]). Ele responsvel por fazer o registro do mdulo novo e tambm fazer a
retomada de objetos que o representam.
Alguns mdulos importantes para usar

Ao se falar dos mdulos do AngularJS vale a pena destacar trs mdulos especcos que facilitam muito a vida
do usurio. O primeiro mdulo o module.controller, que faz o registro de controllers novos. O segundo mdulo
o module.factory, responsvel por registrar fbricas novas de servio. J o terceiro mdulo o
module.directive, responsvel por registrar uma diretiva customizada.
Em que momentos possvel usar o AngularJS

O AngularJS uma ferramenta muito til para trabalhar com as aplicaes web. No importa o tipo de
ferramenta: ela pode ser corporativa ou ento um aplicativo do tipo hbrido feito para ser usado em um tablet
ou em um celular d tipo smatphone.
Recurso para mais movimentao

O AngularJS o recomendado quando o assunto trabalhar com mais agilidade. Ele, pelo seu sistema de
reexo de camadas, que faz com que as alteraes feitas em uma instncia sejam imediatamente aplicadas s
outras, faz com que qualquer trabalho feito com ele seja muito mais rpido, especialmente quando se trata de
um aplicativo HTML5.
3/4
4/11/2016
possvel usar o AngularJS em todos os sites?

Por mais que uma ferramenta seja boa e muito til nem sempre ela deve ser utilizada. No caso do AngularJS
no diferente. Essa ferramenta classicada como um recurso de trabalho. Dessa forma, ela deve ser usada
para isso. Entretanto, no por isso que se vai utilizar o AngularJS em todo e qualquer site que se crie:
preciso pensar nas necessidades da pgina nova que ser criada.
Como saber se o uso do AngularJS indicado?

Para descobrir se utilizar o AngularJS uma boa escolha, basta fazer a seguinte pergunta: o site que est
sendo criado vai utilizar o recurso Framework? Se a resposta for sim, o AngularJS muito bem-vindo. Caso a
resposta seja no, melhor deix-lo de lado e apostar em outras ferramentas.
Menu de Navegao
Quando se utiliza a ferramenta AngularJS possvel tanto denir quanto ler uma varivel que esteja ativa,
sendo que essa varivel recebe o nome demodelo. A varivel pode ser encontrada em todas as diretivas do
AngularJS, podendo ser acessada atravs dos controladores. importante dizer que o AngularJS
responsvel pela substituio de frameworks e tambm de algumas variveis do JavaScript.
O editor online e o AngularJS

Com a criao de um editor simples e online, pode-se utilizar os controladores responsveis pela inicializao
dos modelos. Esses controladores constituem funes do Java e se associam funong-controller. Sendo a
funo executada h a utilizao do $scope. A varivelng-model atualizada e depois disso, o valor de campo
mudado.
Outras utilizaes do AngularJS

Essa ferramenta tem um grande leque de possibilidades de uso. possvel utilizar o AngularJS para fazer a
incluso de rotas, AJAX e demais servios REST, views mltiplas alm da possibilidade de criar muitos
componentes personalizados de acordo com as necessidades de cada um.
As rotas e o AngularJS
O AngularJS pode ser usado para acrescentar uma pgina na sessong-viewe tambm para denir o
controller da pgina. Alguns termos devem ser explicados, a funcionalidade when responsvel por dizer o
momento em que uma rota inclusa nong-view.
Outro termo oHomeController. No momento da inicializao incluso o HTML e surgir oHomeController.
J o termo, diz respeito congurao relativa ao roteamento e seu signicado simples: o resolve e indica a
possibilidade de haver dependncia de um servio
4/4

Academia Web Apps - O Que É AngularJS

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Academia Web Apps - O Que É AngularJS

Încărcat de

Drepturi de autor:

Formate disponibile

4/11/2016

O que AngularJS? - Academia Web Apps

Primeiros Passos com AngularJS Tutorial

Comeando a utilizar o AngularJS Verses disponveis

O que AngularJS? - Academia Web Apps

A insero de cdigos no AngularJS

Um exemplo de criao JavaScript: criao de um controller

Coisas novas para o HTML: ng-controller

Coisas novas para o HTML: no-repeat

O uso do atributo ng-model

O uso do atributo ng-click

O que AngularJS? - Academia Web Apps

AngularJS muito fcil e oferece um grande leque de opes de funcionalidade.

As formas de se inicializar o AngularJS

Inicializao manual do AngularJS Quando usar?

Alguns mdulos importantes para usar

Em que momentos possvel usar o AngularJS

Recurso para mais movimentao

O que AngularJS? - Academia Web Apps

possvel usar o AngularJS em todos os sites?

Como saber se o uso do AngularJS indicado?

O editor online e o AngularJS

Outras utilizaes do AngularJS

S-ar putea să vă placă și