35

我想从当前 URL 中提取数据并在控制器中使用它。例如我有这个网址：

app.dev/backend/surveys/2

我要提取的位：

app.dev/backend/ :type / :id

Angular 中有什么可以帮助我完成这项任务的吗？

4

6 回答 6

53

使用 . 从 URL 获取参数ngRoute。这意味着您需要在应用程序中包含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进行路由。它更灵活，提供更多功能，文档很棒，被认为是 Angular 的最佳路由库。

于 2014-03-28T16:15:24.160 回答
14

您可以注入$routeParams控制器并访问解析路由时使用的所有参数。

例如：

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

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

有关更多信息，请参阅角度 $routeParams 文档。

于 2013-12-18T10:46:31.560 回答
5

最好是生成像这样的 url

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

然后使用

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

并在控制器中注入 $location。

于 2017-01-30T17:16:24.390 回答
3

在您的路线配置中，您通常定义一个路线，例如，

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

然后，您可以使用$route.current.params 或在控制器中获取解析对象中的路由，$routeParams. 在任何一种情况下，参数都是使用路由的映射提取的，因此param1可以$routeParams.param1在控制器中访问。

编辑：另请注意，映射必须准确

/some/folder/:param1

只会匹配一个参数。

/some/folder/:param1/:param2

只会匹配两个参数。

这与大多数动态服务器端路由有点不同。例如 NodeJS (Express) 路由映射，您只能提供具有 X 个参数的单个路由。

于 2013-12-18T10:46:36.453 回答
2

例如：网址/：id

var sample= app.controller('sample', function ($scope, $routeParams) {
  $scope.init = function () {
    var qa_id = $routeParams.qa_id;
  }
});
于 2015-09-02T17:00:36.257 回答
1

只需注入 routeParams 服务：

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

于 2013-12-18T10:46:36.890 回答