Modulos
Web Browser 
AngularJS ASP.NET 
Class Library 
Business 
App Index.html 
Module 
Directivies Routes 
Templates 
Views 
Con...
Modulos 
Definição 
AngularJs 
• Modulos 
C# 
• Projetos 
Java 
• Pacotes 
Vantagens 
Evitar conflitos globais 
Melhora en...
Modulos 
Implementação 
 Registrar 
var app = angular.module('modulo.principal', ['modulo.secundario', 'outro.modulo']), ...
Modulos 
Bons modos 
 Como tudo deve ser registrado em módulos, é perigoso que estes sejam declarados como 
variáveis glo...
Modulos 
Fases da aplicação 
A maioria das aplicações contem um método que 
instancia todas as partes do sistema antes de ...
Modulos 
Fases da aplicação 
Config 
Run 
app.config(function(testeProvider) { 
}); 
app.config(['testeProvider',function(...
Modulos 
Registros 
 Várias coisas podem ser registradas em módulos: 
(function () { 
var app = angular.module("app"); 
a...
Modulos 
Registros - values 
 São simples objetos que podem ser injetados em tempo de execução, ou seja, 
services e cont...
Modulos 
Registros - constants 
 Têm a mesma função dos values, mas só podem ser chamados em tempo de 
configuração 
app....
Modulos 
Registros - Providers 
Definição São services 
Apenas em 
fase de 
configuração 
Nome + 
“Provider” 
app.provider...
Modulos 
Ordem de execução 
<div ng-app="my.app" ng-controller="myCtrl"> 
<div test1 test2> </div> 
</div> 
var myApp = an...
Wesley A.Lemos 
Lages/SC - 2014
Próximos SlideShares
Carregando em…5
×

Angular Jumpstart 9 - Modulos

378 visualizações

Publicada em

Curso ministrado por mim na NDDigital sobre como iniciar uma aplicação AngularJS direcionada ao consumo de WebAPI, baseado neste fluxo:
https://www.examtime.com/pt-BR/p/1084807

::Table of Contents

1 - Introdução
http://pt.slideshare.net/anisanwesley/angular-jumpstart-1-introduo-38460785

2 - Arquitetura
http://pt.slideshare.net/anisanwesley/angular-jumpstart-2-arquitetura

3 - Controllers
http://pt.slideshare.net/anisanwesley/angular-jumpstart-3-controllers

4 - Diretivas nativas
http://pt.slideshare.net/anisanwesley/angular-jumpstart-4-diretivas-nativas

5 - Diretivas customizadas
http://pt.slideshare.net/anisanwesley/angular-jumpstart-5-diretivas-customizadas

6 - Filters
http://pt.slideshare.net/anisanwesley/angular-jumpstart-6-filters

7 - Validação
http://pt.slideshare.net/anisanwesley/angular-jumpstart-7-validao

8 - Services
http://pt.slideshare.net/anisanwesley/angular-jumpstart-8-services

9 - Modulos
http://pt.slideshare.net/anisanwesley/angular-jumpstart-9-modulos

10 - Requests
http://pt.slideshare.net/anisanwesley/angular-jumpstart-10-requests

11 - Roteamento
http://pt.slideshare.net/anisanwesley/angular-jumpstart-11-roteamento

Publicada em: Software
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
378
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
15
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • A maioria das aplicações contem um método que instancia todas as partes do sistema antes de começar a execução
    Javascript não tem isso, mas o Angular pode simular este comportamento dividindo o código em duas fases no mínimo, para cada módulo:
    Tempo de configuração
    Apenas providers e constants entram em ação
    Tempo de execução
    Controllers, values, services, filters, diretivas podem agir agora

    Essa divisão determina o que pode ser injetado em que
  • Config() é a ultima coisa que roda antes de inicializar
    Run() é a primeira coisa que roda após inicializar, já fazendo parte da fase de execução
  • São considerados services pela documentação do Angular, mas um pouco diferentes de service e factories
    Só podem ser injetados na fase de configuração da aplicação
    Precisam ser invocados com o sulfixo “Provider”
    Necessário sobreescrever o método $get
    São chamados no método .config() do módulo e seus usos incluem
    Configuração de rotas do site
    Definição de cabeçalhos para requests
    Qualquer configuração que deva ser feita antes de iniciar a aplicação
  • Angular Jumpstart 9 - Modulos

    1. 1. Modulos
    2. 2. Web Browser AngularJS ASP.NET Class Library Business App Index.html Module Directivies Routes Templates Views Controller ViewModel Services Factories Repository BreezeJS $resource $http WebAPI ApiController Services
    3. 3. Modulos Definição AngularJs • Modulos C# • Projetos Java • Pacotes Vantagens Evitar conflitos globais Melhora entendimento e organização do código Mais fácil encontrar erros Praticidade na integração Cada modulo pode ter seus próprios controllers, services, com terceiros providers, filtros e diretivas
    4. 4. Modulos Implementação  Registrar var app = angular.module('modulo.principal', ['modulo.secundario', 'outro.modulo']), app2 = angular.module('modulo.independente', []);  Recuperar var app = angular.module('modulo.principal'); Nome de módulos “lower.case” separados por pontos. Ex: “controllers.module”
    5. 5. Modulos Bons modos  Como tudo deve ser registrado em módulos, é perigoso que estes sejam declarados como variáveis globais var app = angular.module('core.module',[]); delete app;  Por isso é indicado utilizar o padrão IIFE (Immediately-Invoked Function Expression) para fazer qualquer ação que envolva modulos (function () { //set modulo angular.module("core.module", []); })(); (function () { //get modulo var app = angular.module("core.module"); app.controller('...'); } )();
    6. 6. Modulos Fases da aplicação A maioria das aplicações contem um método que instancia todas as partes do sistema antes de começar a execução Javascript não tem isso, mas o Angular pode simular este comportamento dividindo o código em duas fases no mínimo, para cada módulo: Tempo de configuração Apenas providers e constants entram em ação Tempo de execução Controllers, values, services, filters, diretivas podem agir agora
    7. 7. Modulos Fases da aplicação Config Run app.config(function(testeProvider) { }); app.config(['testeProvider',function(testeProvider) { }]); function configFunction(testeProvider) { } configFunction.$inject = ['testeProvider']; app.config(configFunction); Config() é a ultima coisa que roda antes de inicializar Run() é a primeira coisa que roda após inicializar, já fazendo parte da fase de execução
    8. 8. Modulos Registros  Várias coisas podem ser registradas em módulos: (function () { var app = angular.module("app"); app.constant('const', { }); app.value('val', { }); app.controller('ctrl', function () { }); app.service('serv', function () { }); app.factory('fact', function () { }); app.provider('prov', function () { }); })();
    9. 9. Modulos Registros - values  São simples objetos que podem ser injetados em tempo de execução, ou seja, services e controllers e factories. app.value('USER_METADATA', { role: 'admin', }); app.controller('controller', function (USER_METADATA) { }); Nome de values e constants em “UPPER_CASE” com underline. Ex: “APP_ROUTES”
    10. 10. Modulos Registros - constants  Têm a mesma função dos values, mas só podem ser chamados em tempo de configuração app.constant('HTTP_HEADER', { Accept: "text/javascript", 'Content-Type': "text/javascript", Authorization: "Basic hGdi8Jsk03rpdlMjJ9390ksGWQ0" }); app.provider('prov', function (HTTP_HEADER, $httpProvider) { this.$get = function() { return $httpProvider.default.headers.get=HTTP_HEADER; }; });
    11. 11. Modulos Registros - Providers Definição São services Apenas em fase de configuração Nome + “Provider” app.provider('nome', function (){this.$get=function (){}}); configFunction.$inject = ['nomeProvider']; $get() Usos Roteamento Cabeçalhos Configurações
    12. 12. Modulos Ordem de execução <div ng-app="my.app" ng-controller="myCtrl"> <div test1 test2> </div> </div> var myApp = angular.module('myApp', []); myApp.factory('aProvider', function () { console.log("factory"); }); myApp.directive("test1", function () { console.log("configuração das diretivas"); return {}; }); myApp.provider('myProv',function(myConst) { console.log("my provider"); this.$get = function() { return; }; }); myApp.constant('myConst', (function() { console.log('my constant');return "c"; })()); myApp.directive("test2", function () { return { link: function() { console.log("link da diretiva"); } }; }); myApp.run(function () { console.log("app run"); }); myApp.config(function (myProvProvider) { console.log("app config"); }); myApp.controller('myCtrl', function ($scope,myServ) { console.log("app controller"); }); myApp.service('myServ', function () { console.log("app service"); });
    13. 13. Wesley A.Lemos Lages/SC - 2014

    ×