Issue
I am new to AngularJS and ui-router. I want to remove hashtag(#) in my URL and having a problem achieving it.
What I already did are the ff but it only shows blank page and many errors:
- Added
$locationProvider.html5Mode(true);on my app config - Added
<base href="/" />inside my head tag
Please see below the screenshots and codes:
- URL with hashtag:
Image – before - After apply the steps said above:
Image – after
Code:
var app = angular.module('app', ['ui.router']);
app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'views/home.html'
})
.state('about', {
url:'/about',
templateUrl: 'views/about.html'
});
$locationProvider.html5Mode(true);
}]);<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="{{ favicon }}">
<title>JKG</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- angularjs -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.19/angular-ui-router.min.js"></script>
<!-- main links -->
<link rel="stylesheet" type="text/css" href="sass/main.css">
<script src="js/app.js"></script>
<script src="js/controller/mainController.js"></script>
<base href="/" />
</head>
<body>
<!--MAIN_CONTENT-->
<main ui-view></main>
</body>
</html>Is there something that I have missed? Can someone please help me on this? Thank you in advance.
Solution
depending on the server you are using you may need to write the htacess rule for the application
Answered By – user8453321
Answer Checked By – Marie Seifert (AngularFixing Admin)