AngularJS Iniezione di un modulo nel modulo genitore e utilizzo dei blocchi di esecuzione e configurazione del modulo figlio

Sto provando a creare un'app piuttosto complessa. Questa app coinvolge diversi stati, config e blocchi di esecuzione nei rispettivi moduli. Ho pensato che un buon modo per legare insieme questi moduli sarebbe quello di iniettarli in un modulo principale app che contiene tutti i moduli iniettati. In questo caso specifico, subapp è il modulo figlio iniettato.AngularJS Iniezione di un modulo nel modulo genitore e utilizzo dei blocchi di esecuzione e configurazione del modulo figlio

sto scoprendo, però, che corrono e configurazione blocchi subapp s' non vengono eseguiti come se fossero i loro genitori, mi permetta di dimostrare che al di sotto:

HTML

<html ng-app="app"> 
    <body> 
    <a href="#/thestate">Head to the state!</a> 
    <ui-view></ui-view> 
    </body> 

</html>

angular.module('app', ['ui.router', 'subapp']); 

angular.module('subapp', ['ui.router']) 
    .run(function($rootScope, $state) { 
     $rootScope.$on('$stateChangeStart', function(event, toState) { 
      if (toState.name === "theState") { 
       event.preventDefault(); 
       $state.go('theState.substate', { 
        param: 1 
       }); 
      } 
     }); 
    }) 
.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider.state('theState', { 
     url: '/thestate', 
     template: '<div>this is the main state</div>' + 
     '<a href="#/thestate/12">Go to state.substate</a>' + 
     '<ui-view></ui-view>' 
    }) 
    .state('theState.substate', { 
     url: '/:param', 
     template: '<div>{{id}}</div>', 
     controller: function($scope, $stateParams) { 
      $scope.id = $stateParams.param; 
      } 
    }); 
$urlRouterProvider.otherwise('/'); 
});

In sostanza, sto cercando di ottenere angolare per eseguire i .run e .config funzioni di subapp ma l'uso <html ng-app="app"> nell'istanza.

Dopo aver provato a navigare su <a href="#/thestate">, non accade nulla. Funziona, ovviamente, se sostituisco <html ng-app="app> con <html ng-app="subapp">, ma questo non mi avrebbe permesso di fare qualcosa di simile, angular.module('app', ['ui.router', 'subapp', 'subapp2' ...]);

Quindi, la mia domanda è, perché non fa questo lavoro-(vale a dire, forse .run è unica pista una volta, e solo dal modulo istanziato nell'html), e qual è il modo migliore per avvicinarsi a qualcosa di modulare come questo?

Grazie mille!

EDIT **

Plnkr: http://plnkr.co/edit/UCWc2cByHHjNgqAE8P7L?p=preview

fonte

2015-05-22 nikk wong

Sei sicuro che il tuo codice non funzioni? Direi che ce la fai .. funziona - controlla qui [#/thestate/12] (http://run.plnkr.co/plunks/UCWc2cByHHjNgqAE8P7L/#/thestate/12) –

In realtà, il tuo plunk sembra per lavorare per me –

Mi scuso - Ho scommentato il blocco ''. .run''' nel modulo principale '' 'app''' e tutto è felicemente rotto di nuovo^_ ^. http: // plnkr.co/edit/UCWc2cByHHjNgqAE8P7L? p = preview –

C'è updated plunker

L'unico problema con .run() del modulo principale manca []

.run(['$rootScope', '$state', '$stateParams', 
    function($rootScope, $state, $stateParams) { 
     $rootScope.$state = $state; 
     $rootScope.$stateParams = $stateParams; 
    }])

Il frammento di codice originale :

.run('$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
     $rootScope.$state = $state; 
     $rootScope.$stateParams = $stateParams; 
    })

non sta facendo quello angolare si aspetterebbe

.run(['param1', 'param2', ... , function(param1, param2, ...) {}]

fonte

2015-05-22 07:16:38

La lezione della storia: tutto è possibile in angularjs (e assicurati di controllare sempre la tua sintassi). :-) –

Fantastico ce l'hai fatta! ;) continua a giocare con quel diamante UI-Router;) –

Grazie Radim! :-) Quindi è sicuro che il numero di blocchi ''. .run''' che possono essere eseguiti è limitato al numero di moduli che si iniettano? –

C'è un errore nel codice, eseguire le funzioni in attesa ma si forniscono stringa invece

prima

.run('$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
})

dopo

.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
}])

fonte

2015-05-22 07:16:46 kwangsa

AngularJS Iniezione di un modulo nel modulo genitore e utilizzo dei blocchi di esecuzione e configurazione del modulo figlio

risposta

Problemi correlati