AngularJS将模块注入父模块并使用子模块运行和配置块

I am trying to build a pretty complex app. This app involves many different state, config and run blocks in their own respective modules. I figured that one good way to tie these modules together would be to inject them into a main app module which holds all the injected modules. In this specific case, subapp is the injected, child module.

我正在尝试构建一个非常复杂的应用程序。此应用程序在各自的模块中涉及许多不同的状态,配置和运行块。我认为将这些模块连接在一起的一个好方法是将它们注入一个主app模块,该模块包含所有注入的模块。在这种特定情况下,subapp是注入的子模块。

I am finding out though, that subapp's run and config blocks don't run as if they were their parents, let me demonstrate that below:

我发现,子app的运行和配置块不会像他们的父母那样运行,让我在下面演示:

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

Essentially, I'm trying to get Angular to run the .run and .config functions of subapp but use <html ng-app="app"> in the instantiation.

本质上,我试图让Angular运行subapp的.run和.config函数,但在实例化中使用。

Upon trying to navigate to <a href="#/thestate">, nothing happens. It does work, obviously, if I replace <html ng-app="app> with <html ng-app="subapp"> but this wouldn't allow me to do something like, angular.module('app', ['ui.router', 'subapp', 'subapp2' ...]);

在尝试导航到时,没有任何反应。显然,如果我将替换为,它确实有效,但这不允许我做像angular.module('app',[ 'ui.router','subapp','subapp2'...]);

So, my question is, why doesn't this work—(i.e., maybe .run is only run once, and only from the module instantiated in the html), and what is the best way to approach something modular like this?

所以,我的问题是,为什么这不起作用 - (也就是说,也许.run只运行一次,而且只运行在html中实例化的模块),这样处理模块化的最佳方法是什么?

Thanks a bunch!

谢谢你!

EDIT**

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

2 个解决方案

#1

There is updated plunker

有更新的plunker

The only issue with .run() of the main module is missing []

主模块的.run()唯一问题是缺少[]

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

The original code snippet:

原始代码段:

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

is not doing what angular would expect

没有做出有希望的角度

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

#2

There is an error in your code, run expecting function but you provide string instead

您的代码中存在错误,运行期望函数但您提供字符串

before

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

after

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

#1