Question

我正在制作单页应用程序（SPA）。我创建了一个名为InitialControler的控制器，用于从该URL（local.app/init）加载来自服务器的数据。

我希望在任何其他网址之前打开此网址。我正在使用ui-router，我在$state.go('init')函数中执行了.run()但它仍然在'init'页面之前加载了请求的页面

Answer 1

首先创建一个名为app

的状态

$stateProvider.state('app', {
    abstract:    true,
    templateUrl: "assets/partials/container.html",
    controller:  'AppCtrl',
    resolve: {
        init: function(MyFactory) {
            return MyFactory.resolver();
        }
    }
});

现在，您创建的任何新状态都应该是app状态的子状态。这也很好，因为它会成为你的根范围。除非你的工厂解决，否则州不会处理。

这是您创建工厂的方式

app.factory('MyFactory', function($http){
    var items = [];
    return {
        resolver: function(){
            return $http.get('my/api').success(function(data){
                items = data;
            })
        },
        get() {
            return items;
        }
    }
});

现在处于任何其他状态

$stateProvider.state('app.items', {
    url:    '/items',
    templateUrl: "assets/partials/items.html",
    controller:  function($scope, MyFactory){
        $scope.items = MyFactory.get();
    }
});

更多关于状态解决方案

https://github.com/angular-ui/ui-router/wiki#resolve

Answer 2

如果您使用的是ui-router，则可以使用嵌套状态解决此问题。例如：

$stateProvider
    .state("main", {
        url: "/",
        template: '<div ui-view></div>',
        controller: 'InitController'
    })
    .state("main.landing", {
        url: "landing",
        templateUrl: "modules/home/views/landing.html",
        controller: 'LandingPageController'
    })
    .state("main.profile", {
        url: "profile",
        templateUrl: "modules/home/views/profile.html",
        controller: 'ProfileController'
    });

在此示例中，您已定义了3条路线：“/”，“/ landing”，“/ profile”

因此，即使用户直接进入/ landing或/ profile

，也会始终调用InitController（与“/”路由相关）

重要提示：不要忘记在此部分中加入<div ui-view></div>以启用子状态控制器加载

Answer 3

一种方法是，在config中声明只有'init'状态。并且在InitialController中，加载数据（解析服务调用的功能）后，配置其他状态。但是在这种方法中，无论何时刷新页面，url都将更改为local.app.init。

即使在重新加载后仍然处于该特定状态，我找到的解决方案是有一个StartUp应用程序，我在其中加载了所需的数据，之后我通过angular.bootstrap手动引导主应用程序。

AngularJS - 在加载任何控制器之前加载数据

3 个答案: