javascript - 从 Angular 服务调用 Angular 路径以加载新 View 和 Controller

Question

我正在尝试通过 Angular 服务调用路由，但由于我使用的是 $http.post 我无法获取要调用的路由。我可能做错了，所以我希望有人能提出建议或指出正确的方向。最初我有一个带有 Controller 的页面加载，一旦调用搜索命令，它将带有请求的 json 对象传递给 Angular 服务，然后调用 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);
            }
        }
    });



})();

初始页面调用有服务依赖的 Controller

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，然后响应作为对象返回到 View 和新 Controller ，以便它可以呈现搜索结果。我过去曾在 Controller 之间来回传递数据，但是我遇到的问题是使用 Angular 服务在 webapi 中调用路由。进行此调用不会更新页面 URL，因此不会调用路由，也不会加载第二个 Controller 来显示结果。过去，我使用 url http://#/route 调用 Angular 路由，但在本例中，我使用的是带有 ng-click 的输入按钮。我将不胜感激任何关于数据返回如何加载“结果 View ”和 Controller 的建议。使用 Angular 服务时，路由是正确的方法还是有另一种方法来加载 View 和 Controller ？

提前致谢

 <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 Controller 或路由器配置中的 resolve 发出。

类似于:

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

路径将通过以下方式生成:

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