Блог

Главная - Вопросы по программированию - Тестирование страницы с использованием маршрутизации AngularJS

Тестирование страницы с использованием маршрутизации AngularJS

#javascript #php #html #mysql #angularjs

#javascript #php #HTML #mysql #angularjs

Вопрос:

Я тестирую 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>

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: %sn", 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";
                })
            }]);

Теперь ничего не отображается. Что может быть не так?

Спасибо

Комментарии:

1. Что такое ошибки в консоли?

Ответ №1:

Вы нигде не объявили ng-app в представлении,

Вам нужно объявить ее в представлении, чтобы ссылаться на module .Это должно быть,

 <body ng-app="Demo">

ДЕМОНСТРАЦИЯ