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

【问题标题】：AngularJS Injecting a module into parent module and using child module run and config blocksAngularJS将模块注入父模块并使用子模块运行和配置块
【发布时间】：2015-05-22 06:40:35
【问题描述】：

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

我发现，subapp 的运行和配置块不像它们的父级那样运行，让我在下面演示一下：

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

基本上，我试图让 Angular 运行 subapp 的 .run 和 .config 函数，但在实例化中使用 <html ng-app="app">。

在尝试导航到 <a href="#/thestate"> 时，没有任何反应。很明显，如果我用<html ng-app="subapp"> 替换<html ng-app="app>，它确实有效，但这不允许我做类似angular.module('app', ['ui.router', 'subapp', 'subapp2' ...]); 的事情

所以，我的问题是，为什么这不起作用 - （即，.run 可能只运行一次，并且只能从 html 中实例化的模块中运行），以及处理类似模块化的最佳方法是什么这？

非常感谢！

编辑**

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

【问题讨论】：

您确定您的代码不起作用吗？我会说你做到了..它正在工作 - 在这里查看#/thestate/12
实际上，你的 plunker 似乎对我有用
抱歉——我已取消注释掉主 .run 模块中的 app 块，并且一切都被愉快地再次破坏了^_^。 plnkr.co/edit/UCWc2cByHHjNgqAE8P7L?p=preview

标签： javascript angularjs angular-ui-router

【解决方案1】：

有updated plunker

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

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

原代码sn-p：

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

没有做 Angular 所期望的

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

【讨论】：

故事的教训：在 angularjs 中一切皆有可能（并确保始终检查您的语法）。 :-)
你成功了！ ;) 继续玩那个菱形 UI-Router ;)
感谢 Radim！ :-) 所以可以安全地假设可以运行的.run 块的数量仅限于您注入的模块数量？
对不起，不在附近；）无论如何，主模块中引用的所有模块（甚至可以通过某些子模块）都将得到正确处理（如您所料）。它们将被调用为所有它们运行 config()，然后为所有它们运行 run()。换句话说，你的期望都是正确的。这是伟大的;）
完美！感谢您的帮助！

【解决方案2】：

您的代码中有错误，运行期望函数，但您提供了字符串

之前

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

之后

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

【讨论】：