个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 23:53:27 25 4
gpt4 key购买 nike

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

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

对我来说它不起作用:
错误 Uncaught Error :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',
'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']);

然后在您的应用程序 index.html 
<html ng-app="app">

关于angularjs - Angular.js 从多个模块配置 ui-router 子状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18255821/

25 4 0
文章推荐： WPF 性能缓慢 - 许多 DataItem=null 绑定(bind)警告
文章推荐： unit-testing - 测试 F# 异步工作流时如何获得有用的堆栈跟踪
文章推荐： powershell - cls 在 Get-Content -Wait 调用上。
文章推荐： Perl:如何在不存储到数组的情况下拆分字符串并继续拆分？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com