Getting "#" along with URL while running angular application in web browser

Question

I have created an application using angularJS framework. While running application on web browser, i am gettting # along with my url. I tried the following below,

 var app = angular.module('missingFound', ['ngRoute','ngCookies','UserModel','homeController','DashBoardContrl','TimeLineContrl','MissingPostContrl','FoundPostContrl','GisContrl'])
    
    .config(['$routeProvider','$locationProvider',
             function($routeProvider,$locationProvider) {

    	$routeProvider.when('/', {
    		templateUrl : 'views/home.html',
    		controller : 'homeCtrl'
    	})
    	
    	
    	.when('/dashboard',{	
    		templateUrl: 'views/dashboard.html',
    			controller : 'dashboardCntr',
    			authenticated : true
    	})
    	
    	.when('/timeline',{
    		templateUrl : 'views/timeline.html',
    		controller : 'timelineCntr',
    		authenticated : true
    	})
    	
    	.when('/missingForm',{
    		templateUrl : 'views/missingForm.html',
    		controller : 'missingCntr',
    		authenticated : true
    	})
    	
    	.when('/foundForm',{
    		templateUrl : 'views/foundForm.html',
    		controller : 'foundCntr',
    		authenticated : true
    	})
    	
    	.when('/gisPage',{
    		templateUrl : 'views/gis.html',
    		
    		authenticated : true
    	})
    	.otherwise({
    		redirectTo:"/"
    	});
    
    		   $locationProvider.html5Mode(true);
    	
    /*	$locationProvider.html5Mode({
    		  enabled: true,
    		  requireBase: false
    		});*/
    		   
       
    
    	
    }])
    
    
    
    .run(['$rootScope','$location','AuthService',
             function($rootScope,$location,AuthService){
    			$rootScope.$on("$routeChangeStart", function(event, next, current){
    				if(next.$$route.authenticated){
    					if(!AuthService.getAuthStatus()){
    						$location.path('/');
    					}
    				}
    				
    				if(next.$$route.originalPath == '/'){
    					console.log('Login Page');
    					if(AuthService.getAuthStatus()){
    						$location.path(current.$$route.originalPath);
    					}
    				}
    		})
    }]);

My URL is looking like this - http://localhost:7080/Police4/#/

Its working fine after login when i am navigating to different hmtl page via routing but when i am trying to copy the URL path and opening in differnt tab its showing page not found. Before with '#' it is working fine, but URL is looking ugly.

Can you show us what one of your routes looks likes in html if its only just an example? — Rethabile
– Rethabile, Commented Feb 16, 2016 at 16:09
I'm using html 5 in my application and my href's look like (using your code) href="timeline" and my $location.path's look like (using your code) $location.path("timeline") — Rethabile
– Rethabile, Commented Feb 16, 2016 at 16:15

Duncan · Accepted Answer · 2016-02-16 16:20:03Z

1

Angular's routing URLs by default all put a # character to separate the part controlled by Angular from the rest of the URL. This is needed on some older browsers which did not allow changing the main part of the URL without reloading the page.

You can get rid of this by enabling html5 mode. See, for example, https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag however you will also need to configure your server to recognise the Angular URLs and send the main page for your application even when a URL appears to refer to a sub-page.

edited Feb 16, 2016 at 16:20

answered Feb 16, 2016 at 16:02

Duncan

96.3k15 gold badges129 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charlietfl Over a year ago

not just related to older browsers...also allows routing to be done with no server configuration needed

Gopinath Kaliappan · Accepted Answer · 2016-02-16 17:59:35Z

0

Hi This will help you ,
Add this code to your project ,

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

Read https://docs.angularjs.org/guide/$location

answered Feb 16, 2016 at 17:59

Gopinath Kaliappan

7,4198 gold badges41 silver badges62 bronze badges

Collectives™ on Stack Overflow

Getting "#" along with URL while running angular application in web browser

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related