Angular JS Route not working (Simple Example)

Question

I'm beginner with AngularJS and try to use routes, but due to some reason its not working and special characters are also appearing in URL. Files are below:

Index.html

<html ng-app="myRouteApp" lang="ens">
    <head>
        <title>Angular Route Project</title>
        <script src="../js/angular.js"></script>
        <script src="../js/angular-route.js"></script>
        <script src="../js/script2.js"></script>
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <table style="Font-Family: Arial;">
            <tr>
                <td colspan="2" class="header">
                    <h1>WEBSITE HEADER</h1>
                </td>
            </tr>
            <tr>
                <td class="leftMenu">
                    <a href="#/home">Home</a>
                    <a href="#/courses">Courses</a>
                    <a href="#/students">Students</a>
                </td>
                <td class="mainContent">
                    <ng-view></ng-view>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="footer">
                    <h5>WEBSITE FOOTER</h5>
                </td>
            </tr>
        </table>
    </body>
</html>

script2.js

var app = angular.module("myRouteApp", ["ngRoute"])
                .config(function($routeProvider){
                    $routeProvider
                    .when("/home",{
                                templateUrl: "templates/home.html",
                                controller: "homeController"
                            })
                    .when("/courses",{
                                templateUrl: "templates/courses.html",
                                controller: "coursesController"
                            })
                    .when("/students",{
                                templateUrl: "templates/students.html",
                                controller: "studentsController"
                            })
                })
        .controller("homeController", function($scope){
            $scope.message = "Home Page";
        })
        .controller("coursesController", function($scope){
            $scope.courses = ["PHP", "JAVA", "C#", "C"];
        })
        .controller("studentsController", function($scope){
            $scope.students = ["ALI", "Usama", "Usman", "Omer"];
        })

All code I'm using same as tutorial but don't know what's the error! Help will be appreciated. Thanks

"ngRoute" is not working and URL is like file:///C:/Users/SHARY%20MALIK/Desktop/Angular%20JS/Files/project/index.html#!/#%2Fcourses — Shaheryar Yousaf
– Shaheryar Yousaf, Commented Sep 29, 2017 at 7:58

Pankaj Parkar · Accepted Answer · 2017-09-28 18:01:10Z

3

By default hashPrefix is ! in ngRoute, so your all URL should have ! inside their URL's. That means your URL's should have #!/ inspite of #/ only.

<td class="leftMenu">
    <a href="#!/home">Home</a>
    <a href="#!/courses">Courses</a>
    <a href="#!/students">Students</a>
</td>

Better way would be completely get rid of ! from URL. You need to set hashPrefix to ''(empty) using $locationProvider inside config phase of application.

app.config(['$locationProvider', function($locationProvider){
   $locationProvider.hashPrefix('');
}])

edited Sep 28, 2017 at 18:01

answered Sep 28, 2017 at 17:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shaheryar Yousaf Over a year ago

Thanks for answer, ! is disappear after adding $locationProvider.hashPrefix(''); But ngRoute is still not working. Is there some problem in my system?

Collectives™ on Stack Overflow

Angular JS Route not working (Simple Example)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related