从角度服务调用角路由加载新的视图和控制器
问题描述:
我试图调用通过和角度服务的路由,因为我使用$http.post
我无法获取调用的路由。我可能会在这一切都错了,所以我希望有人可以提出一个建议,或指向正确的方向。最初我使用控制器进行页面加载,一旦搜索命令被调用,它将带有请求的json对象传递给一个角度服务,角度服务然后调用webAPI将请求传递到其他业务层。这是工作流程的逻辑图。蓝色响应是一个新的数据对象,用户搜索结果返回到用户界面。 从角度服务调用角路由加载新的视图和控制器
从我的应用程序,我有以下的路线设置
(function() {
app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']).value('ngToastr', toastr);
function router($routeProvider) {
$routeProvider.
when('/search/query', {
templateUrl: '../../AngularTemplates/searchResults.html',
controller: 'searchResultCtrl'
}).
otherwise({
templateUrl: '../../AngularTemplates/splashPage.html'
});
}
app.config(['$routeProvider', router]);
//added toaster as factory so it can be injected into any controller
angular.module('app').factory('ngNotifier', function (ngToastr) {
return {
notify: function (msg) {
ngToastr.success(msg);
},
notifyError: function (msg) {
ngToastr.error(msg);
},
notifyInfo: function (msg) {
ngToastr.info(msg);
}
}
});
})();
初始页面调用其中有一个服务依赖
app.controller('searchController', ['$scope', '$filter', 'searchService', 'ngNotifier', '$log', '$timeout', 'searchAttributes' , function ($scope, $filter, searchService, ngNotifier, $log, $timeout, searchAttributes) {
var vm = this;
vm.search = search;
vm.updateEntities = updateEntitySelection;
//bootstraped data from MVC
$scope.userOptions = searchAttributes.mvcData;
//scoped variables
$scope.searchTerm = null;
//ui container for search response
$scope.searchResponse;
$scope.entityList = [
'Search All ',
'Search in Departments ',
'Search in Automotive '
]
$scope.selectedEntity = 'Search All';
function buildSearchRequest() {
var searchResponse = {
searchTerm: $scope.searchTerm,
pageSize: 10,//this will be set by configuration from the UI
pagesReturned: 0,
entityFilter: $scope.selectedEntity
};
return searchResponse;
}
function onError(msg) {
$log.error('An error has occured: ' + msg.data);
}
function updateEntitySelection(entityName) {
$scope.selectedEntity = entityName;
}
function search() {
var request = buildSearchRequest();
searchService.search(request);
}
}]);
和搜索服务控制器
app.factory('searchService', ['$http', function($http) {
var myEsResults;
function getSearchResults(searchRequest) {
return $http.post('search/query', searchRequest, {}).then(function (response) {
myEsResults = response.data});
}
var getResults = function() {
return myEsResults;
};
return{
search: getSearchResults,
getResults: getResults
};
}]);
我试图完成的是当文档加载启动画面时(显示工作)。当搜索执行时,请求被传递给webapi,然后响应作为objectback返回到视图和一个新的控制器,以便它可以呈现搜索结果。我在过去的控制器之间来回传递数据,但是我卡住的地方是使用角度服务在webapi中调用路由。进行此调用不会更新页面URL,因此不会调用路由,也不会加载第二个控制器来显示结果。在过去,我使用url来调用角路由,但在这种情况下,我使用的输入按钮是ng-click
。我将不胜感激任何有关数据返回如何获得'结果视图'和控制器加载的建议。路由是否正确,或者在使用角度服务时有另一种方法来加载视图和控制器?
在此先感谢
<button type="button" class="btn btn-primary btn-lg" ng-click="vm.search()"><span class="glyphicon glyphicon-search"></span></button>
答
应该能够使用$location.path('/search/query')
function getSearchResults(searchRequest) {
return $http.post('search/query', searchRequest, {}).then(function (response) {
myEsResults = response.data;
$location.path('/search/query');
});
}
但是工作流程似乎将更有意义添加去做,要么routeParams
的网址或搜索查询参数并将url编码的查询条件传递给url并根据该请求提出请求。然后,请求将由searchResultCtrl
控制器或resolve
在路由器配置中完成。
喜欢的东西:
$location.path('/search/query/' + encodeURIComponent($scope.searchTerm));
:
$routeProvider.
when('/search/query/:queryterm', {
templateUrl: '../../AngularTemplates/searchResults.html',
controller: 'searchResultCtrl'
}).
和路径将被生成