使用 AngularJS 的路由测试页面答案

【问题标题】：Testing a page using AngularJS's routing使用 AngularJS 的路由测试页面
【发布时间】：2017-02-24 16:03:16
【问题描述】：

我正在测试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>

样式.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
}

课程.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";
                })
            }]);

现在什么都没有显示。有什么问题？

谢谢

【问题讨论】：

控制台有什么错误？

标签： javascript php html mysql angularjs

【解决方案1】：

你还没有在视图的任何地方声明 ng-app，

您需要在视图中声明它才能引用module。应该是，

<body ng-app="Demo">

DEMO

【讨论】：