Search code examples
javascripthtmlangularjsangularjs-routing

Angular Routing Pretty URL Error

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

<html ng-app="LumenApp">
<head>
    <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>
</head>
<body>
    <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>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row" ng-view>
        </div>  
    </div>
</body>

Angular Scripts..

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

app.config(function($routeProvider) {

$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.';
});

home.html

<h1>Home Page</h1>
{{message}}

about.html

<h1>About Page</h1>
{{message}}

contact.html

<h1>Contact Page</h1>
{{message}}

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.

$locationProvider.html5Mode({
            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 ?

Thanks.

Solution

  • If you are using Apache server for hosting your app, add a .htaccess file in your root folder:

    .htaccess

    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 your index.html file head:

    <base href="/restapi/app/" />