Question

我正在学习Angular，所以我可以进入Web应用程序开发。我正在做一个测试项目，但不能让ng-view工作。我的HTML如下：

<!DOCTYPE HTML>
<html>
<head>
    <title>TEST PROJECT</title>
    <link rel="stylesheet" type="text/css" href="test_project.css">
    <script src="lib/jquery-1.11.3.js"></script>
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
    <script src="lib/angular-animate.min.js"></script>
    <script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>

    <center>
    <div class="interface" ng-controller="SelectionController">
        <div style="height: 10%">
        <a href="http://www.somewebsite.com"><img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif"></a>
        <center><h1>{{ title }}</h1></center>
        </div>

        <div style="height: 85%" ng-view></div>

        <div style="height:5%">
        <p>Having trouble? <a href="http://www.somewebsite.com/contact.shtml">Request Support</a>
        <p style="bottom: 50px; position:fixed; size:8px">Footer Text
        </div>
    </div>
    </center>


    <script src="angular/app.js"></script>
    <script src="angular/controllers.js"></script>
</body>
</html>

我也有app.js：

var app = angular.module('TestProject',['ngRoute', 'ngAnimate']);

app.config(function ($routeProvider){
    $routeProvider
        .when('/', {
            controller:     'SelectionController',
            templateUrl:    '/views/home.html'
    })
        .when('/home/', {
            controller:     'SelectionController',
            templateUrl:    '/views/home.html'
    })
        .otherwise({
            redirectTo: '/home/'
    });
});

与目前只有：

的controllers.js一样

app.controller('SelectionController', ['$scope',function($scope) {
    $scope.title = 'Title!';

}]);

然后我有一个home.html，

<div>
<h2>Welcome to this page! Please select an option below.</h2>
            <table>
                <td><div><img class="Symbol" src="../pictures/pica.jpg"></div></td>
                <td><div><img class="Symbol" src="../pictures/picb.jpg"></div></td>
                <td><div><img class="Symbol" src="../pictures/picc.jpg"></div></td>
            </table>
</div>

应该加载到ng-view中。我的目标是创建一个单独的页面，窗口的中心div改变，所以我可以加载不同的屏幕来做任何应用程序，而无需重新加载其他东西。当前目录结构如下：

--angular
------app
------controllers
--lib
------angular.min
------angular-animate.min
------angular-route.min
------Chart.js
------jquery-1.11.3
--pictures
------pica
------picb
------picc
--views
------home.html
index.html
test.css

我现在所拥有的{{title}}改变了它应该采用的方式，但页面中间没有任何内容。当我检查页面时，我看到ng-view指令已被注释。

<-- ngView: undefined -->

我应该将home.html中的内容放在哪里。为什么ngView在这里被注释掉了？

Answer 1

我遇到了这个问题。正如布伦丹·格林提到的那样，为我解决的是什么将我的路线更改为: templateUrl而不是: templateURL ...套管产生了巨大的差异!!!!

Answer 2

您显示的html文件应为：

此文件应为index.html。

<html>
<head>
<title>TEST PROJECT</title>
<link rel="stylesheet" type="text/css" href="test_project.css">
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-animate.min.js"></script>
<script src="lib/Chart.js"></script>
</head>
<body ng-app='TestProject'>

  <div ng-view></div>

<script src="angular/app.js"></script>
<script src="angular/controllers.js"></script>
</body>
</html>

然后创建一个新的html文件，应该像你在routeProvider中一样，并且应该在view文件夹里面，因为它查看/ home.html

内容必须是：

<div class="interface" ng-controller="SelectionController">
    <div style="height: 10%">
    <a href="http://www.somewebsite.com"><img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif"></a>
    <center><h1>{{ title }}</h1></center>
    </div>
    <div style="height:5%">
    <p>Having trouble? <a href="http://www.somewebsite.com/contact.shtml">Request Support</a>
    <p style="bottom: 50px; position:fixed; size:8px">Footer Text
    </div>
</div>

这就是角度的作用方式。

问候。

Angular：ng-view没有显示任何内容

2 个答案: