angular——sportsStore项目的问题与解决
来源:互联网 发布:c语言学习网站 编辑:程序博客网 时间:2024/06/04 19:21
How to prevent AngularJS from displaying the view until the Ajax request has been completed (页面延迟问题)
$routeProvider resolve propertyallows delaying of route change until data is loaded.
原来在controller中直接ajax直接获取数据:
$http.get(dataUrl).success(function(data){ //直接获取数据库,会有延迟,在route 配置中 控制 数据resolve,在将数据传入页面$scope$scope.data.products=data;//console.log($scope.data.products);}).error(function (error) {$scope.data.error = error;});
现在 把 取数据 放在resolve 中,再将已经获取的数据传入controller中,即:
app.config(['$routeProvider', function($routeProvider) {//$locationProvider.html5Mode(true);$routeProvider.when("/products", {templateUrl: "views/productList.html",controller:'productsShowDelay',resolve:{ products: ["ProductsLoader", function(ProductsLoader) { return ProductsLoader();//因为factory为 return function }]}}).when(..).otherwise(..)
.controller('productsShowDelay',['$scope','products',function($scope,products){$scope.data.products=products;}])
service.js中配置:
app.factory("productsResource",['$resource','dataUrl',function($resource,dataUrl){return $resource(dataUrl); }]).factory('ProductsLoader', ['productsResource', '$q',function(productsResource,$q){return function(){var delay=$q.defer();productsResource.query(function(ProductsData){//console.log(ProductsData);delay.resolve(ProductsData);},function(errData){ delay.reject(); // you could optionally pass error data here});return delay.promise;};}]);
下为 overstack 相同问题的解决方法:
$routeProvider resolve property allows delaying of route change until data is loaded.
First define a route with resolve
attribute like this.
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'});}]);notice that the
resolve
property is defined on route.function PhoneListCtrl($scope, phones) { $scope.phones = phones; $scope.orderProp = 'age';}PhoneListCtrl.resolve = { phones: 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: function($q, $defer) { var delay = $q.defer(); $defer(delay.resolve, 1000); return delay.promise; }}
Notice that the controller definition contains a resolve object which declares things which should be available to the controller constructor. Here the phones
is injected into the controller and it is defined in the resolve
property.
The resolve.phones
function is responsible for returning a promise. All of the promises are collected and the route change is delayed until after all of the promises are resolved.
上文中 $defer为 angular 1.0.0中 服务,后续版本用 $timeout服务 代替了$defer,
$timeout(function(){deferred.resolve(ProductsData);
},2000)
- angular——sportsStore项目的问题与解决
- 第7章 SportsStore — 一个真实的应用程序
- 第8章 SportsStore:导航与购物车 — 精通MVC 3 框架
- 第7章 SportsStore:一个真实的应用程序 — 精通MVC 3 框架
- 用Yeoman创建angular项目及一些自己所遇到的一些问题的解决
- 第9章 SportsStore:管理 — 精通MVC 3 框架
- 解决angular 与django的冲突
- 项目实施的问题与解决
- 【angular】解决跨域问题
- 解决angular Js中出现unsafe:data:;base64,的问题
- 【js类库AngularJs】解决angular+springmvc的post提交问题
- 解决angular+spring boot的跨域问题
- 【js类库AngularJs】解决angular的post提交问题
- 解决angular+spring boot的跨域问题
- 【js类库AngularJs】解决angular+springmvc的post提交问题
- 解决:angular js模板中无法使用ueditor的问题
- angular项目中的遇到的问题之onclick
- angular学习总结七——http代理解决本地开发时跨域问题
- ROCK介绍
- java:SEVERE: IOException while loading persisted sessions: java.io.EOFException
- POJ 1328 Radar Installation
- 用"再生龙"Clonezilla 来克隆Linux系统
- 闻名遐迩JavaScript库总结
- angular——sportsStore项目的问题与解决
- php学习之路-http协议,防盗链
- signed char的取值范围为何最小为-128
- java通过post方式发送接收xml信息
- android利用数字证书对程序签名
- iOS 获取手机的型号,系统版本,软件名称,软件版本
- codility上的问题(37) Magnesium 2014
- 基础篇:序列化技术
- CocosBuilder学习之二:把ccbi导入到项目中