0

I'm trying to use the multiple views of AngularJS using ng-view and routeProvider but it's not working. Could you please help? Below is the link to my whole Plunk project:

multiple views project

Below is the index.html page:

 <!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>
M.Z.
  • 424
  • 5
  • 12
  • http://stackoverflow.com/questions/17544558/multiple-ng-view-in-single-template-angular-js – a.u.b Jun 08 '16 at 11:04

1 Answers1

0

remove the .html from href="#/view1.html" and `href="#/view2.html"

Modify:

.when('/index', {
  template: ''
})
.otherwise({
  redirectTo: '/index'
});
E. Abrakov
  • 463
  • 2
  • 6
  • Thank you for your feedback. That has helped. However, whenever I reload the index.html page I'm automatically redirected to view.html. I can't see index.html without the views! Can you please help me figure out why this is happening? – M.Z. Jun 08 '16 at 11:30
  • i modified my answer, You need to add new state for index without views. – E. Abrakov Jun 08 '16 at 11:45
  • Thank you. This works now perfectly. But I don't why you added this piece of code: – M.Z. Jun 08 '16 at 12:00
  • .when('/index', { template: '' }) – M.Z. Jun 08 '16 at 12:00
  • this is a state of your application. so if application can be in this state then you should describe it – E. Abrakov Jun 08 '16 at 12:11
  • Thank you for your reply. I'm not sure what you mean by that? – M.Z. Jun 08 '16 at 12:17
  • Each `.when` is a route for your application, it is like state of application. So if you want to show page without any views inside then you need to describe a route for this – E. Abrakov Jun 08 '16 at 12:38