AngularJS ng-view未加载部分模板

时间:2017-03-02 18:04:21

标签: angularjs ngroute

Solution Structure我正在使用AngularJS路线( ngRoute )。我的ng-view未加载部分模板。这是我的代码:

MyHome.html (Start Page) [在此处输入图像说明] [解决方案结构]

 <html ng-app="Demo">
    <head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="Scripts/SPAScript.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <a href="#!/home">Home </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#!/about">About </a>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Your Data goes here
                <ng-view> </ng-view>
                <!--<div ng-view="">

                </div>-->
            </td>
        </tr>
    </table>
</body>
</html>

我的脚本文件:

/// <reference path="angular.min.js" />
/// <reference path="angular-route.min.js" />



var app = angular.module("Demo", ["ngRoute"]);

app.config(function ($routeProvider, $locationProvider) {
    debugger;
    $routeProvider

    .when("/home", {templateUrl: "Templates/HomePage.html",controller:"homecontroller"})
    .when("/about", {templateUrl: "Templates/AboutPage.html",controller: "aboutcontroller"})

});

app.controller("homeController", function ($scope) {
    $scope.message = "Home Page";
});

app.controller("aboutcontroller", function ($scope) {
    $scope.message = "About Page";
});

AboutPage.html:

<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/SPAScript.js"></script>
<h1>
    Welcome To {{message}}
</h1>

<div>
    <input type="button" id="btnSubmit" value="Click Me" />
    <input type="text" id="myText" value="Enter Some Text"/>
</div>

我已经包含了所有代码,但看起来我错过了一些东西。需要某人的帮助。提前谢谢!

0 个答案:

没有答案