使用AngularJS的路由测试页面 [英] Testing a page using AngularJS's routing
本文介绍了使用AngularJS的路由测试页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在测试 AngularJS的制作页面的路由。
我的index.html将有三个链接首页，课程和学生。
当每个链接被点击时，其相应的html将使用 AngularJS的路由加载。
这些学生信息存储在mysql数据库中。所以我用$ http.get从 mySql数据库检索数据。
我的代码如下所示。
index.html
< html>
< head>
< title> TODO提供标题< / title>
< meta charset =UTF-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< script src =Scripts / angular.min.jstype =text / javascript>< / script>
< script src =Scripts / angular-route.min.jstype =text / javascript>< / script>
< script src =Scripts / Script.jstype =text / javascript>< / script>
< link href =Styles.css =stylesheettype =text / css/>
< / head>
< body ng-app =Demo>
< table style =font-family：Arial>
< tr>
< td colspan =2class =header>
< h1>
网站标题
< / h1>
< / td>
< / tr>
< tr>
< td class =leftMenu>
< a href =＃/ home>主页< / a>
< a href =＃/ courses>课程< / a>
< a href =＃/ students>学生< / a>
< / td>
< td class =mainContent>
< ng-view>< / ng-view>
< / td>
< / tr>
< tr>
< td colspan =2class =footer>
< b>网站页脚< / 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;
背景颜色：＃D8D8D8;
width：150px;
}
.mainContent {
height：500px;
背景颜色：＃E6E6E6;
width：650px;
}
a {
display：block;
padding：5px
}
courses.html
< h1>我们提供的课程< / h1>
< ul>
< li ng-repeat =课程中的课程> {{course}}< / li>
< / ul>
home.html
< H1> {{消息}}< / H1>
< div>
PRAGIM成立于2000年，工作量为3 s / w，可提供非常具有成本效益的培训。
< / div>
< ul>
< li>由实时软件提供的培训experets< / li>
< li>与可能的面试问题有关的实时项目讨论< / li>
< li>学员可以参加培训并使用实验室，直到您找到工作< / li>
< li>继续准备和样机采访< / li>
< li> 100％配售助理< / li>
< li>实验室设施< / li>
< / ul>
students.html
< h1>学生列表< / h1>
< ul>
< li ng-repeat =学生在学生中> {{student.name}}< / li>
< / ul>
这个ajax.php是从sql数据库检索数据的。
<？php
//数据库设置
$ connect = mysqli_connect（localhost，root，xxx，Students ）;
if（！$ connect）{
die（'Could not connect：'。mysql_error（））;
}
printf（MySQL主机信息：％s\\\
，mysql_get_host_info（））;
$ result = mysqli_query（$ connect，select * from tblStudents）;
$ data = array（）;
while（$ row = mysqli_fetch_array（$ result））{
$ data [] = $ row;
}
//打印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 = 主页;
}）
.controller（coursesController，函数（$ 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 =获取数据时出错;
}）
}]）;
现在不显示任何内容。什么可能是错误的？
谢谢
解决方案
ng-app视图中的任何地方，
您需要在视图中声明它以引用 module 。应该是，
< body ng-app =Demo>
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\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
解决方案
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">
这篇关于使用AngularJS的路由测试页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
