Menu
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>
(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
Is the above syntax not supported these days? Should I be doing something like: example.com/foo/123/bar/345 instead?
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.
Thanks for any pointers.
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);
}
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.
968
You can inject the $location service if you are using html5 mode.
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);
});
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.
128
You can use $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
40
answered Nov 14 '22 23:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With