所以通常我想用AngularJS构建一个单页应用程序，我希望我的页面对公共用户和注册用户有不同的内容，所以我把我的导航栏、内容和页脚部分放在不同的视图中。结构如下：
- index.html
- script.js
- 导航栏.html
- content.html
- 页脚.html
- uirouter.html
这是uireouter.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应用程序、ng控制器和ng视图放在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>
...
所有视图都加载得很好，但问题是当我点击导航栏上的链接时，比如"Features"one_answers"Pricing"，它们应该指代视图上的每个元素，但它不起作用。以下是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>
因此，"功能"one_answers"定价"应指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视图单页
有人能帮我指出我的错误吗？或者我该怎么做才能让它们发挥作用？任何帮助都将不胜感激，非常感谢。
您只需要在href的s中添加一个/。
<a href="#/home">Home</a>
或者，如果您为SEO将hashPrefix(使用$locationProvider)设置为!，则它将是
<a href="#!/home">Home</a>
Angular将$location路径视为'/pathpart1/pathpart2'
您尚未在配置中的路由提供程序中添加/home和/features etc路由。此外，href应如@charlietfl 所示