New to Angular here. I come from a PHP and ASP background, where the way we read parameters is like this:
这里是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>
(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.
我以前从未做过“客户端”查询解析。什么是正确的方法?我过去发过一个问题,但我没有得到任何答案。谷歌搜索也没有帮助。
My URL is typically is in the form of: example.com?foo=123&bar=456
我的网址通常采用以下形式:example.com?foo = 123&bar = 456
Is the above syntax not supported these days? Should I be doing something like: example.com/foo/123/bar/345 instead?
这些天是不支持上面的语法?我应该做类似的事情:example.com/foo/123/bar/345吗?
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?
我愿意改变我的URL结构以获得与Angular一起干净利落的东西,但需要指向正确的方向。例如,我听说过ngRoute,但我不知道从哪里开始。这是正确的方法吗?
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.
我过去发过一个问题,但没有得到太多帮助,所以我重新发布了更多信息,以便更清楚。
Thanks for any pointers.
谢谢你的任何指示。
Edit - using $location
Note, I've tried using $location, but I this has been unsuccessful for me. See code below:
注意,我已经尝试过使用$ 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);
}
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.
注意:我已经阅读了有关设置$ locationProvider.html5Mode(true)的内容,以使这种查询解析方式起作用;但是,我也没有成功。
2 个解决方案
#1
5
You can inject the $location
service if you are using html5 mode.
如果您使用的是html5模式,则可以注入$ location服务。
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.
因为您使用的是没有基本根的URL(例如!或#),所以需要显式添加定义应用程序“根”的
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);
});
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.
值得注意的是,您可以添加路由器库,例如ngRoute,ui-router或新的未完成的组件路由器。这些路由器依赖于符号(!或#)之外的基本路由,并将符号后面的所有内容定义为由路由器控制的客户端路由。这将允许您的Angular应用程序作为单页应用程序运行,并允许您访问$ routeParams或ui-router等效项。
#2
1
You can use $location.search()
.
您可以使用$ location.search()。
var parameters = $location.search();
console.log(parameters);
-> object{
foo: foovalue,
bar: barvalue
}
SO these values will be accessible with parameters.foo
and parameters.bar
因此可以使用parameters.foo和parameters.bar访问这些值
#1
5
You can inject the $location
service if you are using html5 mode.
如果您使用的是html5模式,则可以注入$ location服务。
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.
因为您使用的是没有基本根的URL(例如!或#),所以需要显式添加定义应用程序“根”的
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);
});
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.
值得注意的是,您可以添加路由器库,例如ngRoute,ui-router或新的未完成的组件路由器。这些路由器依赖于符号(!或#)之外的基本路由,并将符号后面的所有内容定义为由路由器控制的客户端路由。这将允许您的Angular应用程序作为单页应用程序运行,并允许您访问$ routeParams或ui-router等效项。
#2
1
You can use $location.search()
.
您可以使用$ location.search()。
var parameters = $location.search();
console.log(parameters);
-> object{
foo: foovalue,
bar: barvalue
}
SO these values will be accessible with parameters.foo
and parameters.bar
因此可以使用parameters.foo和parameters.bar访问这些值