AngularJS: implementare un motore di ricerca tradizionale

I motori di ricerca senza AJAX prevedono che i risultati si aprano in una nuova pagina.

Per prima cosa definiamo la route, la view ed il relativo controller:

angular.module('MyApp').config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
	
  $routeProvider.
  when('/', {
  	// Le altre route
  }).when('/search/:q', {
    controller: 'SearchCtrl',
    templateUrl: 'app/views/search.html'
  }).otherwise({ redirectTo: '/' });

  $locationProvider.html5Mode(false).hashPrefix('!');

}]);

L'URL della ricerca accetta un parametro, ossia il termine della ricerca. Definiamo quindi il controller che gestisce il form di ricerca:

angular.module('MyApp').controller('SearchFormCtrl', ['$scope', '$window', function($scope, $window) {
	$scope.query = '';
	$scope.search = function() {
		$window.location.href = '#!/search/' + $scope.query;
	};
}]);

Poi creiamo il form di ricerca:

<form method="get" role="search" ng-controller="SearchFormCtrl" ng-submit="search()">
      <div class="form-group">
          <input type="text" class="form-control" ng-model="query" placeholder="Search" />
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
</form>

Il controller che gestisce i risultati dovrà effettuare una chiamata alle API utilizzando il parametro della route:

angular.module('MyApp').controller('SearchCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
	
	$scope.searchResults = [];
	$scope.queryValue = $routeParams.q;

	$http.get('/api/search', {
		params: {
			q: window.encodeURIComponent($scope.queryValue)
		}
	}).then(function(response) {
		$scope.searchResults = response.data.results;	
	}, function(errorResponse) {
		// Gestione errore
	});
	
}]);

Infine la nostra view dovrà mostrare i risultati solo se questi sono presenti:

<div id="search-results" ng-controller="SearchCtrl">
	<h2>Search results for {{queryValue}}</h2>
	<ul class="results" ng-if="searchResults.length > 0">
		<li ng-repeat="result in searchResults">
			<!--...-->
		</li>	
	</ul>
	<p ng-if="searchResults.length == 0">No results found</p>
</div>