I am testing AngularJS's routing in making a page.
我在制作页面时测试AngularJS的路由。
My index.html will have three links Home, Courses, and Students.
我的index.html将有三个链接主页,课程和学生。
When each link is clicked, its respective html will be loaded using AngularJS's routing.
单击每个链接时,将使用AngularJS的路由加载其各自的html。
Those students information are stored inside mysql database. So that I used $http.get to retrieve data from mySql database.
那些学生的信息存储在mysql数据库中。所以我使用$ http.get从mySql数据库中检索数据。
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.
这个ajax.php是从sql数据库中检索数据。
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "xxx", "Students");
if (!$connect) {
die('Could not connect: ' . mysql_error());
}
printf("MySQL host info: %s\n", 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