laradevitt · February 6, 2016 18:42
diff --git a/app.js b/app.js
 'use strict';

 /**
 * Basic Restangular-ized search front end for RESTful Search API (Drupal)
 * https://github.com/RESTful-Drupal/restful_search_api
 *
 * To accompany restful_search_api_example (example module).
 */
 var app = angular.module('app', ['ngSanitize', 'restangular'])

  .config(['RestangularProvider', function(RestangularProvider) {
    
    // Set the path to the resource provided by restful_search_api_example module
    // in our Drupal installation.
    RestangularProvider.setBaseUrl('http://example.com/api/basic_search/');
    
    // Use the response interceptor to customize the data that is returned.
    RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
      var extractedData;
      
      if (operation === 'getList') {
        
        if (url.search('basic_search/') != -1) {
          
          // Returned items.
          extractedData = data.data;
          
          // Total number of returned items.
          extractedData.count = data.count;
        }
      }
      return extractedData;
    });
  }])

  .run(['Restangular', function(Restangular) {
    
    Restangular.setErrorInterceptor(
      function(response) {
        if (response.status == 401) {
          console.log("Login required... ");
        } else if (response.status == 404) {
          console.log("Resource not available...");
        } else {
          console.log("Response received with HTTP error code: " + response.status );
        }
        return false;
      }
    );
  }])

  .controller('DrupalSearchAPIController', ['$scope', 'Restangular', function ($scope, Restangular) {

    // Default data-related values.
    $scope.totalItems = 0;

    // How many items to return for each page.
    var itemsPerPage = 10;
    
    // When a page is selected in the pager, update our scope and perform
    // a look-up.
    $scope.setPage = function (page) {
      getList(page);
    };

    // Form submit function.
    $scope.submit = function(form) {
      
      if (form.$invalid) {
        return;
      }
      
      // Join keywords with '+'.
      $scope.keys = $.grep($scope.keywords.split(' '), Boolean).join('+');
      
      getList(1);
    };
    
    // Do the actual look-up.
    var getList = function(page) {
    
      $scope.page = page;
      
      var query = {
        range: itemsPerPage,
        page: page,
        sort: '-relevance'
      }
      
      Restangular.all($scope.keys).getList(query).then(
        function(list) {
          $scope.nodes = list[0];
          $scope.totalItems = list.count;

          // Set up the pager.
          $scope.pages = new Array(calculatePages());
          $scope.previous = page > 1 ? page - 1 : false;
          $scope.next = $scope.pages.length > page ? page + 1 : false;
        }, function errorCallback() {}
      );
    }
    
    var calculatePages = function() {
      var totalPages = itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / itemsPerPage);
      return Math.max(totalPages || 0, 1);
    };
    
  }]);
  
