Angular 1 - 獲取當前URL參數

Question

我想從當前URL中提取數據並在控制器中使用它。 例如，我有這個網址：

app.dev/backend/surveys/2

我要提取的位：

app.dev/backend/：類型 /：ID

Angular中有什么可以幫助我完成這項任務嗎？

Answer 1

使用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); 。 網址將使用hashbang（ /#/ ）。

有關路由的更多信息可以在官方angular $ route API文檔中找到 。

---

旁注：這個問題是如何使用ng-Route來解決這個問題，但我建議使用ui-Router進行路由。 它更靈活，提供更多功能，文檔很棒，它被認為是角度最佳的路由庫。

Answer 2

您可以將$routeParams注入控制器並訪問路徑解析時使用的所有參數。

例如：

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

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

有關詳細信息，請參閱angular $ routeParams文檔 。

Answer 3

更好的是會生成url之類的

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

然后使用

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

並在控制器中注入$ location。

Answer 4

在您的路線配置中，您通常會定義一條路線，

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

然后，您可以使用$route.current.params或在控制器$routeParams獲取resolve對象中的$routeParams 。 在任何一種情況下，使用路由的映射來提取參數，因此可以通過控制器中的$routeParams.param1訪問param1 。

編輯 ：還要注意映射必須准確

/some/folder/:param1

只會匹配一個參數。

/some/folder/:param1/:param2 

只會匹配兩個參數。

這與大多數動態服務器端路由略有不同。 例如NodeJS（Express）路由映射，其中您只能提供具有X個參數的單個路由。

Answer 5

例如：url /：id

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

Answer 6

只需注入routeParams服務：

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