Javascript 如何使用AngularJS获取url参数

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>

$location.url（）={{{$location.url（）}}

$location.search（）={{$location.search（'keyword'）}}

$location.hash（）={{{$location.hash（）}}

关键字valus={loc}}和={{loc1}}

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>

功能测试（$scope，$location）{
$scope.$location=$location；
$scope.ur=$scope.$location.url（'www.html.com/x.html？关键字=test#/x/u'）；
$scope.loc1=$scope.$location.search（）.keyword；
如果（$location.url（）.indexOf（'keyword'）>-1）{
$scope.loc=$location.url（）.split（'='）[1]；
$scope.loc=$scope.loc.split（“#”）[0]
}
}

---

这里变量

loc

和

loc1

都返回测试作为上述URL的结果。这是正确的方法吗？

我知道这是一个老问题，但考虑到稀疏的角度文档，我花了一些时间来解决这个问题。路由提供程序和路由图是一条可行之路。路由将URL连接到控制器/视图，并且可以将路由图传递到控制器中

看看这个项目。在app.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一起使用，例如：

---

“”

虽然路由确实是应用程序级URL解析的一个很好的解决方案，但您可能希望使用更低级的

$location

服务，就像注入到您自己的服务或控制器中一样：

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

这个简单的语法适用于

http://example.com/path?myParam=paramValue

。但是，仅当您在以下情况之前在HTML 5模式下配置了

$locationProvider

：

$locationProvider.html5Mode(true);

---

否则，请看一看“Hashbang”语法，它有点复杂，但也有在旧浏览器（不兼容HTML 5）上工作的好处。

如果您使用的是ngRoute，您可以将

$routeParams

注入控制器中

如果您使用的是angular ui路由器，则可以插入

$stateParams

---

如果已经发布的答案没有帮助，可以尝试使用 $location.search（）.myParam；

---

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

首先在URL中，您需要将语法“#”放在参数之前，如本例所示

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

然后在控制器中，将$location放入函数中，并使用$location.search（）获取其URL参数

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

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

}]);

---

获取url值的简单易行的方法

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"

函数GetURLParameter（参数）{ var-url； var搜索； var解析； var计数； var回路； 动词短语； url=window.location.href； search=url.indexOf（“？”）； 如果（搜索<0）{ 返回“”； } 搜索短语=参数+“=”； parsed=url.substr（search+1）.split（“&”）； 计数=解析的长度；

---

对于（loop=0；loop，在将angularjs与express一起使用时

在我的示例中，我使用angularjs和express进行路由，因此使用$routeParams会打乱我的路由。我使用以下代码获得了我所期望的结果：

const getParameters = (temp, path) => {
  const parameters = {};
  const tempParts = temp.split('/');
  const pathParts = path.split('/');
  for (let i = 0; i < tempParts.length; i++) {
    const element = tempParts[i];
    if(element.startsWith(':')) {
      const key = element.substring(1,element.length);
      parameters[key] = pathParts[i];
    }
  }
  return parameters;
};

总而言之，我的控制器是：

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

---

希望有人能帮助你！

你可能想退房。不清楚你要问的是什么……$RoutPARAMS和$Load方法，DOCS应该让你启动，请考虑在投票时添加评论，这样问题就可以改善。谢谢。注意这个例子的最后一行<代码> }；<代码>应该是

}]）

还可以使用

$routeParams以查询字符串形式
/view/1/2？other=12
获取其他任意参数。other

我认为您的控制器中重复了“var param1”。我无法编辑如此简单的更改。请让它变得如此简单，而且您的答案也非常好。描述分配和发送示例：var param1=“abc”$location.path（'/view1/：'+param1）$route.reload（）；对于显示查询参数的

$stateParams

，我必须在定义状态时指定它们，如中所示，似乎您必须添加$locationProvider.html5mode（true）作为模块配置，例如：angular.module（“myApp”，[]）。config（函数（$locationProvider）{$locationProvider.html5Mode（true）；}）；HTML5模式需要在

index.html

中使用

标记。我喜欢您的解决方案，因为您甚至可以传递对象，并将其作为对象获取。也可以不添加标记并按如下方式指定：

.config（['$locationProvider'，function（$locationProvider）{$locationProvider.html5模式({enabled:true，requireBase:false}）；}]）

在Angular 1.5.8中，我不必配置

$locationProvider

就可以工作。

http://example.com/path#?someKey=someVal

，然后是

$location.search（）.someKey/=>“someVal”

这是这里投票率第二高的解决方案…比这一个早3年发布…它适用于查询参数，下面的@jeff的答案是路径变量swindow.location.href实际上是我在我的情况下需要的。不一定总是有一些奇特的角度解决方案。这对我来说是个窍门。

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path()); 

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

{ table: "users", id: "1", place_id: "43", interval: "week" }