如何使用ng-view和routeProvider加载多个视图?

时间:2016-06-08 11:00:47

标签: javascript angularjs

我尝试使用ng-view和routeProvider来使用AngularJS的多个视图,但它不起作用。能否请你帮忙?以下是我整个Plunk项目的链接:

multiple views project

以下是index.html页面:

 <!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Routing</title>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
  <link rel="stylesheet" href="css/app.css" />
</head>

<body>
  <ul class="menu">
    <li>
      <a href="#/view1.html">view1</a>
    </li>
    <li>
      <a href="#/view2.html">view2</a>
    </li>
  </ul>
  <div>Below you should see the partial view :) ... </div>
  <div ng-view>
    <p>ng-view should be loading data from view1.html and view2.html right here but it's not working</p>
  </div>



  <script src="app.js"></script>
  <script src="controllers.js"></script>
</body>

</html>

1 个答案:

答案 0 :(得分:0)

.html和`href =&#34;#/ view2.html&#34;

中删除href="#/view1.html"

<强>修改

.when('/index', {
  template: ''
})
.otherwise({
  redirectTo: '/index'
});