web-dev-qa-db-ja.com

Angular 1-現在のURLパラメーターを取得

現在のURLからデータを抽出し、コントローラーで使用したい。たとえば、私はこのURLを持っています：

app.dev/backend/surveys/2

私が抽出したいビット：

app.dev/backend/ ：type/：id

Angularには、このタスクに役立つ何かがありますか？

javascriptangularjsngroute
35
sarunast

ngRouteを使用してURLからパラメーターを取得するには。つまり、アプリケーションに angular-route.js を依存関係として含める必要があります。公式の ngRouteドキュメント でこれを行う方法の詳細。

質問の解決策：

// You need to add 'ngRoute' as a dependency in your app
angular.module('ngApp', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
        // configure the routing rules here
        $routeProvider.when('/backend/:type/:id', {
            controller: 'PagesCtrl'
        });

        // enable HTML5mode to disable hashbang urls
        $locationProvider.html5Mode(true);
    })
    .controller('PagesCtrl', function ($routeParams) {
        console.log($routeParams.id, $routeParams.type);
    });

$locationProvider.html5Mode(true);を有効にしない場合。 URLはhashbang（/#/）を使用します。

ルーティングの詳細については、公式のangular $ route API documentation をご覧ください。

サイドノート：この質問はng-Routeを使用してこれを達成する方法に答えていますが、使用することをお勧めします ui-Router ルーティング用。より柔軟で、より多くの機能を提供し、ドキュメントは素晴らしく、Angularに最適なルーティングライブラリと見なされます。

53
sarunast

$routeParamsをコントローラーに挿入し、ルートが解決されたときに使用されたすべてのパラメーターにアクセスできます。

例えば。：

// route was: app.dev/backend/:type/:id

function MyCtrl($scope, $routeParams, $log) {
    // use the params
    $log.info($routeParams.type, $routeParams.id);
};

詳細については、 angular $ routeParams documentation を参照してください。

14
fdomig

より良いのようなURLを生成しているだろう

app.dev/backend?type=surveys&id=2

そして使用する

var type=$location.search().type;
var id=$location.search().id;

コントローラに$ locationを挿入します。

4
Himanshu Chandra

ルート構成では、通常、次のようなルートを定義します。

.when('somewhere/:param1/:param2')

その後、$route.current.paramsを使用して解決オブジェクトでルートを取得するか、$routeParamsコントローラーでルートを取得できます。いずれの場合も、ルートのマッピングを使用してパラメーターが抽出されるため、コントローラーのparam1から$routeParams.param1にアクセスできます。

編集：また、マッピングは正確でなければならないことに注意してください

/some/folder/:param1

単一のパラメーターのみに一致します。

/some/folder/:param1/:param2

2つのパラメーターのみに一致します

これは、ほとんどの動的サーバー側ルートとは少し異なります。たとえば、X個のパラメーターを持つ単一のルートのみを提供できるNodeJS（Express）ルートマッピング。

3
Index

例：url /：id

var sample= app.controller('sample', function ($scope, $routeParams) {
  $scope.init = function () {
    var qa_id = $routeParams.qa_id;
  }
});
2
NgocSon

RouteParamsサービスを挿入するだけです：

http://docs.angularjs.org/api/ngRoute.$routeParams

1
xmysteriox