All geek questions in one place

Reading URL Parameters in AngularJS - Easy Way?

New to Angular here. I come from the background of PHP and ASP, where the way to read the parameters is as follows:

<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>

(This is not complete code, but you get the idea - very simple)

I have never done parsing requests on the client side before. What is the correct method? I already asked a question in the past, but I have no answers. Google search does not help.

My URL usually has the form: example.com?foo=123&bar=456

Is the above syntax not supported these days? Should I do something like: example.com/foo/123/bar/345?

I want to change the structure of the url for something that works with Angular, but need to point in the right direction. For example, I heard about ngRoute, but I have no idea where to start. Is this the right approach?

In the past, I asked a question, but it didn’t help me, so I rewrite it with more information to make it more understandable.

Thanks for any pointers.

Edit - using $ location

Notice, I tried using $ location, but for me it was unsuccessful. See the following code:

 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 read something about setting up $ locationProvider.html5Mode (true) to get this request processing style to work; however, I was not successful either.

+5
source share
2 answers

You can enter the $location service if you use html5 mode.

Since you use URLs without a base root (for example, or!), You need to explicitly add a <base> tag that defines the "root" of your application, or you can set $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 a new, incomplete component router. These routers rely on the base route with a symbol (! Or #) and define everything after the symbol as the route on the client side that is controlled by the router. This will allow your Angular application to function as a single-page application and give you access to $ routeParams or the equivalent of ui-router.

+5
source

You can use $location.search() .

 var parameters = $location.search(); console.log(parameters); -> object{ foo: foovalue, bar: barvalue }

SO, these values ​​will be available using parameters.foo and parameters.bar

+1
source

Source: https://habr.com/ru/post/1232627/

More articles:


All Articles