如何使用 AngularJS 获取 url 参数

javascript angularjs routeparams

2022-08-30 01:17:07

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>

这里的变量和两者都返回 test 作为上述 URL 的结果。这是正确的方法吗？locloc1

答案 1

我知道这是一个老问题，但是鉴于稀疏的Angular文档，我花了一些时间来解决这个问题。RouteProvider 和 routeParams 是要走的路。路由将 URL 连接到控制器/视图，路由参数可以传递到控制器。

查看 Angular 种子项目。在应用程序中.js您将找到路由提供程序的示例。要使用参数，只需像这样附加它们：

$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;
  ...
}]);

通过这种方法，您可以将参数与URL一起使用，例如：“http://www.example.com/view1/param1/param2"

答案 2

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

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

此简单语法适用于。但是，仅当您在 HTML 5 模式下配置了时：http://example.com/path?myParam=paramValue$locationProvider

$locationProvider.html5Mode(true);

否则，请查看 http://example.com/#!/path?myParam=someValue“Hashbang”语法，该语法有点复杂，但也有在旧浏览器（非HTML 5兼容）上工作的好处。