Question

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

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

HTML

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

</html>

JS

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运行.run的{{1}}和.config函数，但在实例化中使用subapp。

尝试导航到<html ng-app="app">时，没有任何反应。显然，如果我将<a href="#/thestate">替换为<html ng-app="app>，它确实有效，但这不允许我执行<html ng-app="subapp">

之类的操作

所以，我的问题是，为什么这不起作用 - （也就是说，angular.module('app', ['ui.router', 'subapp', 'subapp2' ...]);可能只运行一次，而且只运行在html中实例化的模块），什么是接近某事的最佳方法像这样模块化？

非常感谢！

编辑**

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

Answer 1

有updated plunker

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

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

没有做出角度所期望的

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

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

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

2 个答案: