2016-05-16 7 views
13

Vedere this plunker code (Avviso messaggi console.log) per capire cosa sto cercando di dire/chiedere.Qual è il punto di dichiarazione della dipendenza del modulo angolare se un modulo può accedere ai valori e ai servizi da un altro modulo comunque

Ho definito 3 moduli, ovvero, myApp, myApp.view1, myApp.view2. Solo myApp modulo ha la dipendenza dichiarata sull'altro 2.

myApp modulo

angular.module('myApp', ['ngRoute','myApp.view1','myApp.view2']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.otherwise({redirectTo: '/view1'}); 
}]) 

.value('author', 'Suman Barick') 

myApp.view1 modulo

angular.module('myApp.view1', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', { 
    template: 'Welcome to view ONE', 
    controller: 'View1Ctrl' 
    }); 
}]) 

.controller('View1Ctrl', ['author', function(author) { 
    console.log('*******************************************'); 
    console.log('I am on view1 module'); 
    console.log('Printing author value from myApp module ' + author); 
    console.log('*******************************************'); 
}]) 

.value('view1_var', 'Hi, I am defined as value in myApp.view1 module') 

.service('serviceV1', function(){ 
    this.getData = function(){return 'abcdef';} 
    console.log('This is a service from myApp.view1 module'); 
}) 

modulo myApp.view2

angular.module('myApp.view2', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view2', { 
    template: 'Welcome to view TWO', 
    controller: 'View2Ctrl' 
    }); 
}]) 

.controller('View2Ctrl', ['view1_var','serviceV1', function(view1_var, serviceV1) { 
    console.log('*******************************************'); 
    console.log('Look I am accessing view1_var and serviceV1 of view1 module... from view2 module'); 
    console.log(view1_var); 
    console.log(serviceV1.getData()); 
    console.log('*******************************************'); 
}]); 

miei dubbi/domande:

  1. Perché può "myApp.view1" accesso modulo il valore "autore" definita su modulo "myApp". "myApp" ha una dipendenza da "myApp.view1", ma non viceversa.

  2. Più interessante, "myApp.view1" e "myApp.view2" sono 2 moduli completamente separati. Allora come mai "myApp.view2" sta accedendo allo view1_var e serviceV1 da "myApp.view1" senza nemmeno dichiarare alcuna dipendenza su di esso?

  3. È questo il design/comportamento previsto? Allora quali sono le altre cose che posso definire in un modulo ma usarlo in qualsiasi altro modulo indipendentemente dalla loro dipendenza tra loro?

Qualcuno può spiegare?

+0

Se si utilizza un approccio basato su test, incluse tutte le dipendenze in un modulo consente di testare quel modulo separatamente. – dewd

+0

Conosco i vantaggi, ma non è quello che ho chiesto: P –

+0

Ora vedo le altre 3 domande. Stavo solo rispondendo alla domanda nel titolo – dewd

risposta

2

Dopo la ricerca un po 'e grazie a @dewd per me che punta alla risposta accettato di this question, sono giunto alla seguente conclusione ,

Così, qui va mio teorema[ Vedi immagine Illustrazione sotto]

Se

  1. Esiste n moduli che nominano A1, A2, A3, ..., Un tale che A1 dipende da A2, A2 dipende da A3 e così via ...
  2. Inoltre, moduli m denominazione B1, B2, B3, .... Bm tale che B1 dipende B2, B2 dipende B3 ecc ...
  3. Inoltre esiste un livello (est) superiore dipendente modulo, dire 'AB', che dipende sia modulo 'A1' e 'B1'
  4. Poi, modulo 'Un' potrà accedere a qualsiasi servizio dichiarata sul modulo 'Bm'

Illustrazione immagine

enter image description here

L'esperimento e Prova

Vai a questa plunkr per demo.

Qui ho dichiarato totale 7 moduli,

  1. moduli A1, A2, A3 dove, A1 dipende A2 e A2 è dipendente A3
  2. moduli B1, B2, B3 dove, B1 è dipendente B2 e B2 è dipendente B3
  3. modulo 'AB' che dipende sia 'A1' e 'B1'

