是否可以从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'});
}]);

我可以编辑这个有相同的功能没有#吗?


当前回答

只需添加$locationProvider

.config(function ($routeProvider,$locationProvider)

然后添加$locationProvider.hashPrefix("); 后

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

就是这样。

其他回答

我在web上写了一个规则。在app.js中设置$locationProvider.html5Mode(true)后配置。

霍普,帮助别人。

  <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的调用

从index.html开始删除<a href="#/aboutus">About Us</a>中的所有#,因此它必须看起来像<a href="/aboutus">About Us</a>。现在在index.html的头标签中,在最后一个元标签之后写入<base href="/">。

现在在你的路由js中注入$locationProvider并写入$locationProvider . 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

我的解决方案是创建。htaccess和使用#索里安代码。没有.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]

一定要检查浏览器对html5历史API的支持:

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

以下两步: 1. 首先在你的应用配置文件中设置$locationProvider.html5Mode(true)。例如: 角。module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) {$locationProvider. html5mode (true);美元urlRouterProvider.otherwise(“/”);});

2.第二,在主页中设置<base>。 对于eg -> <基地href = " / " >

对于不支持HTML5 History API的浏览器,$location服务将自动回退到散列部分方法。