angular js

32
#angularjs

Upload: hudson-augusto

Post on 03-Dec-2014

197 views

Category:

Documents


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Angular js

#angularjs

Page 2: Angular js

Vitor NogueiraDesenvolvedor Front-end - Jaws Digital

FATEC ItapetiningaSENAC Itapetininga

Page 3: Angular js

- Framework JavaScript para criação de Web Apps- Criado em 2010- Hoje é mantido pelo Google

O que é?

Page 4: Angular js

Two Way Data Binding

Page 5: Angular js

- É o processo que estabelece uma conexão entre a interface da aplicação e o lógica de negócio ¹

https://gist.github.com/diegoeis/1033b3f7a91cb8a337d8 [1]

Data Binding

Page 6: Angular js

- Vínculo entre dois componentes da sua aplicação- Ao alterar o valor de um componente, este valor é automaticamente alterado no outro

Two Way Data Binding

Page 7: Angular js
Page 8: Angular js
Page 9: Angular js

bit.ly/angularjs-1

bit.ly/angularjs-2

Page 10: Angular js

Module

Page 11: Angular js

- Local onde são “adicionadas” as diferentes partes do seu aplicativo: Controllers, Services, Filters, Directives

Module

Page 12: Angular js

bit.ly/angularjs-3

bit.ly/angularjs-4

Page 13: Angular js

Controller

Page 14: Angular js

- No Angular um controller é uma função JavaScript onde se manipula o escopo ($scope)

Controller

Page 15: Angular js

Não use um Controller para:- Manipular o DOM- Controlar entradas (ex.: validação de formulários)- Filtrar saídas

Controller

Page 16: Angular js

bit.ly/angularjs-2

Page 17: Angular js

Directives

Page 18: Angular js

- Estendem o codigo HTML, atribuindo funcionalidades aos componentes ¹- Diretivas são o lugar onde você irá manipular o DOM na sua aplicação ²

http://tableless.com.br/diretivas-angularjs-abas/ [1]

http://pedronauck.com/angularjs/sobre-diretivas-e-como-usar-

corretamente-plugins-jquery-com-angularjs [2]

Directives

Page 19: Angular js

- Permite a criação de componentes reutilizáveis

Directives

Page 20: Angular js

bit.ly/angularjs-5

Page 21: Angular js

Services

Page 22: Angular js

- Função ou objeto utilizado para compartilhar dados ou comportamentos entre controllers, filters, directives e outros serviços ¹

Services

http://lostechies.com/gabrielschenker/2014/02/26/angular-jspart-13-services [1]

Page 23: Angular js

- O Angular tem diferentes tipos de serviços ²

Services

http://pedronauck.com/angularjs/entendendo-os-tipos-de-servico-do-angularjs [2]

Page 24: Angular js

bit.ly/angularjs-4

Page 25: Angular js

Filters

Page 26: Angular js

- Usados para formatação dos dados exibidos para o usuário

Filters

Page 27: Angular js

bit.ly/angularjs-6

Page 28: Angular js

- Backbone JS- Ember JS- Knockout JS- Can JS

http://blog.codeschool.com/post/85819292538/angular-backbone-or-ember-which-is-

best-for-your

http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

Alternativas

Page 30: Angular js

- CRUD- Google Maps App

Exemplos

Page 32: Angular js

github.com/vitornogueira

facebook.com/vitornogueiraa

twitter.com/vitornogueiraa