Ora,

  1. Ho definito un servizio b3service modulo B3
  2. ho bootstrap modulo AB con il corpo
  3. Ora posso accedere b3service dal modulo A3 (Vedere il messaggio console)

Ma, A3 e B3 non ha alcuna connessione diretta o dipendenza.

Ecco il mio HTML

<body id="body" ng-app="AB"> 
    <h1>Hello Plunker!</h1> 

    <script src="app.js"></script> 
    </body> 

E qui è la mia JS

angular.module('AB', ['A1', 'B1']); 

angular.module('A1', ['A2']); 
angular.module('A2', ['A3']); 
var a3 = angular.module('A3', []); 

angular.module('B1', ['B2']); 
angular.module('B2', ['B3']); 
var b3 = angular.module('B3', []); 


b3.service('b3service', function(){ 
    this.getSecretMessage = function(){ 
    return 'Cows are Flying...'; 
    }; 
}) 

a3.run(function(b3service){ 
    console.log(b3service.getSecretMessage()); 
}); 

mia conclusione

penso t La magia è nei moduli nidificati. Questo è il motivo per cui nel codice mostrato nella domanda view1 modulo e nel modulo view2 ci si può accedere reciprocamente. Poiché le viste sono già nidificate all'interno di body con cui è stato avviato il padre di tutti i moduli, myApp.

Confondere Fact ...

E la mia testa gira ancora ...: P

0

Nei controller si dichiarano le dipendenze, se si aggiungono autore, view1_var e serviceV1 a entrambi i controller, quindi entrambi i controller possono vederli.

Presentando view1_var in entrambi gli spettacoli view1_var è effettivamente "value'd come globale. Per quanto riguarda il motivo, non ne ho idea. Tuttavia la dichiarazione del secondo valore è sicuramente il primo.

'use strict'; 

var myApp = angular.module('myApp', ['ngRoute', 'myApp.view1', 'myApp.view2']); 

myApp.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.otherwise({redirectTo: '/view1'}); 
}]); 

myApp.value('author', 'Suman Barick'); 

var myApp1 = angular.module('myApp.view1', ['ngRoute']); 
var myApp2 = angular.module('myApp.view2', ['ngRoute']); 

myApp1.value('view1_var', 'Hi, view 1'); 
myApp2.value('view1_var', 'Hi, VIEW 2'); 

myApp1.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', { 
    template: 'Welcome to view ONE', 
    controller: 'View1Ctrl' 
    }); 
}]); 

myApp2.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view2', { 
    template: 'Welcome to view TWO', 
    controller: 'View2Ctrl' 
    }); 
}]); 

myApp1.service('serviceV1', function(){ 
    this.getData = function(){return 'abcdef';} 
    console.log('This is a service from myApp.view1 module'); 
}); 

myApp1.controller('View1Ctrl', ['author','view1_var','serviceV1', function(author, view1_var, serviceV1) { 
    console.log('*******************************************'); 
    console.log('I am on view1 module'); 
    console.log('Printing author value from myApp module ' + author); 
    console.log(view1_var); 
    console.log(serviceV1.getData()); 
    console.log('*******************************************'); 
}]); 

myApp2.controller('View2Ctrl', ['author', 'view1_var','serviceV1', function(author, view1_var, serviceV1) { 
    console.log('*******************************************'); 
    console.log('Look I am accessing view1_var and serviceV1 of view1 module... from view2 module'); 
    console.log('Printing author value from myApp module ' + author); 
    console.log(view1_var); 
    console.log(serviceV1.getData()); 
    console.log('*******************************************'); 
}]); 
+0

Wow! L'unica cosa che posso dire guardando la tua risposta è che "Sei un grande copia-Paster": D Quello che hai presentato è solo un piccolo sottoinsieme di ciò che ho chiesto. : P –

+0

La domanda ha confuso lo scope angolare e l'ambito js. –

+0

In effetti, non penso che nessuno di voi abbia letto la mia risposta, basta leggere la mia reputazione. NVM –

Problemi correlati