Angular 1 - 获取当前 URL 参数答案

【问题标题】：Angular 1 - get current URL parametersAngular 1 - 获取当前 URL 参数
【发布时间】：2014-01-06 11:56:21
【问题描述】：

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

app.dev/backend/surveys/2

我要提取的位：

app.dev/backend/ :type / :id

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

【问题讨论】：

看看$route和$routeParam
我忘了说url是静态的，是从服务器端生成的。不带棱角。如果这甚至改变了任何东西。
不，它是如何生成的并不重要——除非您在应用程序的 .config 块中正确配置它。

标签： javascript angularjs ngroute

【解决方案1】：

使用 ngRoute 从 URL 获取参数。这意味着您需要在应用程序中包含angular-route.js 作为依赖项。更多信息如何做到这一点官方ngRoute documentation。

问题的解决方案：

// 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 documentation 上找到。

旁注： 这个问题是回答如何使用 ng-Route 实现这一点，但我建议使用 ui-Router 进行路由。它更灵活，提供更多功能，文档很棒，被认为是 Angular 的最佳路由库。

【讨论】：

我只是想知道为什么需要 $on('$routeChangeSuccess') 事件处理程序？我问是因为当我实现这个解决方案时（感谢顺便发布它），我发现我的代码中必须有事件处理程序，否则它根本不起作用。更准确地说：它不会用参数的值填充我的 $scope 项，但如果我将事件处理程序留在那里，它就会这样做。我可以接受它，但最初希望在网站完成加载后获取参数。
添加到 Mike 的评论中。如果您在 $rootScope.$on('$routeChangeSuccess', ...) 事件中添加 $routeParams 检查，那么它将为所有路由更改“存储”，并在每次路由更改时执行回调。如果您只想检查当前控制器的路由参数（即只有带有参数的路由），那么只需将 $rootScope.$on(...) 一起删除并直接在控制器中检查 $routeParams功能。
在没有 html5Mode 的情况下为我工作。但我的网址确实有/#/ - 我很酷虽然有哈希网址
是的，我在最后一句话中是说，你将拥有 hashbang url。

【解决方案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 documentation。

【讨论】：

【解决方案3】：

最好生成像

这样的 url

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

然后使用

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

并在控制器中注入 $location。

【讨论】：

这是迄今为止最好的答案。谢谢哥们！

【解决方案4】：

在您的路由配置中，您通常会定义一个类似的路由，

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

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

编辑：还要注意映射必须准确

/some/folder/:param1

只会匹配一个参数。

/some/folder/:param1/:param2

只会匹配两个参数。

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

【讨论】：

所以目前我有这个：$routeProvider.when('/backend/:bookId/:chapterId/:weeep', { controller: 'SurveyPages' }); 但是当我将 $routeParams 传递给 SurveyPages 控制器并使用 console.log() 检查它显示我是空对象吗？我猜我在这里做错了什么。
您是否启用了html5Mode？ $locationProvider.html5Mode(true);

【解决方案5】：

例如： url/:id

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

【讨论】：

通过评论您正在做什么以及为什么，这个答案会更加清晰。您还应该编辑它以正确格式化代码（选择代码并单击看起来像“{}”的按钮）。我自己没有这样做，因为我不确定代码是从第一行还是从第二行开始。

【解决方案6】：

只需注入 routeParams 服务：

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

【讨论】：