【发布时间】：2014-09-30 12:56:21
【问题描述】：
我已经学习 angular.js 一个星期了，我正在尝试做一个练习项目。 当我看到 HTML 代码时， 部分被视为只是
以下是我的文件
app/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>
app/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";
}]);
app/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 文件存在于部分目录中，并带有一些随机文本。
【问题讨论】：
-
你检查路由点击的http请求了吗？调试它。看看它是否得到解决。
-
您确定您为 templateUrl 提供了正确的路径吗？要了解更多信息，您可以检查元素并观察控制台是否有任何错误。
-
感谢您的回复。我可以在路由单击时看到 http 请求，并且正在从部分访问正确的文件。但是， 仍然被视为 。一旦我删除“data-ng-view”，正确的类就会应用到 div
标签： javascript html angularjs ng-view