Question

所以一般来说我想用AngularJS构建一个单页面应用程序，我希望我的页面为公共和注册用户提供不同的内容，因此我将导航栏，内容和页脚部分放入不同的视图中。结构如下所示：

index.html
script.js
navbar.html
content.html
footer.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>
...

所有视图都很好地加载但问题是当我点击导航栏上的链接时，例如＆＃34;功能＆＃34;和＆＃34;定价＆＃34;它应该引用视图中的每个元素，它不起作用。这里 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>

所以＆＃34;功能＆＃34;和＆＃34;定价＆＃34;应该在 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的新手，所以我仍然在这里和那里徘徊。这是我遵循的教程：Use Multiple ng-view Single Page

有人请帮助指出我的错误或我应该做些什么才能使它们发挥作用？非常感谢任何帮助，非常感谢你。

Answer 1

您只需向/添加href即可。

<a href="#/home">Home</a>

或者，如果您为搜索引擎优化设置hashPrefix（使用$locationProvider）到!，那么

<a href="#!/home">Home</a>

Angular将$location路径视为'/pathpart1/pathpart2'

Answer 2

您尚未在配置中的路由提供程序中添加/ home和/ features等路由。 href也应该如@charlietfl

所示

无法使用AngularJS

2 个答案: