/* Put your css in here */


<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>
<div>
     <div>
         <h1>Page 2 content goes here...</h1>
     </div>
</div>
<div>
     <div>
         <h1>Page 3 content goes here...</h1>
     </div>
</div>
<div>
     <div>
         <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
         <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
         <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
     </div>
     <div>
         <div ui-view=""></div>
     </div>
</div>
<!DOCTYPE html>
<head>
  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-app="myApp">
  <h2>AngularJS Ui router - Demonstration</h2>

  <div data-ui-view=""></div>
</body>

</html>

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

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/PageTab");

    $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url: "/Page1",
            templateUrl: "Page1.html"
        })
        .state("PageTab.Page2", {
            url: "/Page2",
            templateUrl: "Page2.html"
         })
        .state("PageTab.Page3", {
            url: "/Page3",
            templateUrl: "Page3.html"
        });
});