Я проверяю маршрутизацию AngularJS's при создании страницы.
Мой index.html будет иметь три ссылки: Главная, Курсы и Студенты.
При нажатии каждой ссылки соответствующий html будет загружаться с использованием маршрутизации AngularJS's .
Информация о студентах хранится в базе данных 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.
<?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"; }) }]);
Теперь ничего не отображается. Что может быть неправильным?
благодаря