batuman batuman - 1 month ago 6
MySQL Question

Testing a page using AngularJS's routing

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">{{courses}}</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\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

Answer

You have not declared ng-app anywhere in the view,

You need to declare it in the view in order to refer the module.It should be,

<body ng-app="Demo">

DEMO