angularjs - angular-js 2 or 3 ng-view for slide -

i need add 2 o 3 slider page angularjs reading json. code should that:

 <div class="wrapper">      <div id="navigation">...</div>       <div class="slider">         <ul class="painting">             <li>             <a href="#"><img src="img/01.jpg" height="240" width="237"/></a>             <h1>title</h1>             <h2>description</h2>             </li>             <li>...</li>             <li>...</li>         </ul>     </div>     <div class="slider">         <ul class="illustration">             <li>             <a href="#"><img src="img/01.jpg" height="240" width="237"/></a>             <h1>title</h1>             <h2>description</h2>             </li>             <li>...</li>             <li>...</li>         </ul>     </div>  <div class="footer"></div> </div> 

i code 2 template: 1 list of slide , 1 detail. add ng-view first div.slider , when click on image, details template open inside div.slider ..instead need clean , print inside body.

by now, index:

<div id="wrapper">         <div id="navigation">...</div>      <div id="portfolio" class="slidercont first">         <div ng-view class="slider"></div>     </div>     <div class="slidercont">         <div class="slider"></div>     </div>     <div class="slidercont">         <div class="slider"></div>     </div>     <div class="slidercont last">         <div class="slider"></div>     </div> </div> 

this list.html template:

<ul class="works"> <li ng-repeat="work in works">     <a href="#/works/{{work.id}}"><img src="{{work.thumburl}}" height="240" width="237"/></a>     <h1>{{work.testo1}}</h1>     <h2>{{work.testo2}}</h2> </li> </ul> 

my controller.js:

function sliderlistctrl($scope, $http) {   $http.get('json/slider1.json').success(function(data) {     $scope.works = data;   });  } function sliderdetailctrl($scope, $routeparams, $http) {   $http.get('json/' + $routeparams.workid + '.json').success(function(data) {     $scope.work = data;   }); } 

and in end, app.js:

angular.module('worklist', []). config(['$routeprovider', function($routeprovider) { $routeprovider.   when('/works', {templateurl: 'partials/work-list.html', controller: sliderlistctrl}).   when('/works/:workid', {templateurl: 'partials/work-detail.html', controller: sliderdetailctrl}).   otherwise({redirectto: '/works'}); }]); 

does have idea?

i not sure if understand question, reading title, 2-3 ng-view, not possible.

you can have 1 ng-view per application, contains application itself.

if want add partial templates, can use ng-include allow add templates want inside others.

on other hand, there ui-router project have different way add templates views.