angularjs - 从 AngularJS url 中删除片段标识符（# 符号）

Question

是否可以从 angular.js URL 中删除 # 符号？

当我更改视图并使用参数更新 URL 时，我仍然希望能够使用浏览器的后退按钮等，但我不想要 # 符号。

教程 routeProvider 声明如下：

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

我可以编辑它以在没有# 的情况下具有相同的功能吗？

score 253 · Accepted Answer

是的，您应该配置$locationProvider并设置html5Mode为true：

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

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);

score 56 · Accepted Answer

请务必检查浏览器对 html5 历史 API 的支持：

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }

score 47 · Accepted Answer

要删除漂亮 URL的 Hash 标记并让您的代码在缩小后正常工作，您需要像下面的示例那样构建代码：

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);

score 18 · Accepted Answer

$locationProvider.html5Mode(true)设置后，我在 web.config 中写出一条规则app.js。

希望，帮助某人。

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

在我的 index.html 中，我将其添加到<head>

<base href="/">

不要忘记在服务器上安装 iis 的 url 重写器。

此外，如果您使用 Web Api 和 IIS，此匹配 url 将无法正常工作，因为它会更改您的 api 调用。因此，添加第三个输入（条件的第三行）并给出一个模式，该模式将排除来自www.yourdomain.com/api

score 11 · Accepted Answer

如果您在带有 AngularJS 的 MVC 的 .NET 堆栈中，那么您必须执行以下操作才能从 url 中删除“#”：

在 _Layout 页面中设置基本 href：<head> <base href="/"> </head>
然后，在您的 Angular 应用程序配置中添加以下内容：$locationProvider.html5Mode(true)
上面将从 url 中删除 '#' 但页面刷新将不起作用，例如，如果你在“yoursite.com/about”页面刷新会给你一个 404。这是因为 MVC 不知道角度路由和 MVC 模式它将查找 MVC 路由路径中不存在的“关于”的 MVC 页面。解决方法是将所有 MVC 页面请求发送到单个 MVC 视图，您可以通过添加捕获所有

网址：

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);

score 6 · Accepted Answer

您可以调整 html5mode 但这仅适用于页面的 html 锚点中包含的链接以及 url 在浏览器地址栏中的外观。尝试从页面外部的任何位置请求没有主题标签（带或不带 html5mode）的子页面将导致 404 错误。例如，以下 CURL 请求将导致页面未找到错误，与 html5mode 无关：

$ curl http://foo.bar/phones

尽管以下将返回根/主页：

$ curl http://foo.bar/#/phones

这样做的原因是，在请求到达服务器之前，主题标签之后的任何内容都被剥离了。因此，对的请求http://foo.bar/#/portfolio作为对的请求到达服务器http://foo.bar。服务器将响应 200 OK 响应（大概），http://foo.bar代理/客户端将处理其余的。

因此，如果您想与他人共享网址，您别无选择，只能包含主题标签。

score 5 · Accepted Answer

遵循 2 个步骤 -
1. 首先在您的应用配置文件中设置$locationProvider.html5Mode(true) 。
例如 -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Second在你的主页中设置<base> 。
例如->
<base href="/">

对于不支持 HTML5 History API 的浏览器，$location 服务将自动回退到 hash-part 方法。

score 3 · Accepted Answer

我的解决方案是创建 .htaccess 并使用 #Sorian 代码.. 没有 .htaccess 我无法删除 #

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

score 1 · Accepted Answer

根据文档。您可以使用：

$locationProvider.html5Mode(true).hashPrefix('!');

注意：如果您的浏览器不支持 HTML 5。别担心 :D 它有回退到 hashbang 模式。所以，你不需要if(window.history && window.history.pushState){ ... }手动检查

例如：如果您单击：<a href="/other">Some URL</a>

在 HTML5 浏览器中：angular 会自动重定向到example.com/other

在非 HTML5 浏览器中：角度将自动重定向到example.com/#!/other

score 1 · Accepted Answer

从 index.html 开始删除所有内容#，<a href="#/aboutus">About Us</a>所以它必须看起来像<a href="/aboutus">About Us</a>。现在在 index.html 的 head 标记中写<base href="/">在最后一个元标记之后。

现在在你的路由 js 中注入$locationProvider并编写$locatonProvider.html5Mode(true); 类似这样的东西：-

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

有关更多详细信息，请观看此视频 https://www.youtube.com/watch?v=XsRugDQaGOo

score 1 · Accepted Answer

猜猜这真的为时已晚。但是将以下配置添加到 app.module 导入中就可以了：

RouterModule.forRoot(routes, { useHash: false })

score 1 · Accepted Answer

此答案假定您使用 nginx 作为反向代理，并且您已经将 $locationProvider.html5mode 设置为 true。

-> 对于那些可能仍在为上面所有很酷的东西而苦苦挣扎的人。

当然，@maxim grach 解决方案工作正常，但是对于如何响应不希望首先包含主题标签的请求的解决方案，可以做的是检查 php 是否发送 404，然后重写 url。以下是nginx的代码，

在php位置，检测404 php错误并重定向到另一个位置，

location ~ \.php${
  ...
  fastcgi_intercept_errors on;
  error_page 404 = /redirect/$request_uri ;
}

然后在重定向位置重写 url 并 proxy_pass 数据，当然，将您的网站 url 放在我博客 url 的位置。（要求：只有在你尝试过之后才提出这个问题）

location /redirect {
  rewrite ^/redirect/(.*) /$1;
  proxy_pass http://www.techromance.com;
}

并看到魔法。

它绝对有效，至少对我来说。

score 0 · Accepted Answer

第 1 步：将 $locationProvider 服务注入应用配置的构造函数

第 2 步：将代码行 $locationProvider.html5Mode(true) 添加到应用配置的构造函数中。

第三步：在容器（登陆、母版或布局）页面中，添加html标签如<base href="/">标签内。

第 4 步：从所有锚标签中删除所有用于路由配置的“#”。例如，href="#home" 变为 href="home"；href="#about" 变为 herf="about"；href="#contact " 变成 href="联系人"

 <ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>

score -1 · Accepted Answer

Just add $locationProvider In

.config(function ($routeProvider,$locationProvider)

and then add $locationProvider.hashPrefix(''); after

.otherwise({
        redirectTo: '/'
      });

That's it.

angularjs - 从 AngularJS url 中删除片段标识符（# 符号）

14 回答 14

Related

Reference