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

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

报告相同问题?

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?