使用AngularJS无法获取URL查询字符串id值，求正确实现方法

我来帮你搞定这个提取URL参数的问题！你现在的代码有两个关键问题导致拿不到id值，咱们一步步修正：

问题分析 #

1. 指令名称错误：你HTML里用的app和controller不是AngularJS的正确指令，应该用ng-app和ng-controller——这是Angular识别应用和控制器的核心指令，写错了就会导致代码无法关联生效。
2. $location默认模式限制：AngularJS默认使用hashbang模式（#!），这会让它把URL中?后面的普通查询参数当成hash的一部分，自然解析不到你要的id，得启用HTML5模式来让$location正确识别这类参数。

正确实现代码 #

JavaScript部分 #

var myApp = angular.module('myApp', []);

// 配置$location为HTML5模式，解析普通URL查询参数
myApp.config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

myApp.controller('test', ['$scope', '$location', function ($scope, $location) {
  // 提取id参数，两种写法都可行，前者更简洁
  var id = $location.search().id;
  // var id = $location.search()['id'];
  alert('提取到的id值：' + id);
}]);

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <!-- HTML5模式下必须配置base href，确保路径解析正确 -->
  <base href="/">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
</head>
<body>
  <!-- 使用Angular官方规定的指令名称 -->
  <div ng-app="myApp" ng-controller="test"></div>
</body>
</html>

额外注意事项 #

• 测试环境要求：如果本地直接打开HTML文件（file://协议），HTML5模式可能无法正常工作，建议把代码部署到HTTP服务器（比如用http-server工具快速启动本地服务），用http://localhost开头的URL访问测试。
• 参数提取兼容性：$location.search().id和$location.search()['id']两种写法都能正确获取参数，选你习惯的就行。

内容的提问来源于stack exchange，提问作者xrcwrn