Add search feature

Author: mraible

app/api/search/people.json

@@ -0,0 +1,35 @@
+[
+  {
+    "id": 1,
+    "name": "Peyton Manning",
+    "phone": "(303) 567-8910",
+    "address": {
+      "street": "1234 Main Street",
+      "city": "Greenwood Village",
+      "state": "CO",
+      "zip": "80111"
+    }
+  },
+  {
+    "id": 2,
+    "name": "Demaryius Thomas",
+    "phone": "(720) 213-9876",
+    "address": {
+      "street": "5555 Marion Street",
+      "city": "Denver",
+      "state": "CO",
+      "zip": "80202"
+    }
+  },
+  {
+    "id": 3,
+    "name": "Von Miller",
+    "phone": "(917) 323-2333",
+    "address": {
+      "street": "14 Mountain Way",
+      "city": "Vail",
+      "state": "CO",
+      "zip": "81657"
+    }
+  }
+]

app/app.js

@@ -3,6 +3,7 @@
 // Declare app level module which depends on views, and components
 angular.module('myApp', [
   'ui.router',
+  'ngResource',
   'myApp.view1',
   'myApp.view2',
   'myApp.version'

app/css/app2.css

@@ -5,3 +5,21 @@ p {
 body {
     padding: 10px;
 }
+
+table {
+    margin-top: 10px;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+th {
+    text-align: left;
+    border-bottom: 2px solid #ddd;
+    padding: 8px;
+}
+
+td {
+    border-top: 1px solid #ddd;
+    padding: 8px;
+}
+

app/index.html

@@ -18,6 +18,7 @@
   <ul class="menu">
     <li><a ui-sref="view1">view1</a></li>
     <li><a ui-sref="view2">view2</a></li>
+    <li><a ui-sref="search">search</a></li>
   </ul>
 
   <!--[if lt IE 7]>
@@ -31,9 +32,13 @@
   <!-- build:js js/seed.min.js -->
   <script src="bower_components/angular/angular.js"></script>
   <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
+  <script src="bower_components/angular-resource/angular-resource.js"></script>
   <script src="app.js"></script>
   <script src="view1/view1.js"></script>
   <script src="view2/view2.js"></script>
+  <script src="search/search.state.js"></script>
+  <script src="search/search.controller.js"></script>
+  <script src="search/search.service.js"></script>
   <script src="components/version/version.js"></script>
   <script src="components/version/version-directive.js"></script>
   <script src="components/version/interpolate-filter.js"></script>

app/search/search.controller.js

@@ -0,0 +1,19 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('myApp')
+        .controller('SearchController', SearchController);
+
+    SearchController.$inject = ['SearchService'];
+
+    function SearchController(SearchService) {
+        var vm = this;
+
+        vm.search = function () {
+            SearchService.search(vm.term, function (response) {
+                vm.searchResults = response;
+            });
+        };
+    }
+})();

app/search/search.html

@@ -0,0 +1,23 @@
+<form ng-submit="vm.search()">
+    <input type="search" name="search" ng-model="vm.term">
+    <button>Search</button>
+</form>
+
+<table ng-show="vm.searchResults.length">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Phone</th>
+        <th>Address</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="person in vm.searchResults">
+        <td>{{person.name}}</td>
+        <td>{{person.phone}}</td>
+        <td>{{person.address.street}}<br/>
+            {{person.address.city}}, {{person.address.state}} {{person.address.zip}}
+        </td>
+    </tr>
+    </tbody>
+</table>

app/search/search.service.js

@@ -0,0 +1,24 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('myApp')
+        .factory('SearchService', SearchService);
+
+    SearchService.$inject = ['$resource'];
+
+    function SearchService($resource) {
+        var Search = $resource('/api/search/people.json');
+
+        Search.search = function (term, callback) {
+            Search.query(function (response) {
+                var results = response.filter(function (item) {
+                    return JSON.stringify(item).toLowerCase().includes(term.toLowerCase());
+                });
+                return callback(results);
+            });
+        };
+
+        return Search;
+    }
+})();

app/search/search.state.js

@@ -0,0 +1,18 @@
+(function () {
+    'use strict';
+
+    angular.module('myApp')
+        .config(stateConfig);
+
+    stateConfig.$inject = ['$stateProvider'];
+
+    function stateConfig($stateProvider) {
+        $stateProvider
+            .state('search', {
+                url: '/search',
+                templateUrl: 'search/search.html',
+                controller: 'SearchController',
+                controllerAs: 'vm'
+            });
+    }
+})();

bower.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "angular": "~1.5.0",
     "angular-loader": "~1.5.0",
+    "angular-resource": "~1.5.0",
     "angular-mocks": "~1.5.0",
     "html5-boilerplate": "^5.3.0",
     "angular-ui-router": "^0.3.1"