AngularJS - 在加载任何 Controller 之前加载数据

Question

我正在制作一个单页应用程序(SPA)。我做了一个名为 InitialControler 的 Controller 在此 url (local.app/init) 上从服务器加载数据。

我希望这个 url 在任何其他 url 之前打开。我正在使用 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