我想知道是否有一种方法(类似于Gmail)让AngularJS延迟显示一个新的路由，直到每个模型和它的数据已经使用各自的服务获取。
例如，如果有一个ProjectsController列出了所有的项目，而project_index.html是显示这些项目的模板，那么Project.query()将在显示新页面之前被完全获取。
在此之前，旧页面仍将继续显示(例如，如果我正在浏览另一个页面，然后决定查看这个Project索引)。
当前回答
我从Misko的代码上面工作，这是我所做的。这是一个更当前的解决方案，因为$defer已经更改为$timeout。然而，替换$timeout将等待超时时间(在Misko的代码中，1秒)，然后返回数据，希望它能及时解决。用这种方法，它会尽快返回。
function PhoneListCtrl($scope, phones) {
$scope.phones = phones;
$scope.orderProp = 'age';
}
PhoneListCtrl.resolve = {
phones: function($q, Phone) {
var deferred = $q.defer();
Phone.query(function(phones) {
deferred.resolve(phones);
});
return deferred.promise;
}
}
其他回答
一个可能的解决方案可能是在我们使用模型的元素中使用ng-cloak指令。
<div ng-cloak="">
Value in myModel is: {{myModel}}
</div>
我觉得这个最省力。
延迟显示路由肯定会导致异步纠缠……为什么不简单地跟踪主实体的加载状态并在视图中使用它呢?例如，在你的控制器中，你可能同时使用ngResource上的success和error回调:
$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
$scope.httpStatus = 200;
}, function(response) {
$scope.httpStatus = response.status;
});
然后在视图中你可以做任何事情:
<div ng-show="httpStatus == 0">
Loading
</div>
<div ng-show="httpStatus == 200">
Real stuff
<div ng-repeat="project in projects">
...
</div>
</div>
<div ng-show="httpStatus >= 400">
Error, not found, etc. Could distinguish 4xx not found from
5xx server error even.
</div>
这个提交是版本1.1.5及更高版本的一部分，它公开了$resource的$promise对象。包含此提交的ngResource版本允许像这样解析资源:
routeProvider美元
resolve: {
data: function(Resource) {
return Resource.get().$promise;
}
}
控制器
app.controller('ResourceCtrl', ['$scope', 'data', function($scope, data) {
$scope.data = data;
}]);
我从Misko的代码上面工作，这是我所做的。这是一个更当前的解决方案，因为$defer已经更改为$timeout。然而，替换$timeout将等待超时时间(在Misko的代码中，1秒)，然后返回数据，希望它能及时解决。用这种方法，它会尽快返回。
function PhoneListCtrl($scope, phones) {
$scope.phones = phones;
$scope.orderProp = 'age';
}
PhoneListCtrl.resolve = {
phones: function($q, Phone) {
var deferred = $q.defer();
Phone.query(function(phones) {
deferred.resolve(phones);
});
return deferred.promise;
}
}
下面是一个适用于Angular 1.0.2的最小工作示例
模板:
<script type="text/ng-template" id="/editor-tpl.html">
Editor Template {{datasets}}
</script>
<div ng-view>
</div>
JavaScript:
function MyCtrl($scope, datasets) {
$scope.datasets = datasets;
}
MyCtrl.resolve = {
datasets : function($q, $http) {
var deferred = $q.defer();
$http({method: 'GET', url: '/someUrl'})
.success(function(data) {
deferred.resolve(data)
})
.error(function(data){
//actually you'd want deffered.reject(data) here
//but to show what would happen on success..
deferred.resolve("error value");
});
return deferred.promise;
}
};
var myApp = angular.module('myApp', [], function($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/editor-tpl.html',
controller: MyCtrl,
resolve: MyCtrl.resolve
});
});
http://jsfiddle.net/dTJ9N/3/
简化版:
因为$http()已经返回了一个承诺(又名deferred)，我们实际上不需要创建自己的承诺。我们可以简化MyCtrl。解决:
MyCtrl.resolve = {
datasets : function($http) {
return $http({
method: 'GET',
url: 'http://fiddle.jshell.net/'
});
}
};
$http()的结果包含数据、状态、报头和配置对象，因此我们需要将MyCtrl的主体更改为:
$scope.datasets = datasets.data;
http://jsfiddle.net/dTJ9N/5/
