Aprenda a utilizar o Scope do AngularJS

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

2. Rodrigo Branas
rodrigo.branas@agilecode.com.br
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

3. Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
Certificações
SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM
Experiência
Há mais de 12 anos desenvolvendo software na
plataforma Java com as empresas: EDS, HP, NET,
Citibank, GM, Dígitro, Softplan, OnCast, Senai,
VALE, RBS, Unimed, Globalcode, V.Office, Suntech,
WPlex e Gennera.

4. O que realmente me motiva?
• 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.

5. $watch e $watchCollection

6. Por meio do $watch e $watchCollection é
possível se registrar para acompanhar as
modificações de uma determinada
propriedade do $scope.

8. $rootScope

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

10. 1. app.run();

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

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

13. 1. app.run(function($rootScope) {
2. $rootScope.usuario = {
3. nome: "Pedro da Silva",
4. email: "pedro.silva@agilecode.com.br"
5. };
6. });

14. Propagação de Eventos

15. Propagando eventos para os escopos filhos

17. 1. $scope.$broadcast("usuario", {
2. nome: "Pedro da Silva",
3. email: "pedro.silva@agilecode.com.br"
4. });

18. Propagando eventos para os escopos pais

20. 1. $scope.$emit("usuario", {
2. nome: "Pedro da Silva",
3. email: "pedro.silva@agilecode.com.br"
4. });

21. Ouvindo um determinado evento

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

23. Deixando de ouvir um determinado evento

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

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

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

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