從角度服務調用角度路線以加載新視圖和控制器

Question

我正在嘗試通過角度服務調用路由，並且由於使用$http.post ，因此無法獲取要調用的路由。 我可能會犯錯，所以我希望有人可以提出建議或為我指明正確的方向。 最初，我有一個帶有控制器的頁面加載程序，一旦調用搜索命令，它將把帶有請求的json對象傳遞給有角度的服務，然后該服務將調用webAPI將請求傳遞給我的其他業務層。 這是工作流程的邏輯圖。 藍色的響應是一個新的數據對象，它隨用戶搜索結果一起返回到UI。

從我的應用程序，我有以下路線設置

(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中調用route。 進行此調用不會更新頁面URL，因此不會調用路由，也不會加載第二個控制器以顯示結果。 過去，我使用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>

Answer 1

應該能夠使用$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編碼的查詢詞傳遞到url並根據該請求進行請求。 然后，該請求將由searchResultCtrl控制器或路由器配置中的resolve發出。

就像是：

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

路徑將通過以下方式生成：

$location.path('/search/query/' + encodeURIComponent($scope.searchTerm) );