Modulos

Web Browser

ASP.NETAngularJS

Class LibraryBusiness

Index.htmlAppModule

RoutesDirectivies

TemplatesViews

ControllerViewModel

ServicesFactories

Repository

BreezeJS$resource$http

WebAPI

ApiController Services

ModulosDefinição

AngularJs• Modulos

C#• Projeto

s

Java• Pacote

s

Vantagens

Evitar conflitos globais

Melhora entendimento e organização do

código

Mais fácil encontrar erros

Praticidade na integração com

terceirosCada modulo pode ter seus próprios controllers, services, providers, filtros e diretivas

ModulosImplementação

 var app = angular.module('modulo.principal', ['modulo.secundario', 'outro.modulo']), app2 = angular.module('modulo.independente', []);

var app = angular.module('modulo.principal');

Registrar

Recuperar

Nome de módulos “lower.case” separados por pontos. Ex: “controllers.module”

Modulos

Como tudo deve ser registrado em módulos, é perigoso que estes sejam declarados como variáveis globais

Por isso é indicado utilizar o padrão IIFE (Immediately-Invoked Function Expression) para fazer qualquer ação que envolva modulos

Bons modos

var app = angular.module('core.module',[]);delete app;

(function () {     //set modulo     angular.module("core.module", []); })(); (function () {      //get modulo      var app = angular.module("core.module");      app.controller('...'); })();

ModulosFases da aplicação

Providers

Constants

Execução

Values

Diretivas

Factories

Services

Controllers

Filters

A maioria das aplicações contem um método que instancia todas as partes do sistema antes de começar a execuçãoJavascript 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çãoApenas providers e constants entram em ação

Tempo de execuçãoControllers, values, services, filters, diretivas podem agir agora

Modulos

Config

Run

Fases da aplicação

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 inicializarRun() é a primeira coisa que roda após inicializar, já fazendo parte da fase de execução

Modulos

Várias coisas podem ser registradas em módulos:

Registros

(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 () { }); })();

Modulos

São simples objetos que podem ser injetados em tempo de execução, ou seja, services e controllers e factories.

Registros - values

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”

Modulos

Têm a mesma função dos values, mas só podem ser chamados em tempo de configuração

Registros - constants

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;        };    });

App_routes

ModulosRegistros - Providers

app.provider('nome', function (){this.$get=function (){}});configFunction.$inject = ['nomeProvider'];

Definição São services

Apenas em fase de

configuração

Nome + “Provider

”$get()

UsosRoteament

oCabeçalhos

Configurações

ModulosOrdem 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"); });

Wesley A.LemosLages/SC - 2014