如何使用AngularJS获取url参数

Question

HTML源代码

<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源代码

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

这里变量loc和loc1返回测试作为上述URL的结果.这是正确的方法吗？

Answer 1

我知道这是一个老问题,但考虑到稀疏的Angular文档,我花了一些时间来解决这个问题.该RouteProvider和routeParams是要走的路.路由将URL连接到Controller/View,并且routeParams可以传递到控制器.

查看Angular种子项目.在app.js中,您将找到路由提供程序的示例.要使用params,只需将它们添加为:

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

然后在你的控制器中注入$ routeParams:

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

Answer 2

虽然路由确实是应用程序级URL解析的一个很好的解决方案,但您可能希望使用更低级别的$location服务,如在您自己的服务或控制器中注入的:

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

这个简单的语法将适用于http://example.com/path?myParam=paramValue.但是,只有$locationProvider在以下情况下配置了HTML 5模式:

$locationProvider.html5Mode(true);

否则,请查看http://example.com/#!/path?myParam=someValue"Hashbang "语法,这种语法有点复杂,但有利于处理旧浏览器(非HTML 5兼容)好.

Answer 3

如果您正在使用ngRoute,则可以注入$routeParams控制器

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

如果你正在使用angular-ui-router,你可以注入 $stateParams

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

Answer 4

我找到了解决方案如何使用$ location.search（）从URL获取参数

首先在URL中，您需要在参数前加上语法“＃”，例如本示例

"http://www.example.com/page#?key=value"

然后在您的控制器中，将$ location放入函数中，并使用$ location.search（）获取以下网址的网址参数

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);