2016-04-16 17 views
1

AngularJSはかなり新しいです。私は別のサーバーへのAPI呼び出しのUIサーバーとしてui-routerとnode.jsを使用しています。今、私はユーザーの入力(ドロップダウンの選択)に応じてURLにクエリ文字列を追加するのに問題があります。AngularJiルータのURLにクエリ文字列を追加する方法

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

UI-ルータ:上記の機能のための

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

AngularJSサービスのNode.jsで

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

、私が持っています私のルートは次のようになります:

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が/自宅へ/自宅から行くしたいですか?大

はもちろん、私はこの権利を致しておりませんカラー=レッド& &サイズは=、ブラウザのURLは今、ダイナミックではありません。これを正しく行う方法を示してください。

答えて

1

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

パーフェクトあなたにそれを知ってうれしい –

+0

@jebmarcusに感謝します。ありがとうございます:-) –

+0

@PankajParker btw URLが期待どおりに変更されますが、URLをコピーして新しいタブに貼り付けると、サーバーが正常に表示されないようになります –