Cara menambahkan string kueri ke URL di Angular ui-router

Saya cukup baru mengenal AngularJS. Saya menggunakan ui-router dan node.js sebagai server UI saya untuk panggilan API ke server lain. Saat ini, saya mengalami masalah dalam menambahkan string kueri ke URL bergantung pada input pengguna (pilihan dropdown).

Kode pengontrol AngularJS saya:

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

Layanan AngularJS untuk fungsi di atas:

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
            });
        }
    }
}]);

ui-router di Angular:

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

Di Node.js, saya memiliki rute seperti ini:

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
            });
        }
    });
});

Saya ingin url browser beralih dari /home ke /home?color=Red&&size=Large

Jelas saya tidak melakukan ini dengan benar, url browser saat ini tidak dinamis. Tolong tunjukkan bagaimana melakukan ini dengan benar.


node.js html angularjs angular-ui-router angularjs-routing
person kevin_b    schedule 16.04.2016    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Gunakan opsi reloadOnSearch: false untuk berhenti memuat ulang rute saat ini ketika terjadi perubahan pada parameter status.

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

Pengontrol

$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 Senang mengetahuinya. Terima kasih :-) - person Pankaj Parkar; 17.04.2016
comment
@PankajParker tapi urlnya berubah seperti yang diharapkan, tetapi ketika saya menyalin url dan menempelkannya di tab baru, server tidak dipanggil seperti biasanya - person kevin_b; 17.04.2016
comment
ada cara untuk memperbaikinya? - person kevin_b; 17.04.2016
comment
@jebmarcus pada panggilan data awal, ambil parameter dari parameter status seperti $stateParams.color & $stateParams.size untuk membaca parameter tersebut & meneruskan panggilan ajax.. - person Pankaj Parkar; 17.04.2016
comment
@PankajParker Saya agak bingung dengan apa yang Anda maksud dengan panggilan data awal. Saya rasa masalahnya di sini adalah url saat ini seperti ini: localhost:3000/# /home?color=Red&size=Large tapi saya kembali $http Saya punya url: 'results' bukan 'home - person kevin_b; 17.04.2016
comment
@jebmarcus Maksud saya ketika status Anda dimuat.controller dipakai dengan status itu, di titik awal pengontrol lakukan $scope.myColor = $stateParams.color & $scope.mySize = $stateParams.size jadi saat membuat ajax, Anda tidak perlu khawatir tentang meneruskan parameter - person Pankaj Parkar; 17.04.2016
comment
@PankajParker Saya mencobanya dan sekarang masih ada masalah. url sebenarnya tidak membuat panggilan API apa pun. Saya akan memposting pertanyaan baru dan menghubungkan Anda - person kevin_b; 17.04.2016
comment
@jebmarcus URL tidak akan melakukan panggilan secara otomatis, Anda harus melakukannya secara manual. Tentu tambahkan pertanyaan baru.. sehingga orang lain juga dapat berpartisipasi untuk membantu Anda. - person Pankaj Parkar; 17.04.2016
comment
silakan lihat jika Anda bisa: stackoverflow.com/questions/36670613/ - person kevin_b; 17.04.2016