从角度服务调用角度路径以加载新视图和控制器

时间:2015-10-20 21:54:07

标签: javascript angularjs

我正在尝试调用路由和角度服务,因为我使用$http.post我无法获取调用路由。我可能会犯这个错误,所以我希望有人可以提出建议或指出我正确的方向。最初我有一个带有控制器的页面加载,一旦调用了搜索命令,它就会将带有请求的json对象传递给角度服务,然后调用webAPI将请求传递到我的其他业务层。这是工作流程的逻辑图。蓝色响应是使用用户搜索结果返回到UI的新数据对象。 enter image description here

从我的应用程序中我有以下路线设置

(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,然后响应作为对象返回到视图和新控制器,以便它可以呈现搜索结果。我过去在控制器之间来回传递数据但是我遇到的是使用角度服务来调用webapi中的路由。进行此调用不会更新页面URL,因此不会调用路径,也不会加载第二个控制器来显示结果。在过去,我使用网址http://#/route调用了角度路由,但在这种情况下,我使用的是带ng-click的输入按钮。我将不胜感激任何有关数据返回如何获取“结果视图”和控制器加载的建议。路由是正确的方法还是在使用角度服务时还有另一种加载视图和控制器的方法吗?

提前致谢

 <button type="button" class="btn btn-primary btn-lg" ng-click="vm.search()"><span class="glyphicon glyphicon-search"></span></button>

1 个答案:

答案 0 :(得分:2)

应该可以使用nextDouble()

来完成
$location.path('/search/query')

然而,工作流似乎更有意义的是将 function getSearchResults(searchRequest) { return $http.post('search/query', searchRequest, {}).then(function (response) { myEsResults = response.data; $location.path('/search/query'); }); } 添加到网址或搜索查询参数,并将网址编码的查询字词传递给网址并根据该请求发出请求。然后请求由routeParams控制器或路由器配置中的searchResultCtrl发出。

类似的东西:

resolve

路径将由以下方式生成:

$routeProvider.
        when('/search/query/:queryterm', {
            templateUrl: '../../AngularTemplates/searchResults.html',
            controller: 'searchResultCtrl'
        }).