AngularJS

Partials Transiton

by Bretto

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/javascript" src="https://raw.github.com/rthprog/fixie/master/fixie_min.js"></script>

<div ng-app="myApp">
    
  <ng-view></ng-view>
    
  <hr />
    
  <div ng-controller="AppCtrl">  
  <li ng-repeat="slide in slides">
      <a href="#/slides/{{slide.id}}"><span>{{slide.id}}: {{slide.title}}</span></a>
    </li>
  </div>
    
    <script type="text/ng-template" id="slides/template.html">
        <div ng-include src="currentSlideId"></div>
   </script>
    
    <script type="text/ng-template" id="1">
        template 1 stuff
    </script>
    
    <script type="text/ng-template" id="2">
        Stuff from template 2
    </script>
</div>

JavaScript

angular.module('myApp', []).
config(function($routeProvider) {
    $routeProvider.when('/slides/:slideId', {
        template: 'slides/template.html',
        controller: MyCtrl
    });
});

function AppCtrl($scope) {
    $scope.slides = [
        {
        "title": "Slide 1",
        "id": "1"},
    {
        "title": "Slide 2",
        "id": "2"}
    ];
}

function MyCtrl($scope, $routeParams) {
    $scope.currentSlideId = $routeParams.slideId;
}