diff --git a/index.html b/index.html
 <!doctype html>
 <html class="no-js" lang="">
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title>Restangular-ized search front end for RESTful Search API (Drupal)</title>
  </head>
  <body data-ng-app="app">
    
    <div data-ng-controller="DrupalSearchAPIController">
    
      <form name="searchForm" role="form">
        <input type="text" name="keywords" placeholder="Search" data-ng-model="keywords" required />
        <button data-ng-click="submit(searchForm)">Go</button>
      </form>
      
      <p data-ng-show="searchForm.keywords.$error.required && !searchForm.keywords.$pristine">You must type something!</p>
      
      <p data-ng-show="!searchForm.keywords.$pristine && nodes.length">
        {{ totalItems }} matches on <em>{{ keys }}</em>.
      </p>

      <p data-ng-show="!searchForm.$pristine && !nodes.length">
        Sorry, no matches.
      </p>

      <div data-ng-show="totalItems > 0">
        <article data-ng-repeat="node in nodes">
          <header>
            <h2>{{ node.title }}</h2>
          </header>
          <span data-ng-bind-html="node.body"></span>
        </article>
      </div>
      
      <ul data-ng-if="totalItems > 0">
        <li data-ng-if="previous"><a data-ng-click="setPage(previous)" data-ng-href="#">Previous</a></li>
        <li data-ng-repeat="i in pages track by $index" data-ng-class="{current: page == $index + 1}"><a data-ng-click="setPage($index + 1)" data-ng-href="#">{{$index + 1}}</a></li>
        <li data-ng-if="next"><a data-ng-click="setPage(next)" data-ng-href="#">Next</a></li>
      </ul>  
      
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.1.4.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-sanitize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
    <script src="js/app.js"></script>
  </body>
 </html>
	'use strict';

	/**
	* Basic Restangular-ized search front end for RESTful Search API (Drupal)
	* https://github.com/RESTful-Drupal/restful_search_api
	*
	* To accompany restful_search_api_example (example module).
	*/
	var app = angular.module('app', ['ngSanitize', 'restangular'])

	.config(['RestangularProvider', function(RestangularProvider) {

	// Set the path to the resource provided by restful_search_api_example module
	// in our Drupal installation.
	RestangularProvider.setBaseUrl('http://example.com/api/basic_search/');

	// Use the response interceptor to customize the data that is returned.
	RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
	var extractedData;

	if (operation === 'getList') {

	if (url.search('basic_search/') != -1) {

	// Returned items.
	extractedData = data.data;

	// Total number of returned items.
	extractedData.count = data.count;
	}
	}
	return extractedData;
	});
	}])

	.run(['Restangular', function(Restangular) {

	Restangular.setErrorInterceptor(
	function(response) {
	if (response.status == 401) {
	console.log("Login required... ");
	} else if (response.status == 404) {
	console.log("Resource not available...");
	} else {
	console.log("Response received with HTTP error code: " + response.status );
	}
	return false;
	}
	);
	}])

	.controller('DrupalSearchAPIController', ['$scope', 'Restangular', function ($scope, Restangular) {

	// Default data-related values.
	$scope.totalItems = 0;

	// How many items to return for each page.
	var itemsPerPage = 10;

	// When a page is selected in the pager, update our scope and perform
	// a look-up.
	$scope.setPage = function (page) {
	getList(page);
	};

	// Form submit function.
	$scope.submit = function(form) {

	if (form.$invalid) {
	return;
	}

	// Join keywords with '+'.
	$scope.keys = $.grep($scope.keywords.split(' '), Boolean).join('+');

	getList(1);
	};

	// Do the actual look-up.
	var getList = function(page) {

	$scope.page = page;

	var query = {
	range: itemsPerPage,
	page: page,
	sort: '-relevance'
	}

	Restangular.all($scope.keys).getList(query).then(
	function(list) {
	$scope.nodes = list[0];
	$scope.totalItems = list.count;

	// Set up the pager.
	$scope.pages = new Array(calculatePages());
	$scope.previous = page > 1 ? page - 1 : false;
	$scope.next = $scope.pages.length > page ? page + 1 : false;
	}, function errorCallback() {}
	);
	}

	var calculatePages = function() {
	var totalPages = itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / itemsPerPage);
	return Math.max(totalPages \|\| 0, 1);
	};

	}]);
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<base href="/">
	<meta charset="utf-8">
	<title>Restangular-ized search front end for RESTful Search API (Drupal)</title>
	</head>
	<body data-ng-app="app">

	<div data-ng-controller="DrupalSearchAPIController">

	<form name="searchForm" role="form">
	<input type="text" name="keywords" placeholder="Search" data-ng-model="keywords" required />
	<button data-ng-click="submit(searchForm)">Go</button>
	</form>

	<p data-ng-show="searchForm.keywords.$error.required && !searchForm.keywords.$pristine">You must type something!</p>

	<p data-ng-show="!searchForm.keywords.$pristine && nodes.length">
	{{ totalItems }} matches on <em>{{ keys }}</em>.
	</p>

	<p data-ng-show="!searchForm.$pristine && !nodes.length">
	Sorry, no matches.
	</p>

	<div data-ng-show="totalItems > 0">
	<article data-ng-repeat="node in nodes">
	<header>
	<h2>{{ node.title }}</h2>
	</header>
	<span data-ng-bind-html="node.body"></span>
	</article>
	</div>

	<ul data-ng-if="totalItems > 0">
	<li data-ng-if="previous"><a data-ng-click="setPage(previous)" data-ng-href="#">Previous</a></li>
	<li data-ng-repeat="i in pages track by $index" data-ng-class="{current: page == $index + 1}"><a data-ng-click="setPage($index + 1)" data-ng-href="#">{{$index + 1}}</a></li>
	<li data-ng-if="next"><a data-ng-click="setPage(next)" data-ng-href="#">Next</a></li>
	</ul>

	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-2.1.4.min.js"><\/script>')</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-sanitize.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
	<script src="js/app.js"></script>
	</body>
	</html>