SlideShare uma empresa Scribd logo
1 de 10
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...

Mais conteúdo relacionado

Mais procurados

Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoJessyka Lage
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
Javascript aplicado
Javascript aplicadoJavascript aplicado
Javascript aplicadoNuno Simaria
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventosCentro Paula Souza
 
Minicurso javascript
Minicurso javascriptMinicurso javascript
Minicurso javascriptLucas Aquiles
 
Day to day vue or react (2)
Day to day  vue or react  (2)Day to day  vue or react  (2)
Day to day vue or react (2)Hebert Silva
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaTeles Maciel
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended BrasíliaIntrodução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended BrasíliaMarcus Paulo
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSRomulo Fagundes
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScriptThiago Poiani
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stackSidney Roberto
 

Mais procurados (20)

Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Javascript aplicado
Javascript aplicadoJavascript aplicado
Javascript aplicado
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos
 
Minicurso javascript
Minicurso javascriptMinicurso javascript
Minicurso javascript
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Day to day vue or react (2)
Day to day  vue or react  (2)Day to day  vue or react  (2)
Day to day vue or react (2)
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScript
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Mvc pattern
Mvc patternMvc pattern
Mvc pattern
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended BrasíliaIntrodução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stack
 
#2 JSON Overview
#2   JSON Overview #2   JSON Overview
#2 JSON Overview
 

Semelhante a AngularJS vs Jquery - O novo Jquery

Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsCloves Moreira Junior
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQueryTiago Butzke
 
Palestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDDPalestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDDhugodiasneto
 
J query apostila - noções básicas
J query   apostila - noções básicasJ query   apostila - noções básicas
J query apostila - noções básicasLuciano Marwell
 
JQuery - introdução ao
JQuery - introdução ao JQuery - introdução ao
JQuery - introdução ao Daniel Filho
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com JqueryDanilo Sousa
 
FEMUG MGA #6 - Abandonando o jQuery
FEMUG MGA #6  - Abandonando o jQueryFEMUG MGA #6  - Abandonando o jQuery
FEMUG MGA #6 - Abandonando o jQueryJulio Vedovatto
 
Dependency injection WTF? - PHPSC Conference 2012
Dependency injection WTF? - PHPSC Conference 2012Dependency injection WTF? - PHPSC Conference 2012
Dependency injection WTF? - PHPSC Conference 2012Luís Cobucci
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJSGDGFoz
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojofabioginzel
 
Mock objects - Teste de código com dependências
Mock objects - Teste de código com dependênciasMock objects - Teste de código com dependências
Mock objects - Teste de código com dependênciasDenis L Presciliano
 

Semelhante a AngularJS vs Jquery - O novo Jquery (20)

Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQuery
 
Visão Geral sobre Angular JS
Visão Geral sobre Angular JSVisão Geral sobre Angular JS
Visão Geral sobre Angular JS
 
Palestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDDPalestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDD
 
J query apostila - noções básicas
J query   apostila - noções básicasJ query   apostila - noções básicas
J query apostila - noções básicas
 
JQuery - introdução ao
JQuery - introdução ao JQuery - introdução ao
JQuery - introdução ao
 
J query basico
J query basicoJ query basico
J query basico
 
Angular 2
Angular 2Angular 2
Angular 2
 
Aula1
Aula1Aula1
Aula1
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
 
Angular js
Angular jsAngular js
Angular js
 
FEMUG MGA #6 - Abandonando o jQuery
FEMUG MGA #6  - Abandonando o jQueryFEMUG MGA #6  - Abandonando o jQuery
FEMUG MGA #6 - Abandonando o jQuery
 
Specflow - Criando uma ponte entre desenvolvedores.
Specflow - Criando uma ponte entre desenvolvedores.Specflow - Criando uma ponte entre desenvolvedores.
Specflow - Criando uma ponte entre desenvolvedores.
 
Dependency injection WTF? - PHPSC Conference 2012
Dependency injection WTF? - PHPSC Conference 2012Dependency injection WTF? - PHPSC Conference 2012
Dependency injection WTF? - PHPSC Conference 2012
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJS
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
Mock objects - Teste de código com dependências
Mock objects - Teste de código com dependênciasMock objects - Teste de código com dependências
Mock objects - Teste de código com dependências
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 

AngularJS vs Jquery - O novo Jquery

  • 2. Vou começar explicando quem 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 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:
  • 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.: 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).
  • 10. Então viva ao Jqu... quer dizer AngularJs...