ng-include example

by e_kurbanov

HTML

<div ng-app="App">
  <div ng-controller="Ctrl">
  <button ng-click="nextSlide();">next</button>
  <button ng-click="prevSlide();">prev</button>
    <hr/>
    <div class="slide-animate-container">
      <div class="slide-animate" ng-include="currentTemplate.url"></div>
    </div>
  </div>
  
  
  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
  </script>
  
  <!-- template2.html -->
  <script type="text/ng-template" id="template2.html">
    Content of template2.html
  </script>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
<style>

.slide-animate-container {
  position:relative;
  background:white;
  border:1px solid black;
  height:150px;
  overflow:hidden;
}

.slide-animate.ng-enter, .slide-animate.ng-leave {
  transition:all 0.5s ease;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
}

.slide-animate.ng-enter {
  left:-100%;
}
.slide-animate.ng-enter.ng-enter-active {
  left:0;
}

.slide-animate.ng-leave {
  left: 0;
}
.slide-animate.ng-leave.ng-leave-active {
  left:100%;
}

JavaScript

angular.module('App', ['ngAnimate']);

function Ctrl($scope) {
  $scope.templates =
    [ { name: '1', url: 'template1.html'}
    , { name: '2', url: 'template2.html'} ];
  $scope.currentTemplate = $scope.templates[0];
    
  $scope.i = 0;     
    
  $scope.nextSlide = function () {
  		$scope.i++
      if($scope.i === $scope.templates.length){
    		$scope.i = 0;
   	  };
      $scope.currentTemplate = $scope.templates[$scope.i]
  }
  
  $scope.prevSlide = function () {
  		if ($scope.i === 0) { 
        $scope.i = $scope.templates.length; 
      }
      $scope.i--
      $scope.currentTemplate = $scope.templates[$scope.i];
  }
	
  

    
    console.log($scope.templates)
}