I am testing AngularJS's routing in making a page.
My index.html will have three links Home, Courses, and Students.
When each link is clicked, its respective html will be loaded using AngularJS's routing.
Those students information are stored inside mysql database. So that I used $http.get to retrieve data from mySql database.
My codes are as follows.
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="Scripts/angular-route.min.js" type="text/javascript"></script>
<script src="Scripts/Script.js" type="text/javascript"></script>
<link href="Styles.css" rel="stylesheet" type="text/css"/>
</head>
<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>
</body>
</html>
Styles.css
.header {
width: 800px;
height: 80px;
text-align: center;
background-color: #BDBDBD;
}
.footer {
background-color: #BDBDBD;
text-align: center;
}
.leftMenu {
height: 500px;
background-color: #D8D8D8;
width: 150px;
}
.mainContent {
height: 500px;
background-color: #E6E6E6;
width: 650px;
}
a{
display:block;
padding:5px
}
courses.html
<h1>Courses we offer</h1>
<ul>
<li ng-repeat="course in courses">{{course}}</li>
</ul>
home.html
<h1>{{message}}</h1>
<div>
PRAGIM established in 2000 by 3 s/w engineers offers very cost effective training.
</div>
<ul>
<li>Training delivered by real time softwares experets</li>
<li>Realtime project discussion relating to the possible interview questions</li>
<li>Trainees can attend training and use lab untill you get a job</li>
<li>Resume preparation and mockup interviews</li>
<li>100% placement assistant</li>
<li>lab facility</li>
</ul>
students.html
<h1>List of students</h1>
<ul>
<li ng-repeat="student in students">{{student.name}}</li>
</ul>
This ajax.php is to retrieve data from sql database.
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "xxx", "Students");
if (!$connect) {
die('Could not connect: ' . mysql_error());
}
printf("MySQL host info: %s
", mysql_get_host_info());
$result = mysqli_query($connect, "select * from tblStudents");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
//print json_encode($data);
?>
Script.js
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", "SQL Server", "ASP.NET"];
})
.controller('studentsController', ['$scope', '$http', function ($scope, $http) {
$http.get("ajax.php")
.success(function(data){
$scope.students = data;
})
.error(function() {
$scope.students = "error in fetching data";
})
}]);
Now is nothing is displayed. What could be wrong?
Thanks
