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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21920121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 22:00:05  来源:igfitidea点击:

Best way to parse requested URL in AngularJS

javascriptangularjs

提问by Ender2050

I have a URL like:

我有一个像这样的网址:

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

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

What's the best way to parse the 987654321part of the URL using AngularJS? Are there any helper functions within Angular? (I'd prefer to not use jQuery)

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

If I understand it correctly, the routing functions within AngularJS won't work unless you use a # within the URL or enabled HTML5 mode.

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

We need to parse this URL when the page is first loaded.

我们需要在页面第一次加载时解析这个 URL。

采纳答案by JJ Zabkar

You can use the $locationservice's$location#path()function:

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

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

However, it sounds like you have a routing issue. Check out the Angular Tutorial on Routing, which shows how to correctly use $routeProviderroutes in your app.jsconfiguration. From the tutorial:

但是,听起来您遇到了路由问题。查看Angular Tutorial on Routing,它展示了如何$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

So your app.jswould have a route definition like:

所以你app.js会有一个路由定义,如:

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

And your controller file (i.e., controllers.js) would have the EditorCtrlthat injects the $routeParamsservice to access the idvariable.

并且您的控制器文件(即,controllers.js)将EditorCtrl注入$routeParams服务以访问id变量。

If you need a more customized parsing option, check out the $parseservice.

如果您需要更自定义的解析选项,请查看该$parse服务

回答by Jerinaw

I'll answer the question based on the title because I landed here looking for a way to parse a url as well. Here's the answerI found on a fiddler page.

我将根据标题回答问题,因为我来到这里也是为了寻找解析 url 的方法。这是我在提琴手页面上找到的答案

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);

[Update]
I just noticed there's a URL class.

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

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

回答by Cyril CHAPON

Both the question AND the answer don't respect the title. I landed here trying to search how to parse ANY urlin angular. This question is about parsing the requestedurl. What if I want to parse http://www.google.com??

问题和答案都不尊重标题。我来到这里试图搜索如何以角度解析任何 url。这个问题是关于解析请求的url。如果我想解析怎么办http://www.google.com

Edited it.

编辑了它。