scope angularjs

27
Scope Rodrigo Branas @ rodrigobranas - http :// www.agilecode.com.br

Upload: rodrigo-branas

Post on 07-Jul-2015

422 views

Category:

Internet


0 download

DESCRIPTION

Aprenda a utilizar o Scope do AngularJS

TRANSCRIPT

Page 1: Scope AngularJS

Scope

Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br

Page 2: Scope AngularJS

Rodrigo [email protected]

http://www.agilecode.com.br

• Desenvolvendo Software na Gennera• Criando treinamentos na Agile Code• Escrevendo na Java Magazine e PacktPub• Palestrando sobre desenvolvimento de

software em eventos, universidades e empresas

Page 3: Scope AngularJS

Certificações

Formação Acadêmica

Ciências da Computação – UFSCGerenciamento de Projetos - FGV

SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM

Experiência

Há mais de 12 anos desenvolvendo software naplataforma Java com as empresas: EDS, HP, NET,Citibank, GM, Dígitro, Softplan, OnCast, Senai,VALE, RBS, Unimed, Globalcode, V.Office, Suntech,WPlex e Gennera.

Page 4: Scope AngularJS

• Há mais de 5 anos liderando pessoas.• Mais de 2000 horas em sala de aula.• Mais de 100 apresentações em eventos.• 6 artigos escritos para revistas.• 1 livro.• Mais de 500 profissionais treinados.• Criação de 22 palestras.• Criação de 10 treinamentos.• Criação de mais de 3.000 slides.

O que realmente me motiva?

Page 5: Scope AngularJS

$watch e $watchCollection

Page 6: Scope AngularJS

Por meio do $watch e $watchCollection é possível se registrar para acompanhar as

modificações de uma determinada propriedade do $scope.

Page 7: Scope AngularJS
Page 8: Scope AngularJS

$rootScope

Page 9: Scope AngularJS

Toda aplicação tem exatamente um root scope e todos os escopos filhos herdam as

suas propriedades.

Page 10: Scope AngularJS

1. app.run();

Page 11: Scope AngularJS

1. app.run(function() {2. });

Page 12: Scope AngularJS

1. app.run(function($rootScope) {2. });

Page 13: Scope AngularJS

1. app.run(function($rootScope) {2. $rootScope.usuario = {3. nome: "Pedro da Silva",4. email: "[email protected]"5. };6. });

Page 14: Scope AngularJS

Propagação de Eventos

Page 15: Scope AngularJS

Propagando eventos para os escopos filhos

Page 16: Scope AngularJS
Page 17: Scope AngularJS

1. $scope.$broadcast("usuario", {2. nome: "Pedro da Silva",3. email: "[email protected]"4. });

Page 18: Scope AngularJS

Propagando eventos para os escopos pais

Page 19: Scope AngularJS
Page 20: Scope AngularJS

1. $scope.$emit("usuario", {2. nome: "Pedro da Silva",3. email: "[email protected]"4. });

Page 21: Scope AngularJS

Ouvindo um determinado evento

Page 22: Scope AngularJS

1. $scope.$on("usuario", function (event, data) {2. $scope.usuario = data;3. });

Page 23: Scope AngularJS

Deixando de ouvir um determinado evento

Page 24: Scope AngularJS

1. $scope.$on("usuario", function (event, data) {2. $scope.usuario = data;3. });

Page 25: Scope AngularJS

1. $scope.$on("usuario", function (event, data) {2. $scope.usuario = data;3. });

Page 26: Scope AngularJS

1. var unsubscribe = $scope.$on("usuario", function (event, data) {2. $scope.usuario = data;3. });

Page 27: Scope AngularJS

1. var unsubscribe = $scope.$on("usuario", function (event, data) {2. $scope.usuario = data;3. });4. unsubscribe();