UI Router - added another state

Author: skozlov

demo/bootstrap/js/routerServerPaginationApp.js

@@ -22,6 +22,11 @@
                 templateUrl: 'views/router-server-pagination.html',
                 controller: MyAppController
             })
+            .state('anotherView', {
+                url: '/anotherView',
+                templateUrl: 'views/anotherView.html',
+                controller: MyAppController
+            })
     }
 
     function MyAppController($scope, myAppFactory, $state) {
@@ -34,7 +39,14 @@
                 direction: 'asc'
             }
         };
+        $scope.UI = {};
         $scope.gridActions = {};
+        $scope.goToAnotherState = function() {
+            $state.go('anotherView');
+        };
+        $scope.back = function() {
+            $state.go('orders');
+        };
         myAppFactory.getStatuses().then(function (resp) {
             $scope.UI.statusOptions = resp.data;
         })

demo/bootstrap/ui-router.html

@@ -36,7 +36,16 @@
         </ul>
     </div>
 </nav>
-<div ui-view></div>
+<div class="container">
+    <div class="margin-bottom-basic">
+        <h3>Angular Data Grid - UI Router Server Pagination.</h3>
+        <a href="https://github.com/angular-ui/ui-router">UI Router</a> plus all features for server pagination.<br/>
+        <a href="https://github.com/angular-ui/ui-router">UI Router</a> can be used in both modes (hash and html5).
+        <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
+    </div>
+    <hr>
+    <div ui-view></div>
+</div>
 </body>
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->

demo/bootstrap/views/anotherView.html

@@ -0,0 +1,4 @@
+<h3>Another View</h3>
+<div class="form-group">
+    <button class="btn btn-primary" ng-click="back()">Back</button>
+</div>

demo/bootstrap/views/router-server-pagination.html

@@ -1,12 +1,7 @@
 <div class="container">
-    <div class="margin-bottom-basic">
-        <h3>Angular Data Grid - UI Router Server Pagination.</h3>
-        UI Router plus all features for server pagination<br/>
-        Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality.
-        Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
-        <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
+    <div class="form-group">
+        <button class="btn btn-primary" ng-click="goToAnotherState()">Go to another state</button>
     </div>
-    <hr>
     <div class="row">
         <div>
             <div class="col-md-4">
@@ -117,8 +112,8 @@ <h3>Angular Data Grid - UI Router Server Pagination.</h3>
         <table class="table table-bordered">
             <thead>
             <tr>
-                <th width="30%" sortable="orderNo" class="sortable">Order #</th>
-                <th width="30%" sortable="datePlaced" class="sortable">Date Placed</th>
+                <th width="30%" sortable="orderNo" class="sortable">Order # </th>
+                <th width="30%" sortable="datePlaced" class="sortable">Date Placed </th>
                 <th class="st-sort-disable th-dropdown">
                     <select class="form-control width-15"
                             filter-by="status"
@@ -131,7 +126,7 @@ <h3>Angular Data Grid - UI Router Server Pagination.</h3>
                         </option>
                     </select>
                 </th>
-                <th sortable="total" class="sortable">Total</th>
+                <th sortable="total" class="sortable">Total </th>
             </tr>
             </thead>
             <tbody>