所以总的来说，我想用 AngularJS 构建一个单页应用程序，并且我希望我的页面为公共用户和注册用户提供不同的内容，因此我将导航栏、内容和页脚部分放入不同的视图中。结构如下所示：
- 索引.html
- 脚本.js
- 导航栏.html
- 内容.html
- 页脚.html
- uirouter.html
这是uirouter.html的代码
<div ng-include="home.navbar"></div>
<div ng-include="home.content"></div>
<div ng-include="home.footer"></div>
这是script.js的代码
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
});
});
myApp.controller('RouteCtrl', function($scope) {
$scope.home = {
"navbar": "navbar.html"
"content": "content.html",
"footer": "footer.html"
}
});
并将 ng-app、ng-controller 和 ng-view 放在index.html中
...
<body ng-app="myApp" ng-controller="RouteCtrl" id="home" data-spy="scroll" data-target=".navbar-collapse" data-offset="100">
<div ng-view=""></div>
...
所有视图都加载得很好，但问题是当我单击导航栏上的链接时，例如应该引用视图上每个元素的“功能”和“定价”，它不起作用。这里navbar.html是怎样的
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <img src="images/logo.png" alt="logo"></a> </div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
所以“功能”和“定价”应该引用content.html中的这些元素
...
<div id="containerfeatures" class="container">
<div class="row mainFeatures" id="features">
...
<div class="row PageHead" id="pricing">
...
页面被重定向而不是引用元素，这里是 url
http://localhost/app/#/pricing
认为应该提到这个..
http://localhost/app/#pricing
我还是 AngularJS 的新手，所以我还在到处徘徊。这是我在执行此操作时遵循的教程：使用多个 ng-view 单页
有人可以帮忙指出我的错误或我应该怎么做才能使它们起作用吗？任何帮助将不胜感激，非常感谢。