Removing the fragment identifier from AngularJS urls (# symbol) Removing the fragment identifier from AngularJS urls (# symbol) angularjs angularjs

Removing the fragment identifier from AngularJS urls (# symbol)


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


Be sure to check browser support for the html5 history API:

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


To remove the Hash tag for a pretty URL and also for your code to work after minification you need to structure your code like the example below:

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