Angular: Empty Fiddle

http://angularjs.org/

by manikantag

HTML

<div>
    <a href="#/">Index</a> | <a href="#/details/1">Details 1</a> | <a href="#/details/2">Details 2</a>
    
    <div ng-view></div>
</div>

<script type="text/ng-template" id="index.html">
    {{ name }}
</script>

<script type="text/ng-template" id="details.html">
    {{ name }} ({{ id }})
</script>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
              
                  $routeProvider.when('/', {
                      templateUrl: 'index.html',
                      controller: 'IndexCntl'
                  });
                  $routeProvider.when('/details/:id', {
                      templateUrl: 'details.html',
                      controller: 'DetailsCntl',
                      resolve: {resolveData: function($route){
                          return $route.current.params.id;
                      }}
                  });                
              }]);


myApp.controller('IndexCntl', ['$scope',
                               function($scope){
    $scope.name = 'Index';
}]);
    
myApp.controller('DetailsCntl', ['$scope', 'resolveData',
                                  function($scope, resolveData){
    $scope.name = 'Details';
    $scope.id = resolveData;
}]);