Question

我在尝试使用Angular构建的SPA遇到问题。我的问题是（我相信）ng-view。单击页面上的链接时，似乎无法用其他页面的内容填充页面。这是我的 script.js 文件中的代码：

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

app.config(function($routeProvider, $locationProvider){
    $routeProvider
    .when('/', {
        templateUrl : 'challenges/Challenge3/home.html',
        controller : 'mainController'
    })
    .when('/about', {
        templateUrl : 'challenges/Challenge3/about.html',
        controller : 'aboutController'
    })
    .when('/contact', {
        templateUrl : 'challenges/Challenge3/contact.html',
        controller : 'contactController'
    })
    .otherwise({
        redirectTo: 'challenges/Challenge3/'
    });
    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode({
        enabled :  true,
        requireBase : false
    });
});

app.controller('mainController', function($scope){
    $scope.message = 'Home page';
    $scope.title = 'Home';
});

app.controller('aboutController', function($scope){
    $scope.message = 'About page';
    $scope.title = 'About';
});

app.controller('contactController', function($scope){
    $scope.message = 'Contact page';
    $scope.title = 'Contact';
});

这是我要在我的 index.html 文件中注入的位置：

   <body ng-controller="mainController">
    <div class="container">
        <div class="header clearfix">
            <nav role="navigation">
                <ul class="nav nav-pills pull-right">

                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>

                </ul>
            </nav>
        </div>
        <div id="main">
            <div ng-view></div>
            {{ message }}
        </div>
    </div>
</body>

About.html

<h3>About Us</h3>
<p>This is a test page.</p>
<p>Thanks for reading about us!</p>

ng-view未在页面上注入内容

0 个答案: