Question

我正在制作页面时测试AngularJS's路由。

我的index.html将有三个链接主页，课程和学生。

点击每个链接后，将使用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数据库中检索数据。

<?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";
                })
            }]);

现在没有显示任何内容。可能有什么不对？

由于

Answer 1

您尚未在视图中的任何位置声明ng-app，

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

<body ng-app="Demo">

<强> DEMO

使用AngularJS路由

1 个答案: