AngularJS SPA路由获取URL为“/#！”而不是“#”[重复]

Posted 2023-02-22

【中文标题】AngularJS SPA路由获取URL为“/#！”而不是“#”[重复]

【英文标题】：AngularJS SPA routing getting URL as "/#!" instead of "#" [duplicate]

【发布时间】：2017-11-12 19:50:48

【问题描述】：

在我的 SPA AngularJS 应用程序中，我得到的 URL 是 http://localhost:4200/#!/ 而不仅仅是 # (hash bang)。因此，路由似乎无法以通常的方式工作。 我确实通过了这个 *** Question 但没有找到任何解决方案。有人知道摆脱这个额外感叹号的解决方案吗？

编辑： 在我的index.ejs: 我有<a href="#about">about</a>

在我的approutapp.js: 我有

var myapp = angular.module("myApp", ["ngRoute"]);
myapp.config(function($routeProvider) 
    $routeProvider
    .when("/", 
        templateUrl : "/static/list.ejs"
    )
    .when("/about", 
        templateUrl : "/static/about-us.ejs"
    )

);

myapp.config(['$locationProvider', function($locationProvider) 
  $locationProvider.hashPrefix('');
]);

但我仍然得到的 URL：http://localhost:4200/#/!/

然后转到http://localhost:4200/about，页面挂起

【问题讨论】：

是的，但是那里给出的答案不起作用！ :(

怎么不工作了？您能否提供该问题的minimal reproducible example 以供审核？

网址/#/!/与/#!不一样；这看起来可能是你服务器上的东西，而不是有角度的。

在添加$locationProvider.hashPrefix(''); 之前，我得到了http://localhost:4200/#!/。添加您标记为重复的帖子中提供的解决方案后，我收到http://localhost:4200/#/!/

@Pritam，实际上问题似乎出在其他地方。但感谢您尝试提供帮助。这就是我投票的原因:)

【参考方案1】：

尝试使用$locationProvider.hashPrefix('')

原因是：

如果浏览器是html5浏览器angularJS会重定向到#!

否则只有#。

阅读$location 上的此文档以了解更多信息：

Opening a regular URL in a legacy browser -> redirects to a hashbang

URL Opening hashbang URL in a modern browser -> rewrites to a regular URL 

HTML5 模式

在 HTML5 模式下，$location 服务的 getter 和 setter 与 通过 HTML5 历史 API 获取浏览器 URL 地址。这允许 使用常规 URL 路径和搜索段，而不是它们的 hashbang 等价物。如果浏览器不支持 HTML5 History API， $location 服务将回退到使用 hashbang URL 自动地。这使您不必担心是否 显示您的应用的浏览器是否支持历史 API；这 $location 服务透明地使用最佳可用选项。

在旧版浏览器中打开常规 URL -> 重定向到 hashbang URL 在现代浏览器中打开 hashbang URL -> 重写为常规 URL 注意，在这种模式下，AngularJS 会拦截所有链接（以 下面的“Html链接重写”规则）并以某种方式更新url 永远不会执行完整的页面重新加载。

【参考方案2】：

可以在 Angular 版本 > 1.6.x 中观察到这种变化。在以前的版本中，它就像只是 # (hash bang)。 只需要#这样的方式获取url，就可以这样写，

appModule.config(['$locationProvider', function($locationProvider) 
  $locationProvider.hashPrefix('');
]);

此更改是在version 1.6.0 中引入的，您可以看到https://github.com/angular/angular.js/blob/master/CHANGELOG.md#location-due-to。

另外，在这里添加那里写的内容：

$location hash-bang URL 的哈希前缀已从空字符串“”更改为 bang“！”。如果您的应用程序不使用HTML5 mode 或在不支持HTML5 mode 的浏览器上运行，并且您没有指定自己的哈希前缀，那么客户端 URL 现在将包含“！”字首。例如，而不是 mydomain.com/#/a/b/c 将变为 mydomain.com/#!/a/b/c。