AngularJS - 如何从非单页应用程序中的干净 URL 读取 URL 参数答案

【问题标题】：AngularJS - How to read URL parameter from clean URL in non single page appAngularJS - 如何从非单页应用程序中的干净 URL 读取 URL 参数
【发布时间】：2014-12-11 14:42:47
【问题描述】：

我目前正在进行一个大型重构项目，我的团队正在用更现代的方法替换应用程序中的旧功能。

我们正在朝着单页面应用程序的方向发展，但在此之前，我们正在用 AngularJS 功能替换单个独立的网页。

我们的后端是 ASP.NET MVC 应用程序，我不得不使用我目前拥有的任何东西；因此 URL 等需要保持给定格式：

http://example.com/controller/action/id

如何在我的 AngularJS 控制器中读取 URL 部分，而不使用 AngularJS 单页应用程序主要使用的所谓哈希样式 URL？

例如；我去/user/edit/1，需要以某种方式在我的AngularJS控制器中获取'1'的ID。

任何帮助将不胜感激！

【问题讨论】：

我认为将 AngularJS 作为不同的应用程序添加到每个页面不是一个好方法。您可以使用重构页面和路由器来实现单页面应用程序，该路由器将在尚未重构时重定向到旧页面。

标签： javascript angularjs url routes

【解决方案1】：

$location 服务可以在这里为您提供帮助。根据文档https://code.angularjs.org/1.2.15/docs/guide/$location

$location 服务为只读部分提供 getter 方法 URL（absUrl、协议、主机、端口）和 getter/setter 方法 url、路径、搜索、哈希：

【讨论】：

感谢您的回答！研究了一下，看起来它是我可以使用的东西，但你知道有什么其他方法可以做到这一点吗？首选方法是自动定义 URL 的格式并从那里解析 id 值以供控制器使用。您可以在 ngRoute 模块中执行类似的操作，但无需定义控制器、模板等，只需将 URL 部分传递给控制器。
我不知道是否有现成的东西，但您始终可以创建自己的服务来解析 url 并以一致的方式提供数据。
谢谢。我按照您的建议编写了一个服务，并添加了定义路由的可能性，就像在 ngRoute 模块中一样。与 $location 配合得很好。感谢您为我指明了正确的方向！
这很有帮助，但请记住，只要 url 的服务器模式遵循特定约定，您的服务就可以正常工作。

【解决方案2】：

这样定义你的路线

angular.module('app', [])
.config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/user/edit/:id', {
    templateUrl: '/edit.html',
    controller: 'editCtrl'
  })
}]);

// 在你的控制器内部你这样做

angular.module('app').controller('editCtrl', ['$scope', '$routeParams', function($scope, $routeParams){
   // $routeParams is the key here
   // you can access it by doing

   console.log($routeParams.id)
}])

【讨论】：

感谢您的回答。问题是，我没有使用模板，因为它不是单页应用程序。此外，我在 HTML 文档中定义了使用的控制器，因此不能真正使用 ngRoute 模块。是否可以在不定义控制器和模板的情况下使用 ngRoute 并且只将路由值传递给控制器？