How do I get rid of the /#/ when using ui-router?
The hasbang is there for compatibility reasons with the older browsers. Here is a thread for the same question:
AngularJS routing without the hash '#'
And here is a blog post explaining how to get rid of the hashbang safely with fallback for older browsers:
http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
Essentially, you can use $locationProvider.html5Mode(true)
to eliminate the hashbang for the "HTML5 ready" browsers and Angular will fall back automatically to the hashbang version for the older browsers.
gjanden
Updated on June 05, 2022Comments
-
gjanden almost 2 years
I am new to Angular and I am currently doing my routes with ui.router and was curious about something. I notice when I go to my site either on localhost or online, my URL includes /#/ at the end of it. Home looks like domain.com/#/ and other pages follow suite ( domain.com/#/about ) How do I make it appear without the hash?
Here is an example of my app.js
var app = angular.module('dashboardApp', ['ui.router']); app.config( ['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider){ $urlRouterProvider.otherwise('/'); $stateProvider //Dashboard states and nested views ======================== .state('home', { url: '/', templateUrl: './templates/main/dashboard.html', controller: 'dashboardCtrl' }) //Subject states and nested views ========================== .state('about', { url: '/about', templateUrl: './templates/main/about.html', controller: 'aboutCtrl' }); }]);
And here is how I am calling it in my DOM
<div class="main-nav"> <a ui-sref="home"><img src="randomimage.png" /></a> </div> <div class="main-nav"> <a ui-sref="about">About</a> </div>