在 AngularJS 中读取 URL 参数 - 一种简单的方法？答案

【问题标题】：Reading URL parameters in AngularJS - A simple way?在 AngularJS 中读取 URL 参数 - 一种简单的方法？
【发布时间】：2015-09-30 13:32:14
【问题描述】：

这里是 Angular 的新手。我来自PHP和ASP背景，我们读取参数的方式是这样的：

<html>
<head>
    <script type="text/javascript">
        var foo = <?php echo $_GET['foo']; ?>;
        var bar = <?php echo $_GET['bar']; ?>;

        $(document).ready(function() {
            alert('Foo is: ' + foo + ' and bar is: ' + bar);
        });
    </script>
<head>

（这不是完整的代码，但你明白了——很简单）

我以前从未做过“客户端”查询解析。什么是正确的方法？我过去发布了一个问题，但我没有得到任何答案。谷歌搜索也无济于事。

我的网址通常采用以下形式：example.com?foo=123&bar=456

现在不支持上述语法吗？我应该这样做：example.com/foo/123/bar/345 代替吗？

我愿意将我的 URL 结构更改为与 Angular 完全兼容的东西，但需要指出正确的方向。例如，我听说过 ngRoute，但我什至不知道从哪里开始。这是正确的方法吗？

我过去曾发布过一个问题，但没有得到太多帮助，因此我重新发布此问题并提供更多信息，以便更清楚。

感谢您的任何指点。

编辑 - 使用 $location

注意，我尝试过使用 $location，但这对我来说并不成功。见以下代码：

angular.module('myApp')
    .controller('MyController', ['$location', MyController]);

function MyController($location) {
    var params = $location.search();

    alert('foo is: ' + params.foo + ' and bar is: ' + params.bar);
}

注意：我已经阅读了一些关于设置 $locationProvider.html5Mode(true) 以使这种查询解析方式起作用的内容；但是，我也没有成功。

【问题讨论】：

Get query string using Angularjs 的可能重复项
使用 $routeParams docs.angularjs.org/api/ngRoute/service/$routeParams
@Johan 这需要引用 ngRoute 并且 OP 从未说过他们正在使用 ngRoute。
他也没说他没用..

标签： javascript angularjs

【解决方案1】：

如果您使用的是html5模式，您可以注入$location服务。

因为您使用的 URL 没有基本根（例如 ! 或 #），所以您需要显式添加定义应用程序“根”的 <base> 标记，或者您可以将 $locationProvider 配置为不使用需要一个基本标签。

HTML：

<head>
  <base href="/">
  ...
</head>
<body>
    <div ng-controller="ParamsCtrl as vm">
        ...
    </div>
</body>

JS：

app.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);

    // or

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });    
}]);

app.controller("TestCtrl", ['$location', function($location) {
    var params = $location.search();
    alert('Foo is: ' + params.foo + ' and bar is: ' + params.bar);
});

值得注意的是，您可以添加路由器库，例如 ngRoute、ui-router 或新的未完成的组件路由器。这些路由器依赖于符号（！或#）的基本路由，并将符号之后的所有内容定义为由路由器控制的客户端路由。这将允许您的 Angular 应用程序作为单页应用程序运行，并允许您访问 $routeParams 或等效的 ui-router。

【讨论】：

像魅力一样工作！谢谢你！ @大卫L。我已经为此挠头太久了！所以这是我一直习惯的 URL 结构。但是，我觉得这不是做事的“角度”方式，它主要是为了兼容性。你有这方面的cmet吗？
很高兴它成功了！我个人的偏好是使用某种路由器库。我使用 ngRoute 取得了很大的成功，使用 # 来实现向后兼容性。如果您按照这些思路进行操作，您将不再需要执行这些 base/locationprovider 向后兼容黑客，包括不再需要 html5Mode。

【解决方案2】：

您可以使用$location.search()。

var parameters = $location.search();

console.log(parameters);
-> object{
    foo: foovalue,
    bar: barvalue
   }

所以这些值可以通过parameters.foo 和parameters.bar 访问

【讨论】：