AngularJS路由解析獲取ID為$ http的數據
[英]AngularJS route resolve get $http data with id
問題描述
我有幾個依賴於服務器數據的屏幕和控制器。 因此，我想通過路由器解析功能來解析數據依賴關系，以使其在呈現屏幕之前注意所有數據都可以通過Promise獲得。 但是，由於下面的示例似乎不起作用，因此我不確定我是否正確理解了用法。 為什么？
angular.module('app',['ngRoute'])
.service('Data1', function ($q, $routeProvider, $http) {
var self = this;
this.fetch = function() {return $http.get('/json/data1',{id:$routeProvider.id})}
}
.service('Data2', function ($q, $routeProvider, $http) {
var self = this;
this.fetch = function() {return $http.get('/json/data2',{id:$routeProvider.id})}
}
.config(function($routeProvider){
§routeProvider.when('/:id',{
controller:'TestCtrl',
templateUrl:'template.html',
resolve: {
data1: function (Data1) { return Data1.fetch(); },
data1: function (Data2) { return Data2.fetch(); }
}
});
})
.controller('TestCtrl', function($location, $routeParams, $http, data1,data2) {
console.log(data1);
console.log(data2);
});
1 個解決方案
解決方案1
1 2015-04-16 15:51:36
這是一個如何在$routeProvider正確使用resolve的示例。 首先，我定義了兩個像您在那兒一樣的工廠，然后在我的配置中設置了一條路線，該路線用於將工廠中的數據注入到其中。 我告訴它要使用哪個控制器，在這種情況下，模板是非必然的。 然后在解析下，給它一個具有兩個屬性的對象，這些屬性是函數someData和someMoreData 。 在這兩個函數上，我注入了data1和data2工廠以及$routeParams ，從工廠獲取數據，然后返回數據。
在控制器定義中，我告訴我要注入$scope ，然后告訴我要注入另外兩件事，這些是我在$routeProvider定義的resolve屬性。
要記住的一件事是，如果您正在工廠中進行實際的API調用，希望從中解析數據，則直到解析數據后，頁面才會加載，直到所有這些都完成，控制器才會啟動。 因此，您可能想想出一些方法來制作動畫，在StackOverflow上有很多示例。
angular.module('app.factories', []) .factory('data1', ['$q', '$timeout', function($q, $timeout) { return { getData: function(id) { var deferred = $q.defer(); var promise = deferred.promise; $timeout(function() { deferred.resolve('this is factory 1, id: ' + id); }, 2000); return promise; } }; }]) .factory('data2', ['$q', '$timeout', function($q, $timeout) { return { getData: function(id) { var deferred = $q.defer(); var promise = deferred.promise; $timeout(function() { deferred.resolve('this is factory 2, id: ' + id); }, 2000); return promise; } }; }]); angular.module('app', ['ngRoute', 'app.factories']) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { controller: 'defaultCtrl', template:'<a href="#/1">Go to route with parameter on it</a>' }) .when('/:id', { controller: 'testCtrl', template: '<span ng-bind="string1"></span><br /><span ng-bind="string2"></span>', resolve: { someData: ['data1', '$route', function(data1, $route) { console.log('resolving someData'); return data1.getData($route.current.params.id).then( function(response) { return response; }); } ], someMoreData: ['data2', '$route', function(data2, $route) { console.log('resolving someMoreData'); return data2.getData($route.current.params.id).then( function(response) { return response; }); } ] } }); } ]) .controller('defaultCtrl', function() { }) .controller('testCtrl', ['$scope', 'someData', 'someMoreData', function($scope, someData, someMoreData) { console.log('in route with id param'); $scope.string1 = someData; $scope.string2 = someMoreData; } ]);
<!DOCTYPE html> <html ng-app="app"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div ng-view> </div> </body> </html>
編輯對其進行修改，以便您的工廠位於自己的模塊中並作為對應用程序模塊的依賴項注入，而不是位於應用程序模塊本身上，這是恕我直言的，它傾向於更好的體系結構（大多數情況下，我給每個單獨的工廠都是自己的模塊，但為了簡潔起見，我將其簡化了）
成功返回數據的AngularJS路由解析產生未定義的值
[英]Angularjs route resolve that successfully returns data produces undefined value
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.