在AngularJS读取URL参数 - 一个简单的方法是什么？ [英] Reading URL parameters in AngularJS - A simple way?
问题描述
新来这里的角。我来自一个PHP和ASP的背景下，我们读到参数的方式是这样的：
New to Angular here. I come from a PHP and ASP background, where the way we read parameters is like this:
<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>
（这不是完整的code，但你的想法 - 很简单的）
(It's not complete code, but you get the idea -- very simple)
我从来没有做过客户端的查询解析。什么是正确的方法是什么？我已经张贴在过去的一个问题，但我没有得到任何答案。谷歌搜索没有任何帮助。
I've never done "client-side" query parsing before. What is the correct method? I've posted a question in the past, but I'm not getting any answers. Google searching is not helping either.
我的URL通常是在形式：example.com?foo=123&bar=456
My URL is typically is in the form of: example.com?foo=123&bar=456
不支持上述语法，这些天？我应该做这样的事情：example.com/foo/123/bar/345呢？
Is the above syntax not supported these days? Should I be doing something like: example.com/foo/123/bar/345 instead?
我愿意改变我的东西，有角的作品干净的URL结构，但需要在正确的方向指向。比如，我听说ngRoute，但我不知道在哪里甚至开始。这是正确的做法？
I'm willing to change my URL structure for something that works cleanly with Angular, but need to be pointed in the right direction. For example, I've heard of ngRoute, but I have no idea where to even start. Is this the correct approach?
我已经张贴在过去的一个问题，但并没有获得太大的帮助，所以更多的信息，我重新张贴这一点，以便它更清楚。
I've posted a question in the past, but didn't get much help, so I'm re-posting this with more information so that it's more clear.
感谢您的任何指针。
请注意，我用$位置试过，但我这个一直未果我。请参见下面code：
Note, I've tried using $location, but I this has been unsuccessful for me. See code below:
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（真）;不过，我一直不成功这一点。
Note: I've read something about setting $locationProvider.html5Mode(true) in order to get this style of query parsing to work; however, I've been unsuccessful with this too.
推荐答案
您，如果您使用的是HTML5模式可以注入 $位置服务。
You can inject the $location service if you are using html5 mode.
由于您使用的URL不带底座根（如A或A＃！），你需要明确添加＆LT;基地＆GT; 标签定义了您的应用程序的根，还是可以配置 $ locationProvider 来不需要基础标签。
Because you are using URLs without a base root (such as a ! or a #), you need to explicitly add a <base> tag that defines the "root" of your application OR you can configure $locationProvider to not require a base tag.
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的路由器或新的，未完成的部分路由器。这些路由器依赖碱航线的关闭符号（！或＃）和符号作为得到由路由器控制一个客户端路由之后限定的一切。这将使你的角应用作为一个单页应用功能，将让您使用$ routeParams或UI路由器等价的。
It is worth noting that you can add a router library such as ngRoute, ui-router or the new, unfinished component router. These routers rely on a base route off of a symbol (! or #) and define everything after the symbol as a client-side route which gets controlled by the router. This will allow your Angular app to function as a Single Page App and will give you access to $routeParams or the ui-router equivalent.
这篇关于在AngularJS读取URL参数 - 一个简单的方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
