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

Ric*_*cky 5 javascript angularjs

这里是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>
Run Code Online (Sandbox Code Playgroud)

(这不是完整的代码,但你明白了 - 非常简单)

我之前从未做过"客户端"查询解析.什么是正确的方法?我过去发过一个问题,但我没有得到任何答案.谷歌搜索也没有帮助.

我的网址通常采用以下形式: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);
}
Run Code Online (Sandbox Code Playgroud)

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

Dav*_*d L 7

$location如果您使用的是html5模式,则可以注入该服务.

因为您使用的是没有基本根的URL(例如!或#),所以需要显式添加<base>定义应用程序"根"的标记,或者配置$locationProvider为不需要基本标记.

HTML:

<head>
  <base href="/">
  ...
</head>
<body>
    <div ng-controller="ParamsCtrl as vm">
        ...
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

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);
});
Run Code Online (Sandbox Code Playgroud)

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