Jishad P Jishad P - 2 years ago 122
Javascript Question

Angular Routing Pretty URL Error

I am trying to make angular routing application. here is my code.

<html ng-app="LumenApp">
<title>LumanAngular v1.0</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-app.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
<div class="container">
<div class="row" ng-view>

Angular Scripts..

var app = angular.module('LumenApp', ['ngRoute']);

app.config(function($routeProvider) {

// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'

// route for the about page
.when('/about', {
templateUrl : 'about.html',
controller : 'aboutController'

// route for the contact page
.when('/contact', {
templateUrl : 'contact.html',
controller : 'contactController'


// create the controller and inject Angular's $scope
app.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';

app.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';

app.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';


<h1>Home Page</h1>


<h1>About Page</h1>


<h1>Contact Page</h1>

No wthis contiton its working perfectly and injecting the home.html, about.html and contact.html into the template.

But I want to remove the hash(#) tag from the url as next.

I searched a lot and get the solution like that to add the below code in routing configuration function.

requireBase: false,
enabled: true

After that the hash tag was removed, but the injection of pages to template is not working..

Why this happen like this. when I removed the above location code, its working perfectly as I already explained.

How can I fix this issue ?


Answer Source

If you are using Apache server please add a .htaccess in root folder.

RewriteEngine on

RewriteBase /restapi/app/ 

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

And add a base tag in header

<base href="/restapi/app/" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download