How do I solve AngularJs -routing not working

Question

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"
                })});

Basel Issmail · Accepted Answer · 2020-01-05T19:31:11.737

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>

Hello Basel, thank you for your answer. I tried that but it returns an error n the console, that there is a module error. The templates still fail to load. — Michael Murithi, Jan 05 '20 at 19:14
@MykeMurithi, can you paste the console error so I can check? — Basel Issmail, Jan 05 '20 at 19:27
Yes. Here is the error refference returned by the console: https://code.angularjs.org/1.7.9/docs/error/$injector/modulerr — Michael Murithi, Jan 05 '20 at 19:36
Check out the full example "snippet" I added to my answer, try to use it, then add your own modifications on top of it. — Basel Issmail, Jan 05 '20 at 19:43
Thanks a lot it worked. I realised I had been using $locationProvider.harshPrefix = ' ' instead of the right way. — Michael Murithi, Jan 06 '20 at 01:38
I’m glad it helped, if everything is fine now, can you please mark my answer as accepted? — Basel Issmail, Jan 06 '20 at 02:09
Hello Basel, would you help me solve this: https://stackoverflow.com/q/59833824/12178080 — Michael Murithi, Jan 21 '20 at 13:34

How do I solve AngularJs -routing not working

1 Answers1