Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the url parameters using AngularJS

HTML source code

<div ng-app="">     <div ng-controller="test">       <div ng-address-bar browser="html5"></div>       <br><br>       $location.url() = {{$location.url()}}<br>       $location.search() = {{$location.search('keyword')}}<br>       $location.hash() = {{$location.hash()}}<br>            keyword valus is={{loc}} and ={{loc1}}   </div> </div> 

AngularJS source code

<script> function test($scope, $location) {   $scope.$location = $location;   $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');   $scope.loc1 = $scope.$location.search().keyword ;         if($location.url().indexOf('keyword') > -1){             $scope.loc= $location.url().split('=')[1];         $scope.loc = $scope.loc.split("#")[0]             }   }  </script> 

Here the variables loc and loc1 both return test as the result for the above URL. Is this the correct way?

like image 227
praveenpds Avatar asked Aug 01 '12 11:08

praveenpds


People also ask

How to get the URL params in AngularJS?

To use params simply append them like this: $routeProvider. when('/view1/:param1/:param2', { templateUrl: 'partials/partial1. html', controller: 'MyCtrl1' });

How do I find the parameter of a URL?

For getting the URL parameters, there are 2 ways: By using the URLSearchParams Object. By using Separating and accessing each parameter pair.

What is $location in AngularJS?

Overview. The $location service parses the URL in the browser address bar (based on the window. location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.

What is location absUrl ()?

$location.absUrl() We can get full url of current web page. $location.url() It returns url without base prefix.


2 Answers

I know this is an old question, but it took me some time to sort this out given the sparse Angular documentation. The RouteProvider and routeParams is the way to go. The route wires up the URL to your Controller/View and the routeParams can be passed into the controller.

Check out the Angular seed project. Within the app.js you'll find an example for the route provider. To use params simply append them like this:

$routeProvider.when('/view1/:param1/:param2', {     templateUrl: 'partials/partial1.html',         controller: 'MyCtrl1' }); 

Then in your controller inject $routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {   var param1 = $routeParams.param1;   var param2 = $routeParams.param2;   ... }]); 

With this approach you can use params with a url such as: "http://www.example.com/view1/param1/param2"

like image 88
Jeff Avatar answered Sep 29 '22 20:09

Jeff


While routing is indeed a good solution for application-level URL parsing, you may want to use the more low-level $location service, as injected in your own service or controller:

var paramValue = $location.search().myParam;  

This simple syntax will work for http://example.com/path?myParam=paramValue. However, only if you configured the $locationProvider in the HTML 5 mode before:

$locationProvider.html5Mode(true); 

Otherwise have a look at the http://example.com/#!/path?myParam=someValue "Hashbang" syntax which is a bit more complicated, but have the benefit of working on old browsers (non-HTML 5 compatible) as well.

like image 42
Javarome Avatar answered Sep 29 '22 20:09

Javarome