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
1 answers
solution1
3 2017-09-28 17:47:35
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('');
}])
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.