是否可以从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服务注入到应用配置的构造函数中

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

第三步:在container (landing, master, or layout)页面中,在标签内添加html标签如<base href="/">。

步骤4:从所有锚标记中删除所有路由配置的“#”。例如,href="#home"变成href="home";Href ="#about"变成herf="about";Href ="#contact"变成Href ="contact"

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

其他回答

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

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

第一步:将$locationProvider服务注入到应用配置的构造函数中

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

第三步:在container (landing, master, or layout)页面中,在标签内添加html标签如<base href="/">。

步骤4:从所有锚标记中删除所有路由配置的“#”。例如,href="#home"变成href="home";Href ="#about"变成herf="about";Href ="#contact"变成Href ="contact"

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

是的,你应该配置$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);

  }]);

以下两步: 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服务将自动回退到散列部分方法。

看来现在说这个有点晚了。但是将下面的配置添加到app.module导入中就可以了:

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