发表新帖
发表新帖

Removing the fragment identifier from AngularJS urls (# symbol)

后端 未结
关注
14 2029
Happy的楠姐
Happy的楠姐 2020-11-22 00:01

Is it possible to remove the # symbol from angular.js URLs?

I still want to be able to use the browser\'s back button, etc, when I change the view and will update th

相关标签:
14条回答
  • 不要未来只要你来
    2020-11-22 00:46

    This answer assumes that you are using nginx as reverse proxy and you already did set $locationProvider.html5mode to true.

    ->For the people who might still be struggling with all cool stuff above.

    Surely, @maxim grach solution works fine, but for the solution for how to respond to requests that doesn't want the hashtag to be included in the first place what can be done is check if php is sending 404 and then rewrite the url. Following is the code for nginx,

    In the php location, detect 404 php error and redirect to another location, 

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

    Then rewrite url in redirect location and proxy_pass the data, offcourse, put your website url at the place of my blog's url. (Request : Question this only after you tried it)

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

    And see the magic.

    And it definitely works, atleast for me.

    0 讨论(0)
  • 长发绾君心
    2020-11-22 00:47

    Yes, you should configure $locationProvider and set html5Mode to 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);

  }]);
    0 讨论(0)
  • 小蘑菇
    2020-11-22 00:50

    Start from index.html remove all # from <a href="#/aboutus">About Us</a> so it must look like <a href="/aboutus">About Us</a>.Now in head tag of index.html write <base href="/"> just after last meta tag.

    Now in your routing js inject $locationProvider and write $locatonProvider.html5Mode(true); Something Like This:-

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

    For more Details watch this video https://www.youtube.com/watch?v=XsRugDQaGOo

    0 讨论(0)
  • 猫巷女王i
    2020-11-22 00:51

    If you are in .NET stack with MVC with AngularJS, this is what you have to do to remove the '#' from url:

    1. Set up your base href in your _Layout page: <head> <base href="/"> </head>

    2. Then, add following in your angular app config : $locationProvider.html5Mode(true)

    3. Above will remove '#' from url but page refresh won't work e.g. if you are in "yoursite.com/about" page refreash will give you a 404. This is because MVC does not know about angular routing and by MVC pattern it will look for a MVC page for 'about' which does not exists in MVC routing path. Workaround for this is to send all MVC page request to a single MVC view and you can do that by adding a route that catches all

    url: 

    routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
    0 讨论(0)
  • 不知归路
    2020-11-22 00:52

    Guess this is reallllly late for this. But adding the below config to the app.module imports does the job:

    RouterModule.forRoot(routes, { useHash: false })
    0 讨论(0)
  • 旧时难觅i
    2020-11-22 00:54

    Step 1: Inject the $locationProvider service into the app config's constructor

    Step 2: Add code line $locationProvider.html5Mode(true) to the app config's constructor.

    Step 3: in the container (landing, master, or layout) page, add html tag such as <base href="/"> inside the tag.

    Step 4: remove all '#" for routing config from all anchor tags. For examples, href="#home" becomes href="home"; href="#about" becomes herf="about"; href="#contact" becomes 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>
    0 讨论(0)
 看不清?
提交回复
热议问题