Routing with ui-router

HTML

<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="MyApp">
    <div ui-view="header"></div>
    <div ui-view="side"></div>
    <div ui-view="content"></div>
    <script type="text/ng-template" id="header.html">
        header
    </script>
    <script type="text/ng-template" id="side.html">
        <a href="#" ui-sref="home">home</a>
        <a href="#" ui-sref="login">login</a>
    </script>
    <script type="text/ng-template" id="content.html">
        content
    </script>
    <script type="text/ng-template" id="login.html">
        login
    </script>
</div>

JavaScript

angular.module("MyApp", ["ui.router"]);
angular.module("MyApp").config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state("home", {
        url: "/home",
        views: { 
            "header": { template: "<b>Header 1</b>" },
            "side": { templateUrl: "side.html" },
            "content": { templateUrl: "content.html" }
        }
    })
    .state("login", {
        url: "/login",
        views: { 
            "header": { template: "<b>Header 2</b>" },
            "side": { templateUrl: "side.html" },
            "content": { templateUrl: "login.html" }
        }
    });
    $urlRouterProvider.otherwise("/home");
}]);