[英]AngularJS ng-route how to make http request on resolve
I have a simple template with an input and an anchor link which, upon pressing it, will load another template. 我有一个带有输入和锚点链接的简单模板,按下该链接将加载另一个模板。 I want this second template to fetch the information via a http request. 我希望第二个模板通过http请求获取信息。
I am using ng-route to redirect to the search template by default and to the results template from the path /search/:title, and I am trying to use resolve to make the request before loading the results template ( code in plunker ) 我默认使用ng-route重定向到搜索模板,并从路径/ search /:title重定向到结果模板,并且我试图在加载结果模板之前使用resolve发出请求( 代码在plunker中 )
The main problem I am facing is that when I add the resolve the controller stops being initialized (I guess it will load after the promise is returned). 我面临的主要问题是,当我添加resolve时,控制器将停止初始化(我猜它将在返回promise后加载)。 This means variables such as the search URL are not initialized and the $routeParams are empty when I print them on the controller search function. 这意味着当我在控制器搜索功能上打印变量时,诸如搜索URL之类的变量未初始化,并且$ routeParams为空。
How should I do this? 我应该怎么做?
I am also not sure about the correct syntax for the resolve. 我也不确定解析的正确语法。 Is the first search a scope variable? 第一次搜索是一个范围变量吗?
resolve: {
search: searchController.search
}
For the ones lazy to check on Plunker, here it is the relevant code: 对于那些懒于检查Plunker的人,这里是相关代码:
Routing 路由
.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/search', {
templateUrl: 'templates/search.html'
}).
when('/search/:title', {
templateUrl: 'templates/result.html',
controller: 'searchController',
resolve: {
search: searchController.search
}
}).
otherwise({
redirectTo: '/search'
});
}]);
searchController searchController
var searchController = search.controller('searchController', ["$http", "$scope", "$location", '$rootScope', '$routeParams', function($http, $scope, $location, $rootScope, $routeParams) {
console.log("Controller constructor");
this.searchURL = 'http://www.myapifilms.com/imdb?title=%thetitle%&format=JSON';
$scope.response = '<Response here>';
this.title = '';
this.defer = null;
console.log("PARAMS: " + JSON.stringify($routeParams));
}]);
searchController.search = function searchMovie($q, $routeParams) {
searchController.defer = $q.defer;
var searchString = $routeParams.title;
url = searchController.searchURL.replace('%thetitle%', searchString);
console.log("URL: " + url);
searchController.searchRequest(url);
};
searchController.searchRequest = function(url) {
$http.get(url).success(function(data) {
....
searchController.defer.resolve();
return searchController.defer.promise;
})
.error(function(data, status, headers, config) {
...
searchController.defer.resolve();
return searchController.defer.promise;
})
};
I think you should create a service with .factory and edit accordingly: 我认为您应该使用.factory创建服务并进行相应的编辑:
angular.module('myApp', ['ionic', 'ngRoute', 'starter', 'wc.Directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
})
})
.factory("search", function($q, $http){
return {
getMessage: function(){
//return $q.when("Response");
var promise = $http({ method: 'GET', url: 'your_url'}).success(function(data, status, headers, config) {
return data;
});
return promise;
}
};
})
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/search', {
templateUrl: 'search.html'
}).
when('/search/:title', {
templateUrl: 'result.html',
controller: 'searchController',
/*resolve: {
search: searchController.search
}*/
resolve: {
search: function(search){
return search.getMessage();
}
}
}).
otherwise({
redirectTo: '/search'
});
}
]);
Your plunker forked: http://plnkr.co/edit/Ry4LAl?p=preview 您的朋克派生者: http ://plnkr.co/edit/Ry4LAl?p=preview
I hope you got what you wanted, share back your plunker after you are done for helping others. 我希望您能得到想要的东西,在为他人服务后,将您的朋克分享给大家。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.