Slide 1

Slide 1 text

#angularjs

Slide 2

Slide 2 text

Vitor Nogueira Desenvolvedor Front-end - Jaws Digital FATEC Itapetininga SENAC Itapetininga

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Two Way Data Binding

Slide 5

Slide 5 text

- É 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

Slide 6

Slide 6 text

- 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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

bit.ly/angularjs-1 bit.ly/angularjs-2

Slide 10

Slide 10 text

Module

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

bit.ly/angularjs-3 bit.ly/angularjs-4

Slide 13

Slide 13 text

Controller

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

bit.ly/angularjs-2

Slide 17

Slide 17 text

Directives

Slide 18

Slide 18 text

- 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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

bit.ly/angularjs-5

Slide 21

Slide 21 text

Services

Slide 22

Slide 22 text

- 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]

Slide 23

Slide 23 text

- O Angular tem diferentes tipos de serviços ² Services http://pedronauck.com/angularjs/entendendo-os-tipos-de-servico-do-angularjs [2]

Slide 24

Slide 24 text

bit.ly/angularjs-4

Slide 25

Slide 25 text

Filters

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

bit.ly/angularjs-6

Slide 28

Slide 28 text

- 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

Slide 29

Slide 29 text

https://github.com/angular/angular.js/wiki/Projects-using-AngularJS https://builtwith.angularjs.org/ https://play.google.com/store/apps/details?id=com.clickbus.mobile http://ionicframework.com/ Cases

Slide 30

Slide 30 text

- CRUD - Google Maps App Exemplos

Slide 31

Slide 31 text

http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro http://www.angularcourse.com/#/ https://www.youtube.com/playlist? list=PLgMNBa0XaIgcD9IGiqvAQxPrUEyW_i87I https://www.facebook.com/groups/angularjsbrasil/ Referências e Materiais

Slide 32

Slide 32 text

github.com/vitornogueira facebook.com/vitornogueiraa twitter.com/vitornogueiraa