<!--Main -->
<div ng-app="multi-view" ng-view></div>
<!-- list.html -->
<ul ng-repeat="name in names">
<li><a href="#/hello/{{name}}">{{name}}</a></li>
</ul>
<!-- hello.html -->
<h1>Hello {{name}}</h1>
<a href="#/">back</a>
<script>
angular.module('multi-view', []).
config(function($routeProvider) {
$routeProvider.
when('/', {controller:ListCtrl, templateUrl:'partials/list.html'}).
when('/hello/:name', {controller:HelloCtrl, templateUrl:'partials/hello.html'}).
otherwise({redirectTo:'/'});
});
function ListCtrl($scope) {
$scope.names = ['Batman', 'Robin', 'Angular.js'];
}
function HelloCtrl($scope, $routeParams) {
$scope.name = $routeParams.name;
}
</script>