我想知道是否有一种方法(类似于Gmail)让AngularJS延迟显示一个新的路由，直到每个模型和它的数据已经使用各自的服务获取。
例如，如果有一个ProjectsController列出了所有的项目，而project_index.html是显示这些项目的模板，那么Project.query()将在显示新页面之前被完全获取。
在此之前，旧页面仍将继续显示(例如，如果我正在浏览另一个页面，然后决定查看这个Project索引)。
当前回答
我看到一些人问如何使用angular来做到这一点。带有简化友好依赖项注入的控制器方法。因为我刚开始工作，我觉得有必要回来帮忙。以下是我的解决方案(采用了最初的问题和Misko的答案):
angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl,
resolve: {
phones: ["Phone", "$q", function(Phone, $q) {
var deferred = $q.defer();
Phone.query(function(successData) {
deferred.resolve(successData);
}, function(errorData) {
deferred.reject(); // you could optionally pass error data here
});
return deferred.promise;
]
},
delay: ["$q","$defer", function($q, $defer) {
var delay = $q.defer();
$defer(delay.resolve, 1000);
return delay.promise;
}
]
},
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl,
resolve: PhoneDetailCtrl.resolve}).
otherwise({redirectTo: '/phones'});
}]);
angular.controller("PhoneListCtrl", [ "$scope", "phones", ($scope, phones) {
$scope.phones = phones;
$scope.orderProp = 'age';
}]);
由于这段代码来源于问题/最流行的答案，所以它没有经过测试，但如果你已经了解如何编写友好的简化角代码，它应该会给你带来正确的方向。我自己的代码不需要的一部分是将“Phone”注入到“phones”的resolve函数中，我也没有使用任何“delay”对象。
我也推荐这个youtube视频http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp，它对我帮助很大
如果你感兴趣，我也决定粘贴我自己的代码(写在coffescript)，所以你可以看到我是如何得到它的工作。
仅供参考，在此之前，我使用了一个通用控制器，帮助我在几个模型上做CRUD:
appModule.config ['$routeProvider', ($routeProvider) ->
genericControllers = ["boards","teachers","classrooms","students"]
for controllerName in genericControllers
$routeProvider
.when "/#{controllerName}/",
action: 'confirmLogin'
controller: 'GenericController'
controllerName: controllerName
templateUrl: "/static/templates/#{controllerName}.html"
resolve:
items : ["$q", "$route", "$http", ($q, $route, $http) ->
deferred = $q.defer()
controllerName = $route.current.controllerName
$http(
method: "GET"
url: "/api/#{controllerName}/"
)
.success (response) ->
deferred.resolve(response.payload)
.error (response) ->
deferred.reject(response.message)
return deferred.promise
]
$routeProvider
.otherwise
redirectTo: '/'
action: 'checkStatus'
]
appModule.controller "GenericController", ["$scope", "$route", "$http", "$cookies", "items", ($scope, $route, $http, $cookies, items) ->
$scope.items = items
#etc ....
]
其他回答
我看到一些人问如何使用angular来做到这一点。带有简化友好依赖项注入的控制器方法。因为我刚开始工作，我觉得有必要回来帮忙。以下是我的解决方案(采用了最初的问题和Misko的答案):
angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl,
resolve: {
phones: ["Phone", "$q", function(Phone, $q) {
var deferred = $q.defer();
Phone.query(function(successData) {
deferred.resolve(successData);
}, function(errorData) {
deferred.reject(); // you could optionally pass error data here
});
return deferred.promise;
]
},
delay: ["$q","$defer", function($q, $defer) {
var delay = $q.defer();
$defer(delay.resolve, 1000);
return delay.promise;
}
]
},
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl,
resolve: PhoneDetailCtrl.resolve}).
otherwise({redirectTo: '/phones'});
}]);
angular.controller("PhoneListCtrl", [ "$scope", "phones", ($scope, phones) {
$scope.phones = phones;
$scope.orderProp = 'age';
}]);
由于这段代码来源于问题/最流行的答案，所以它没有经过测试，但如果你已经了解如何编写友好的简化角代码，它应该会给你带来正确的方向。我自己的代码不需要的一部分是将“Phone”注入到“phones”的resolve函数中，我也没有使用任何“delay”对象。
我也推荐这个youtube视频http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp，它对我帮助很大
如果你感兴趣，我也决定粘贴我自己的代码(写在coffescript)，所以你可以看到我是如何得到它的工作。
仅供参考，在此之前，我使用了一个通用控制器，帮助我在几个模型上做CRUD:
appModule.config ['$routeProvider', ($routeProvider) ->
genericControllers = ["boards","teachers","classrooms","students"]
for controllerName in genericControllers
$routeProvider
.when "/#{controllerName}/",
action: 'confirmLogin'
controller: 'GenericController'
controllerName: controllerName
templateUrl: "/static/templates/#{controllerName}.html"
resolve:
items : ["$q", "$route", "$http", ($q, $route, $http) ->
deferred = $q.defer()
controllerName = $route.current.controllerName
$http(
method: "GET"
url: "/api/#{controllerName}/"
)
.success (response) ->
deferred.resolve(response.payload)
.error (response) ->
deferred.reject(response.message)
return deferred.promise
]
$routeProvider
.otherwise
redirectTo: '/'
action: 'checkStatus'
]
appModule.controller "GenericController", ["$scope", "$route", "$http", "$cookies", "items", ($scope, $route, $http, $cookies, items) ->
$scope.items = items
#etc ....
]
我有一个复杂的多层次滑动面板界面，与禁用的屏幕层。在禁用屏幕层上创建指令，该指令将创建点击事件来执行状态
$state.go('account.stream.social.view');
产生了弹跳的效果。history.back()而不是它工作得很好，但它并不总是回到历史在我的情况下。所以我发现，如果我只是在我的禁用屏幕上创建属性href而不是状态。去吧，效果很好。
<a class="disable-screen" back></a>
指令“回来”
app.directive('back', [ '$rootScope', function($rootScope) {
return {
restrict : 'A',
link : function(scope, element, attrs) {
element.attr('href', $rootScope.previousState.replace(/\./gi, '/'));
}
};
} ]);
我只是保存了之前的状态
app.run(function($rootScope, $state) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
$rootScope.previousState = fromState.name;
$rootScope.currentState = toState.name;
});
});
一个可能的解决方案可能是在我们使用模型的元素中使用ng-cloak指令。
<div ng-cloak="">
Value in myModel is: {{myModel}}
</div>
我觉得这个最省力。
使用AngularJS 1.1.5
使用AngularJS 1.1.5语法更新justin回答中的“phones”函数。
原:
phones: function($q, Phone) {
var deferred = $q.defer();
Phone.query(function(phones) {
deferred.resolve(phones);
});
return deferred.promise;
}
更新:
phones: function(Phone) {
return Phone.query().$promise;
}
多亏了Angular团队和贡献者，这个版本变得更短了。：）
这也是马克西米利安·霍夫曼的答案。显然，这个commit被放到了1.1.5。
$routeProvider resolve属性允许延迟路由更改，直到数据被加载。
首先像这样定义一个具有resolve属性的路由。
angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl,
resolve: PhoneListCtrl.resolve}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl,
resolve: PhoneDetailCtrl.resolve}).
otherwise({redirectTo: '/phones'});
}]);
注意，resolve属性是在route上定义的。
function PhoneListCtrl($scope, phones) {
$scope.phones = phones;
$scope.orderProp = 'age';
}
PhoneListCtrl.resolve = {
phones: function(Phone, $q) {
// see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4
var deferred = $q.defer();
Phone.query(function(successData) {
deferred.resolve(successData);
}, function(errorData) {
deferred.reject(); // you could optionally pass error data here
});
return deferred.promise;
},
delay: function($q, $defer) {
var delay = $q.defer();
$defer(delay.resolve, 1000);
return delay.promise;
}
}
注意，控制器定义包含一个resolve对象，它声明了控制器构造函数应该可用的东西。在这里，手机被注入到控制器中，并在resolve属性中定义。
的决心。Phones函数负责返回一个promise。收集所有的承诺，并延迟路由更改，直到所有的承诺都被解决。
工作演示:http://mhevery.github.com/angular-phonecat/app/#/phones 来源:https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831
推荐文章
- 截断字符串直接JavaScript
- 我如何使用可选的链接与数组和函数?
- EINVRES请求https://bower.herokuapp.com/packages/失败，提示502
- 使用fetch进行基本身份验证?
- 如何从子组件内部更新React上下文?
- 如何将一个普通对象转换为ES6映射?
- scrollIntoView卷轴太远了
- Angular ng-repeat反过来
- 如何获得请求路径与表达请求对象
- 使用Handlebars 'each'循环访问父对象的属性
- 盎格鲁- ngcloak / ngg展示blink元素
- 禁用表单自动提交按钮单击
- 节点和错误:EMFILE，打开的文件太多
- JavaScript函数中的默认参数值
- 使用RegExp.exec从字符串中提取所有匹配项
