在AngularJS中解析请求的URL的最佳方法

Question

我有一个像这样的网址:

http://www.something.com/project/edit/987654321

使用AngularJS 解析URL 的987654321部分的最佳方法是什么？Angular中是否有任何辅助函数？(我宁愿不使用jQuery)

如果我理解正确,除非您在URL中使用#或启用HTML5模式,否则AngularJS中的路由功能将无法工作.

我们需要在首次加载页面时解析此URL.

Answer 1

我会根据标题回答这个问题,因为我在这里寻找解析网址的方法.这是我在一个提琴页面上找到的答案.

var parser = document.createElement('a');
parser.href = "http://www.example.com";
//At this point it's parsed and all the info is on the parser object
console.log(parser.protocol);
console.log(parser.hash);
console.log(parser.hostname);
console.log(parser.port);
console.log(parser.pathname);
console.log(parser.search);

[更新]
我刚注意到有一个URL类.

var parsedURL = new URL('http://www.example.com');
console.log(parsedURL.hash);
console.log(parsedURL.protocol);
console.log(parsedURL.host);
//etc

Answer 2

您可以使用该$location服务的 $location#path()功能：

# given: url = http://www.something.com/project/edit/987654321
$location.path().split('/').pop();

但是，听起来您遇到了路由问题。查看Angular 路由教程，它展示了如何$routeProvider在配置中正确使用路由app.js。从教程中：

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
       when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      })
      .otherwise( ...)  //omitting remainder of cut/paste

所以你app.js会有一个像这样的路线定义：

ender2050App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/project/edit/:id', {
        templateUrl: 'partials/editor.html',
        controller: 'EditorCtrl'
      })

您的控制器文件（即controllers.js）将具有EditorCtrl注入$routeParams服务来访问id变量的文件。

如果您需要更多定制的解析选项，请查看该$parse服务。