0
私はAngularJS'sページを作る際にルーティングをテストしています。AngularJSのルーティングを使用してページをテストする
私のindex.htmlには、ホーム、コース、学生の3つのリンクがあります。
各リンクをクリックすると、AngularJS'sルーティングを使用してそれぞれのHTMLが読み込まれます。
これらの学生情報はmysqlデータベース内に保存されます。そこで私は$ http.getを使ってmySql databaseからデータを検索しました。
私のコードは以下の通りです。
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>
このajax.phpは、SQLデータベースからデータを取得することです。 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";
})
}]);
<?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);
?>
が表示されるようになりましたものではありません。何が間違っていますか？
おかげ
コンソールのエラーは何ですか？ –