Removing the fragment identifier from AngularJS urls (# symbol)

后端 未结 14 2009
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:59

    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
              });
            }
        }]);
    
    0 讨论(0)
  • 2020-11-22 01:00

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

      if(window.history && window.history.pushState){
        $locationProvider.html5Mode(true);
      }
    
    0 讨论(0)
提交回复
热议问题