Search code examples
javascripthtmlangularjsangularjs-routing

How do I solve AngularJs -routing not working

I am writing some simple code to practice routing in angular. I have an index.html file which has links to access the respective templates and a div element to display the templates. The templates however do not show when the links are clicked and the url does not appear as expected.

url appears as: http://localhost/angproj/#!#%2Fhome instead of the expected http://localhost/angproj#/home

Here is the code:

Index.html

<!DOCTYPE html>
<html ng-app = "myModule">
<head>
    <title>Home</title>
    <link rel="stylesheet" href ="styles.css">
    <script src="angular/angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="script.js"></script>
    <meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
    <header><h2>Website Header</h2></header>
        <div class="column">
            <div class="links">
            <a href="#/home">Home</a><br>
            <a href="#/services">Our services</a><br>
            <a href="#/technologies">Technologies</a><br>
        </div>
        </div>
        <div class="content" ng-view></div>
    <footer><h3>Website footer</h3></footer>
</body>
</html>

script file

var myApp = angular
            .module("myModule",["ngRoute"])
            .config(function($routeProvider){
                $routeProvider
                .when("/home",{
                    template:"About Us"
                })
                .when("/services",{
                    template:"Our Services"
                })
                .when("/technologies",{
                  template:"Our Technologies"
                })});
Solution

  • The problem is the default hash-prefix used for $location hash-bang URLs is ('!') that's why there are additional unwanted characters in your URL.

    If you actually want to have no hash-prefix and make your example work then you can remove default hash-prefix (the '!' character) by adding a configuration block to your application.

    So your script file will be:

    var myApp = angular
    .module("myModule", ["ngRoute"])
    .config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
        $locationProvider.hashPrefix(''); // add configuration
        $routeProvider
            .when("/home", {
                template: "About Us"
            })
            .when("/services", {
                template: "Our Services"
            })
            .when("/technologies", {
                template: "Our Technologies"
            })
    });

    Full working example:

    var myApp = angular
    .module("myModule", ["ngRoute"])
    .config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
        $locationProvider.hashPrefix(''); // add configuration
        $routeProvider
            .when("/home", {
                template: "About Us"
            })
            .when("/services", {
                template: "Our Services"
            })
            .when("/technologies", {
                template: "Our Technologies"
            })
    });
    <!DOCTYPE html>
<html ng-app = "myModule">
<head>
    <title>Home</title>
    <link rel="stylesheet" href ="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-route.min.js"></script>
    <meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
    <header><h2>Website Header</h2></header>
        <div class="column">
            <div class="links">
            <a href="#/home">Home</a><br>
            <a href="#/services">Our services</a><br>
            <a href="#/technologies">Technologies</a><br>
        </div>
        </div>
        <div class="content" ng-view></div>
    <footer><h3>Website footer</h3></footer>
</body>
</html>