doutui2883 2016-10-15 07:38 采纳率: 100%
浏览 104
已采纳

使用AngularJS的路由测试页面

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
", 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

  • 写回答

1条回答 默认 最新

  • dsv768456 2016-10-15 07:40
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 java 的protected权限 ,问题在注释里
  • ¥15 这个是哪里有问题啊?
  • ¥15 关于#vue.js#的问题:修改用户信息功能图片无法回显,数据库中只存了一张图片(相关搜索:字符串)
  • ¥15 texstudio的问题,
  • ¥15 spaceclaim模型变灰色
  • ¥15 求一份华为esight平台V300R009C00SPC200这个型号的api接口文档
  • ¥15 就很莫名其妙,本来正常的Excel,突然变成了这种一格一页
  • ¥15 字符串比较代码的漏洞
  • ¥15 欧拉系统opt目录空间使用100%
  • ¥15 ul做导航栏格式不对怎么改?