AngularJS
O novo Jquery?
Vou começar explicando quem
sou eu?
● Rube.... próximo slide...
Jquery
● Basicamente, jQuery é uma biblioteca
Javascript, que simplifica o Javascript para
atividades comuns no dia-a-dia do
desenvolvimento. Excelente para manipular
o DOM com muito menos código que o JS
puro.
Exemplo
● Selecionando o <div id="meudiv"></div>
● Javascript:
document.getElementByID('meudiv')
● jQuery: $('#meudiv')
AngularJs
● Já AngularJS é um framework, que trabalha
com dados, focando na interação usuário
<-> aplicativo. Tem os seguintes pontos
principais:
Data Binding de mão dupla. Exemplo:
● Você define um tipo de dados (chamado Model) e
quaisquer alterações nestes ocorrem em toda aplicação,
onde os mesmos aparecerem.
● Padrão de desenvolvimento [MVV].
Template engine integrada
● Ex.: Você recebe de um servidor um objeto JSON com
vários itens e os atribui à um Model chamado Pessoas no
Angular. Esse é o nosso objeto que atrelamos ao model
através de um controller do Angular:
pessoas = [
{nome: 'Romulo', sobrenome: 'Zoch', caracteristica: 'Lindo'},
{nome: 'João', sobrenome: 'Do caminhão', caracteristica: 'feio'}
]
Para listar todos os itens do objeto/model, você pode, por exemplo, fazer o seguinte:
<li ng-repeat="pessoa in pessoas" ng-model="pessoas">
{{pessoa.nome}} é {{pessoa.caracteristica}} e seu sobrenome é
{{pessoa.sobrenome}}
</li>
● Diretrivas customizadas (como componentes reutilizáveis, criação de 'html' personalizado).
● Você pode, por exemplo, criar um elemento <meubotao>texto</meubotao>, que irá renderizar
um snippet completo que você definir, "faz de conta":
● <button class="meubotao" rel="meubtn" onclick="funcaoPadrao()">texto</button>
● Pronto para trabalhar com API's REST (que, normalmente, entregam o conteúdo em JSON)
● Validação de Form Client-side
●
Comunicação com o servidor
●
Localization Ready (pronto p/ tradução multi-línguas)
●
Injeção de dependencias (não é bem uma feature, mas é uma diferença em relação ao
jQuery, que não tem isso)
●
TDD (Desenvolvimento direcionado à testes)
● Obs.: Vale lembrar que o próprio AngularJS
USA jQuery. Ele vem com uma versão Lite
do jQuery integrada. Você pode, inclusive,
usar jQuery dentro do Angular ( Embora
não seja indicado alterar o DOM via jQuery
dentro de uma aplicação Angular, pois isso
deve ser feito via diretivas customizadas).
Então viva ao Jqu... quer dizer AngularJs...

Breve explicação sobre o que é AngularJs

  • 1.
  • 2.
    Vou começar explicandoquem sou eu? ● Rube.... próximo slide...
  • 3.
    Jquery ● Basicamente, jQueryé uma biblioteca Javascript, que simplifica o Javascript para atividades comuns no dia-a-dia do desenvolvimento. Excelente para manipular o DOM com muito menos código que o JS puro.
  • 4.
    Exemplo ● Selecionando o<div id="meudiv"></div> ● Javascript: document.getElementByID('meudiv') ● jQuery: $('#meudiv')
  • 5.
    AngularJs ● Já AngularJSé um framework, que trabalha com dados, focando na interação usuário <-> aplicativo. Tem os seguintes pontos principais:
  • 6.
    Data Binding demão dupla. Exemplo: ● Você define um tipo de dados (chamado Model) e quaisquer alterações nestes ocorrem em toda aplicação, onde os mesmos aparecerem. ● Padrão de desenvolvimento [MVV]. Template engine integrada ● Ex.: Você recebe de um servidor um objeto JSON com vários itens e os atribui à um Model chamado Pessoas no Angular. Esse é o nosso objeto que atrelamos ao model através de um controller do Angular:
  • 7.
    pessoas = [ {nome:'Romulo', sobrenome: 'Zoch', caracteristica: 'Lindo'}, {nome: 'João', sobrenome: 'Do caminhão', caracteristica: 'feio'} ] Para listar todos os itens do objeto/model, você pode, por exemplo, fazer o seguinte: <li ng-repeat="pessoa in pessoas" ng-model="pessoas"> {{pessoa.nome}} é {{pessoa.caracteristica}} e seu sobrenome é {{pessoa.sobrenome}} </li>
  • 8.
    ● Diretrivas customizadas(como componentes reutilizáveis, criação de 'html' personalizado). ● Você pode, por exemplo, criar um elemento <meubotao>texto</meubotao>, que irá renderizar um snippet completo que você definir, "faz de conta": ● <button class="meubotao" rel="meubtn" onclick="funcaoPadrao()">texto</button> ● Pronto para trabalhar com API's REST (que, normalmente, entregam o conteúdo em JSON) ● Validação de Form Client-side ● Comunicação com o servidor ● Localization Ready (pronto p/ tradução multi-línguas) ● Injeção de dependencias (não é bem uma feature, mas é uma diferença em relação ao jQuery, que não tem isso) ● TDD (Desenvolvimento direcionado à testes)
  • 9.
    ● Obs.: Valelembrar que o próprio AngularJS USA jQuery. Ele vem com uma versão Lite do jQuery integrada. Você pode, inclusive, usar jQuery dentro do Angular ( Embora não seja indicado alterar o DOM via jQuery dentro de uma aplicação Angular, pois isso deve ser feito via diretivas customizadas).
  • 10.
    Então viva aoJqu... quer dizer AngularJs...