Angular.js从多个模块配置ui-router子状态

时间:2013-08-15 15:14:47

标签: angularjs module state angular-ui ngboilerplate

我想实现一个设置,我可以在主模块中定义“根状态”,然后在其他模块中添加子状态。这个,因为我需要根状态才能解决才能进入子状态。

显然,根据此FAQ,这应该是可能的: How to: Configure ui-router from multiple modules

对我来说它不起作用: 错误未捕获错误:ngBoilerplate.foo中没有此类状态'app'

这就是我所拥有的:

app.js

angular.module( 'ngBoilerplate', [
  'templates-app',
  'templates-common',
  'ui.state',
  'ui.route',
  'ui.bootstrap',
  'ngBoilerplate.library'
])
.config( function myAppConfig ( $stateProvider, $urlRouterProvider ) {
    $stateProvider
        .state('app', {
            views:{
                "main":{
                    controller:"AppCtrl"
                }
            },
            resolve:{
                Auth:function(Auth){
                    return new Auth();
                }
            }
        });
    $urlRouterProvider.when('/foo','/foo/tile');
    $urlRouterProvider.otherwise( '/foo' );
})
.factory('Auth', ['$timeout','$q', function ($timeout,$q) {
    return function () {
        var deferred = $q.defer();
        console.log('before resolve');
        $timeout(function () {
            console.log('at resolve');
            deferred.resolve();
        }, 2000);

        return deferred.promise;

    };
}])
.run(function run( $rootScope, $state, $stateParams ) {
    console.log('greetings from run');

    $state.transitionTo('app');
})
.controller( 'AppCtrl', function AppCtrl ( $scope, Auth ) {
    console.log('greetings from AppCtrl');
});

foo.js

angular.module( 'ngBoilerplate.foo', ['ui.state'])

.config(function config( $stateProvider ) {
  $stateProvider
      .state( 'app.foo', {
        url: '/foo/:type',
        views: {
            "main": {
                controller:'FooCtrl',
                templateUrl: function(stateParams) { /* stuff is going on in here*/ }
            }
        }
      });
})
.controller( 'FooCtrl', function FooCtrl( $scope ) {
  console.log('deferred foo');
});

我如何使这项工作或我可以采取什么其他方法在每个州之前解决全局问题(没有在每个州定义决心)?

3 个答案:

答案 0 :(得分:7)

我最终选择了这种方法为我做的工作:

// add all your dependencies here and configure a root state e.g. "app"
angular.module( 'ngBoilerplate', ['ui.router','templates-app',
'templates-common','etc','etc']);

// configure your child states in here, such as app.foo, app.bar etc.
angular.module( 'ngBoilerplate.foo', ['ngBoilerplate']);
angular.module( 'ngBoilerplate.bar', ['ngBoilerplate']);

// tie everything together so you have a static module name
// that can be used with ng-app. this module doesn't do anything more than that.
angular.module( 'app', ['ngBoilerplate.foo','ngBoilerplate.bar']);

然后在你的app index.html

<html ng-app="app">

答案 1 :(得分:1)

在文档中,feature1模块取决于application模块。尝试

angular.module( 'ngBoilerplate.foo', ['ngBoilerplate'])

答案 2 :(得分:0)

我只想评论,但我没有代表。我知道这是旧的,但我有同样的问题,并遇到了这个。我很困惑的一件事是在app.js你不导入“ngBoilerplate.foo”而是导入ngBoilerplate.library。我遇到了同样的问题,我的解决方案是将子模块注入顶层模块而不是父模块。

我的结构是模块('ngBoilerplate'),模块('ngBoilerplate.foo')和模块('ngBoilerplate.foo.bar')'。我正在将ngBoilerplate.foo.bar注入ngBoilerplate.foo并且$ stateProvider失败了。我需要将ngBoilerplate.foo.bar注入顶级ngBoilerplate。

我想我会把它放在这里以防万一其他人看到这个。我遇到的错误是Uncaught TypeError:无法从ngBoilerplate.foo中读取undefined属性'navigable'