Как добавить строки запроса к URL-адресу в Angular ui-router

Я новичок в AngularJS. Я использую ui-router и node.js в качестве своего сервера пользовательского интерфейса для вызовов API на другой сервер. Прямо сейчас у меня возникают проблемы с добавлением строк запроса к URL-адресу в зависимости от ввода пользователя (выпадающего списка).

Мой код контроллера AngularJS:

$scope.getResults = function() {
    server.getResults($scope.myColor, $scope.mySize)
    .success(function(data) {
        results = data;
    });
};

Служба AngularJS для вышеуказанной функции:

app.factory('server', ['$http', function($http){
    return { 
        getResults : function(color, size) {
            var req = {};
            req.color = color;
            req.size = size;

            return $http({
                method: 'GET', 
                url: 'results',
                params : req
            });
        }
    }
}]);

пользовательский интерфейс в Angular:

$stateProvider.state('home', {
    url: '/home',
    templateUrl: '/home.html',
    controller: 'MainCtrl',
    data:{ 
       pageTitle: 'blah' 
    }
})

В Node.js у меня такой маршрут:

app.get("/results", function (req, res) {

    var api = 'some api call/' + req.query.color + '/' + req.query.size;

    request(api, function (error, response, api) {

        if (!error && response.statusCode == 200) {
            res.json({
                Color: req.query.color, 
                Size: req.query.size,
                Answer: api
            });
        }
    });
});

Я хочу, чтобы URL-адрес браузера переходил с /home на /home?color=Red&&size=Large

Очевидно, я делаю это неправильно, URL-адрес браузера сейчас не динамический. Пожалуйста, покажите, как это сделать правильно.


node.js html angularjs angular-ui-router angularjs-routing
person kevin_b    schedule 16.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте параметры reloadOnSearch: false, чтобы остановить перезагрузку текущего маршрута при изменении параметров состояния.

$stateProvider.state('home', {
    url: '/home?color&size',
    templateUrl: '/home.html',
    controller: 'MainCtrl',
    data:{ 
       pageTitle: 'blah' 
    },
    reloadOnSearch: false //would not refresh state, for location changes.
})

Контроллер

$scope.getResults = function() {
    //change parameter of URL usingn $location.search.
    $location.search('color', $scope.myColor);
    $location.search('size', $scope.mySize);
    server.getResults($scope.myColor, $scope.mySize)
    .success(function(data) {
        results = data;
    });
};
person Pankaj Parkar    schedule 16.04.2016
comment
@jebmarcus Рад это знать. Спасибо :-) - person Pankaj Parkar; 17.04.2016
comment
@PankajParker, кстати, URL-адрес меняется, как и ожидалось, но когда я копирую URL-адрес и вставляю его на новую вкладку, сервер не вызывается, как обычно - person kevin_b; 17.04.2016
comment
любой способ исправить это? - person kevin_b; 17.04.2016
comment
@jebmarcus при начальном вызове данных берет параметр из параметров состояния, таких как $stateParams.color и $stateParams.size, чтобы прочитать этот параметр и передать в вызове ajax. - person Pankaj Parkar; 17.04.2016
comment
@PankajParker Я немного сбит с толку тем, что вы подразумеваете под вызовом исходных данных. Я думаю, что проблема здесь в том, что сейчас URL-адрес выглядит следующим образом: localhost:3000/# /home?color=Red&size=Large, но я возвращаю $http. У меня есть URL-адрес: «результаты», а не «домой». - person kevin_b; 17.04.2016
comment
@jebmarcus Я хотел сказать, что когда ваше состояние загружается. Контроллер создается с этим состоянием, в начальной точке контроллера выполните $scope.myColor = $stateParams.color и $scope.mySize = $stateParams.size, поэтому при создании ajax вам не нужно беспокоиться о передаче параметра - person Pankaj Parkar; 17.04.2016
comment
@PankajParker Я попробовал это, и проблема все еще есть. url на самом деле не делает никаких вызовов API. Я собираюсь опубликовать новый вопрос и связать вас - person kevin_b; 17.04.2016
comment
URL-адрес @jebmarcus не будет автоматически звонить, вам нужно сделать это вручную. Конечно, добавьте новый вопрос... чтобы другие люди тоже могли принять участие, чтобы помочь вам. - person Pankaj Parkar; 17.04.2016
comment
пожалуйста, посмотрите, если можете: stackoverflow.com/questions/36670613/ - person kevin_b; 17.04.2016