How to get the url parameters using angular js

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?


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; //change here from param1 to param2
  ...
}]);

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 "Hashbang" syntax which is a bit more complicated, but have the benefit of working on old browsers (non-HTML 5 compatible) as well.


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

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


If the answers already posted didn't help, one can try with $location.search().myParam; with URLs



 MORE:


 ? Unable to load css and other files when using ngRoute AngularJS
 ? Angular ngRoute - not load the html correctly
 ? angularjs - how do i pass list to other html?
 ? How to get parameters value using $routeParams from URL in angular js?
 ? How to pass input value to different route using angular2?
 ? How to send empty string in routeparams in angular Js?
 ? Condition in queryParams angular2
 ? How do I get routeparams in angularjs
 ? Passing ID parameter from url to a php script using $routeParams in AngularJS?
 ? AngularJS infinite loop when routeParams not null