我已经学习 angular.js 一个星期了，我正在尝试做一个练习项目。当我看到 HTML 代码时， < div ng-view > 部分被视为只是 < ! -- ngView: -->
以下是我的文件
应用程序/index.html
<html data-ng-app="RhythmicWorks">
<head>
<title>RhytmicWorks Software</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="jquery.videoBG/jquery.videoBG.js"></script>
<script src="js/videobg.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<!-- The following div includes the logo as well as the nav bar -->
<div data-ng-controller="common" class="common">
<div class="mainLogo">{{mainLogo}}</div>
<nav>
<ul class="fancyNav">
<li data-ng-repeat="item in navBarItems" id="{{item.id}}">
<a href="{{item.href}}">{{item.name}}</a>
</li>
</ul>
</nav>
</div>
<div class="content" data-ng-view></div>
</body>
</html>
应用程序/js/controllers.js
'use strict'
var RhythmicWorksControllers = angular.module('RhythmicWorksControllers',[]);
RhythmicWorksControllers.controller('common',['$scope','navBarData',function($scope,navBarData){
//$scope.navBarItems = navBarData.query();
$scope.navBarItems = [{
"name":"Home",
"href":"#/home",
"id":"home"
},
{
"name":"News",
"href":"#/news",
"id":"news"
},
{
"name":"About us",
"href":"#/about",
"id":"about"
},
{
"name":"Services",
"href":"#/services",
"id":"services"
},
{
"name":"Contact us",
"href":"#/contact",
"id":"contact"
}];
//Main logo text. Can be replaced with a link to the logo
$scope.mainLogo = "RhythmicWorks";
}]);
RhythmicWorksControllers.controller('homeCtrl', ['$scope', function($scope){
$scope.home = "This is home page";
}]);
RhythmicWorksControllers.controller('newsCtrl', ['$scope', function($scope){
$scope.news = "news page";
}]);
RhythmicWorksControllers.controller('contactCtrl', ['$scope', function($scope){
$scope.home = "contact page";
}]);
RhythmicWorksControllers.controller('aboutCtrl', ['$scope', function($scope){
$scope.home = "This is about page";
}]);
RhythmicWorksControllers.controller('servicesCtrl', ['$scope', function($scope){
$scope.home = "This is services page";
}]);
应用程序/js/app.js
var RhythmicWorks = angular.module('RhythmicWorks',['ngRoute','RhythmicWorksControllers','RhythmicWorksServices']);
RhythmicWorks.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/home',{
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}).
when('/news',{
templateUrl: 'partials/news.html',
controller: 'newsCtrl'
}).
when('/about',{
templateUrl: 'partials/about.html',
controller: 'aboutCtrl'
}).
when('/services',{
templateUrl: 'partials/services.html',
controller: 'servicesCtrl'
}).
when('/contact',{
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
当我单击导航栏中的链接时，网址会更改。如果我检查 HTML 代码，则该部分被视为
注意：如果我将 templateUrl 更改为仅 template :，它可以正常工作。
我无法理解 templateUrl 无法正常工作的原因。正确的部分 html 文件存在于部分目录中，并带有一些随机文本。