Question

＆＃13;

/// <reference path="Scripts/angular.js" />
var myApp = angular.module("myModule", ["ngRoute"])
                    .config(function ($routeProvider) {
                        $routeProvider
                            .when("/home", {
                                templateUrl: "homeHTML.html",
                                controller: "homeController"
                            })
                            .when("/courses", {
                                templateUrl: "coursesHTML.html",
                                controller: "coursesController"
                            })
                            .when("/student", {
                                templateUrl: "studentHTML.html",
                                controller: "studentController"
                            })
                    })
                    .controller("homeController", function ($scope) {
                        $scope.message = "Home";
                    })
                    .controller("coursesController", function ($scope) {
                        $scope.message = "Courses";
                    })
                    .controller("studentController", function ($scope) {
                        $scope.message = "Student";
                    });

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Script.js"></script>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td colspan="2" style="width:600px; height:100px; background-color:#b4b4b4; text-align:center">
                This is the header area
            </td>
        </tr>
        <tr>
            <td style="width:200px; height:400px; background-color:#ff0000">
                <ul>
                    <li><a href="#/home">Home</a></li>
                    <li><a href="#/courses">Courses</a></li>
                    <li><a href="#/student">Student</a></li>
                </ul>
                
            </td>
            <td style="width:400px; height:400px; background-color:#ff6a00">
                <ng-view></ng-view>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="width:500px; height:100px; background-color:#b4b4b4; text-align:center">
                This is a Footer Area
            </td>
        </tr>
    </table>

</body>
</html>

＆＃13;

homeHTML，studentHTML，coursesHTML都与以下相同。

<h1>{{message}}</h1>
<div>
    <p>Hi this is home partial view</p>
</div>

我在代码段

中发现了这个错误

Error:{
  "message": "Uncaught ReferenceError: angular is not defined",
  "filename": "http://stacksnippets.net/js",
  "lineno": 51,
  "colno": 13
}

这里发生的事情是我在浏览器中看到了片段中显示的没有错误的视图，当我点击链接回家时，课程，学生什么都没有出现。请指出这里出了什么问题。

Answer 1

Guyss我找到了答案

/// <reference path="Scripts/angular.min.js" />
var myApp = angular.module("myModule", ["ngRoute"])
                    .config(function ($routeProvider, $locationProvider) {
                        $locationProvider.hashPrefix('');
                        $routeProvider
                            .when("/home", {
                                templateUrl: "homeHTML.html",
                                controller: "homeController"
                            })
                            .when("/courses", {
                                templateUrl: "coursesHTML.html",
                                controller: "coursesController"
                            })
                            .when("/student", {
                                templateUrl: "studentHTML.html",
                                controller: "studentController"
                            })
                    })
                    .controller("homeController", function ($scope) {
                        $scope.message = "Home";
                    })
                    .controller("coursesController", function ($scope) {
                        $scope.message = "Courses";
                    })
                    .controller("studentController", function ($scope) {
                        $scope.message = "Student";
                    });

我添加了$ locationProvider。我会尽快更新原因。

Answer 2

首先在html或body标签中定义角度模块，并确保您的角度版本与angular-router版本相同。另外，不要忘记在homeHTML.html，coursesHTML.html和studentHTML.html中定义相应的控制器

homeHTML.html

<div ng-controller="homeController">

    <h1>{{ message }}</h1>

</div>

它为我工作。

点击此链接：https://plnkr.co/edit/cZzk8EKBXqRuoy6oYhuF?p=preview

Angular JS中的部分布局，带有新的最新路线

2 个答案: