Create BookService to handle the data retrieval and filtering

kdechant · Aug 4, 2015 · 6491a94 · 6491a94
1 parent d40b15b
commit 6491a94
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
         <script src="scripts/app.js"></script>
         <script src="scripts/controllers/mainCtrl.js"></script>
+        <script src="scripts/services/bookService.js"></script>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
     </head>
     <body ng-app="ngdemoApp">

diff --git a/scripts/app.js b/scripts/app.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular
+var app = angular
   .module('ngdemoApp', [
     'ngRoute'
   ])

diff --git a/scripts/controllers/mainCtrl.js b/scripts/controllers/mainCtrl.js
@@ -1,12 +1,15 @@
 'use strict';
 angular.module('ngdemoApp')
-    .controller('MainCtrl', function ($scope) {
+    .controller('MainCtrl', function ($scope, BookService) {
 
-        // some data for the table
-        $scope.books = [
-            {author: 'J.R.R. Tolkien', title: 'The Hobbit'},
-            {author: 'Douglas Adams', title: "Hitchhiker's Guide to the Galaxy"},
-            {author: 'Herman Melville', title: 'Moby Dick'},
-        ];
+        // a simple filter object, with default filter values
+        $scope.filters = { author: '', title: '' };
 
+
+        $scope.update = function() {
+            BookService.all($scope.filters).then(function(data) {
+                $scope.books = data;
+            });
+        }
+        $scope.update();
     });
diff --git a/scripts/services/bookService.js b/scripts/services/bookService.js
@@ -0,0 +1,34 @@
+'use strict';
+app.service('BookService', function ($q) {
+
+    // some data for the table
+    this.books = [
+        {author: 'J.R.R. Tolkien', title: 'The Fellowship of the Ring'},
+        {author: 'J.R.R. Tolkien', title: 'The Two Towers'},
+        {author: 'J.R.R. Tolkien', title: 'The Return of the King'},
+        {author: 'Douglas Adams', title: "Hitchhiker's Guide to the Galaxy"},
+        {author: 'Herman Melville', title: 'Moby Dick'},
+    ];
+
+    this.all = function (filterObject) {
+
+        // This service acts like it called $http.get and returned the resulting
+        // proimse. Really it just builds a promise around some mock data.
+        var defer = $q.defer();
+
+        var result = [];
+        for (var i = 0; i < this.books.length; i++) {
+            if (filterObject.author != '' && this.books[i].author.toLowerCase().indexOf(filterObject.author.toLowerCase()) == -1) {
+                continue;
+            }
+            if (filterObject.title != '' && this.books[i].title.toLowerCase().indexOf(filterObject.title.toLowerCase()) == -1) {
+                continue;
+            }
+            result.push(this.books[i]);
+        }
+        defer.resolve(result);
+
+        return defer.promise;
+    };
+
+});
diff --git a/views/main.html b/views/main.html
@@ -4,6 +4,10 @@ <h1>Angular Query String Demo</h1>
         <th>Author</th>
         <th>Title</th>
     </tr>
+    <tr>
+        <td><input type="text" ng-model="filters.author" ng-model-options="{ debounce: 250 }" ng-change="update()"></td>
+        <td><input type="text" ng-model="filters.title" ng-model-options="{ debounce: 250 }" ng-change="update()"></td>
+    </tr>
     <tr ng-repeat="book in books">
         <td>{{ book.author }}</td>
         <td>{{ book.title }}</td>