是否可以从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.html5Mode(true).hashPrefix('!');

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

例如:如果你点击:<a href="/other">某个URL</a>

在HTML5浏览器: Angular会自动重定向到example.com/other

在非HTML5浏览器中: Angular会自动重定向到example.com/#!/其他

其他回答

从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

根据文档。你可以使用:

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

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

例如:如果你点击:<a href="/other">某个URL</a>

在HTML5浏览器: Angular会自动重定向到example.com/other

在非HTML5浏览器中: Angular会自动重定向到example.com/#!/其他

为了移除一个漂亮的URL的散列标签,也为了让你的代码在缩小后工作,你需要 像下面的例子一样构建你的代码:

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

第一步:将$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);
  }