current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 134 down vote favorite
51

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>

Angular.js 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?

share|improve this question
1  
You may want to check out $routeParams. – Nick Heiner Nov 8 '12 at 22:37
    
Not clear what you're asking here... the $routeParams and $location#methods docs should get you started – deck Sep 6 '13 at 6:44
6  
Please consider adding a comment when voting down so that the question can be improved. Thanks. – praveenpds Aug 13 '14 at 12:17
up vote 232 down vote

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; //change here from param1 to param2
  ...
}]);
share|improve this answer
1  
Note that the last line of this example }); should be }]); – Andrew Lank Sep 18 '13 at 17:12
24  
Also can get other arbitrary params in the query string form /view/1/2?other=12 with $routeParams.other – DavidC Aug 17 '14 at 21:04
    
I think you have the 'var param1' repeated in your controller. I could not edit such a simple change. – Tom May 14 at 4:35
    
Angular make it so easy, and also your answer is so nice descriptive – Kermani Aug 3 at 8:25
    
Assign and send example: var param1 = "abc"; $location.path('/view1/:' + param1);$route.reload(); – Robot70 Aug 3 at 20:09
up vote 99 down vote

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.

share|improve this answer
9  
it seems like you have to add $locationProvider.html5mode(true) as a module config like so: angular.module("myApp", []). config(function($locationProvider) { $locationProvider.html5Mode(true); }); – sq1020 Aug 4 '14 at 16:57
4  
And html5Mode requires a <base href="http://example.com/en/" /> tag in your index.html. – cespon Mar 31 '15 at 10:33
1  
what I like about your solution is that you can even pass objects, and you get them as object. – Shilan Nov 26 '15 at 12:39
    
It's also possible to not add the <base> tag and specify it like this: .config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }]) – Guillaume Nov 11 at 22:42
up vote 20 down vote

If you're using ngRoute, you can inject $routeParams into your controller

http://docs.angularjs.org/api/ngRoute/service/$routeParams

If you're using angular-ui-router, you can inject $stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

share|improve this answer
1  
For $stateParams to show query parameters, I had to specify them when defining the states, as shown in github.com/angular-ui/ui-router/wiki/… – Parziphal Jul 22 '14 at 21:14
up vote 1 down vote

If the answers already posted didn't help, one can try with $location.search().myParam; with URLs http://example.domain#?myParam=paramValue

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.