add ajax sample

Author: Nguyen Sy Thanh Son

app/scripts/app.js

@@ -93,6 +93,22 @@ angular
           }
         }
       })
+      .state('dashboard.ajax',{
+        url:'/ajax',
+        controller: 'SampleCtrl',
+        templateUrl:'views/sample.html',
+        resolve: {
+          loadMyFiles:function($ocLazyLoad) {
+            return $ocLazyLoad.load({
+              name:'sbAdminApp',
+              files:[
+              'scripts/controllers/sample.js',
+              'scripts/services/sample.js'
+              ]
+            })
+          }
+        }
+      })
       .state('dashboard.form',{
         templateUrl:'views/form.html',
         url:'/form'

app/scripts/controllers/sample.js

@@ -0,0 +1,14 @@
+'use strict';
+/**
+ * @ngdoc function
+ * @name sbAdminApp.controller:MainCtrl
+ * @description
+ * # MainCtrl
+ * Controller of the sbAdminApp
+ */
+angular.module('sbAdminApp')
+  .controller('SampleCtrl', function($scope,$position, Sample) {
+      Sample.get().then(function(data){
+          $scope.users = data
+      })
+  });

app/scripts/directives/sidebar/sidebar.html

@@ -13,6 +13,9 @@
             <li ui-sref-active="active">
                 <a ui-sref="dashboard.table"><i class="fa fa-table fa-fw"></i> Tables</a>
             </li>
+            <li ui-sref-active="active">
+                <a ui-sref="dashboard.ajax"><i class="fa fa-table fa-fw"></i> Ajax Sample</a>
+            </li>
             <li ui-sref-active="active">
                 <a ui-sref="dashboard.form"><i class="fa fa-edit fa-fw"></i> Forms</a>
             </li>

app/scripts/services/sample.js

@@ -0,0 +1,11 @@
+angular.module('sbAdminApp').factory('Sample', function($http, $q) {
+    return {
+        get: function(){
+            var deferred = $q.defer();
+            $http.get('scripts/services/sample.json').success(function(data) {
+                deferred.resolve(data)
+            }).error(deferred.reject);
+            return deferred.promise;
+        }
+    }
+});

app/scripts/services/sample.json

@@ -0,0 +1,42 @@
+[{
+    "id": "1",
+    "firstname": "Nguyen Sy",
+    "lastname": "Thanh Son",
+    "username": "thanhson1085"
+},
+{
+    "id": "2",
+    "firstname": "Mark",
+    "lastname": "Otto",
+    "username": "mdo"
+},
+{
+    "id": "3",
+    "firstname": "Athony",
+    "lastname": "Vinc",
+    "username": "anthony"
+},
+{
+    "id": "4",
+    "firstname": "Do",
+    "lastname": "Minh Khai",
+    "username": "minhkhai"
+},
+{
+    "id": "5",
+    "firstname": "Ba Ngoc",
+    "lastname": "Cuong",
+    "username": "bangoccuong"
+},
+{
+    "id": "6",
+    "firstname": "Adam",
+    "lastname": "East",
+    "username": "adam"
+},
+{
+    "id": "7",
+    "firstname": "Larry",
+    "lastname": "Bird",
+    "username": "larry"
+}]

app/views/sample.html

@@ -0,0 +1,43 @@
+<div class="row">
+    <div class="col-lg-12">
+        <h1 class="page-header">Tables</h1>
+    </div>
+    <!-- /.col-lg-12 -->
+</div>
+<!-- /.row -->
+<div class="row">
+    <div class="col-lg-12">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Basic Table
+            </div>
+            <!-- /.panel-heading -->
+            <div class="panel-body">
+                <div class="table-responsive">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>First Name</th>
+                                <th>Last Name</th>
+                                <th>Username</th>
+                            </tr>
+                        </thead>
+                        <tbody ng-repeat="user in users">
+                            <tr>
+                                <td>{{ user.id }}</td>
+                                <td>{{ user.firstname }}</td>
+                                <td>{{ user.lastname }}</td>
+                                <td>@{{ user.username }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <!-- /.table-responsive -->
+            </div>
+            <!-- /.panel-body -->
+        </div>
+        <!-- /.panel -->
+    </div>
+    <!-- /.col-lg-6 -->
+</div>