0

I have the following script.js code

var app = angular
        .module("Demo", ["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 = ["C#", "VB.NET", "ASP.NET", "SQL Server"];
        })
         .controller("studentsController", function ($scope, $http) {
             $http.get("StudentService.asmx/GetAllStudents")
                                    .then(function (response) {
                                        $scope.students = response.data;
                                    })
         })

and the following is the html :

      <body ng-app="Demo">
<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">
            <b>Website Footer</b>
        </td>
    </tr>
</table>

The routing does not work for the above href links. My partial pages consumes the properties of $Scope in the script.js file. But home.html never get loaded after clicking the link. Please help with why ng-app, ng-view, and ngRoute do not work for me.

user3672621
  • 1

2 Answers2

0

Drop the hashes in your <a> tags.

Kai
  • 2,529
  • 1
  • 15
  • 24
0

it works now since I updated the code as following: var app = angular.module('Demo', ['ngRoute']) .config(function ($routeProvider, $locationProvider) { $locationProvider.hashPrefix('');//this helped fix a bug with angular 1.6.1 http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working the routing links were not working but this $locationProvider variable change fixed it. $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' }); })

user3672621
  • 1