AngularJS Example:

by icub3d

HTML

<div ng-app="test">
  
    <div ng-view></div>  

    <!-- CACHE FILE: list.html -->
    <script type="text/ng-template" id="list.html">
        <table class="table table-striped table-condensed">
            <thead>
                <tr><th>Name</th><th>E-mail</th></tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="item in items"
                    data-ng-click="goto_detail(item.id)">
                        <td>{{item.name}}</td>
                        <td>{{item.email}}</td>
                </tr> 
            </tbody>
        </table>
    </script>

    <!-- CACHE FILE: detail.html -->
    <script type="text/ng-template" id="detail.html">
        <div>
            <div>Name: {{item.name}}</div>
            <div>E-mail: {{item.email}}</div>
            <div><button class="btn btn-primary"
                    data-ng-click="goto_list()">
                Back To List
            </button><div>
        </div>          
    </script>

</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0.min.js"></script>
<style>

JavaScript

angular.module('test', []).
config(function($routeProvider) {
    $routeProvider.
    when('/list', {
        controller: ListCtrl,
        templateUrl: 'list.html'
    }).
        when('/detail/:id', {
        controller: DetailCtrl,
        templateUrl: 'detail.html'
    }).
    otherwise({
        redirectTo: '/list'
    });
});

data = [
    {
    id: 0,
    name: "John",
    email: "[email protected]"},
{
    id: 1,
    name: "James",
    email: "[email protected]"},
{
    id: 2,
    name: "Jill",
    email: "[email protected]"}
];


function ListCtrl($scope, $location) {
    $scope.items = data;
    
    $scope.goto_detail = function(id) {
        $location.url('/detail/' + id);
    };
}

function DetailCtrl($scope, $location, $routeParams) {
    $scope.item = data[$routeParams.id];

    $scope.goto_list = function() {
        $location.url('/list');
    };
}