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

前端之家收集整理的这篇文章主要介绍了angularjs – Angular.js从多个模块配置ui-router子状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想实现一个设置,我可以在主模块中定义一个“根状态”,然后在其他模块中添加子状态.这个,因为我需要根状态来解决之前我可以去孩子的状态.

显然,这应该是可能的,根据这个常见问题解答:
How to: Configure ui-router from multiple modules

对我来说,它不起作用:
错误未捕获错误:没有这样的状态’app’从ngBoilerplate.foo

这是我有的:

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

我如何做这项工作,或者我可以采取什么其他方法来在每个国家之前全局解决问题(而不是在每个国家定义一个决心)?

我终于选择了为我做的工作的这种方法
// add all your dependencies here and configure a root state e.g. "app"
angular.module( 'ngBoilerplate',['ui.router','templates-app','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']);

然后在您的应用程序index.html中

<html ng-app="app">

猜你在找的Angularjs相关文章