cef62/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Simple search API invocation using command pattern in angular js" />
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
  <script src="https://rawgit.com/yukatan/commangular/master/dist/commangular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="myApp">

  <div ng-controller="SearchCtrl">
    <form ng-submit="search()">
      <input type="text" ng-model="criteria.q">
    </form>
  </div>

  <div ng-controller="CascadeCtrl">
    <div ng-repeat="(key, product) in products">
      <img ng-src="{{product.img}}" alt="Image not found">
    </div>
  </div>

<script id="jsbin-javascript">
angular.module('myApp', ['commangular'])
  .config(function($commangularProvider ){
    $commangularProvider.mapTo('SearchEvent').asSequence().add('SearchCommand');
  })
  .factory('SearchResults', function () {
    var results = [];
    return {
      getResults: function(){
        return results;
      },
      setResults: function(deal){
        results.push.apply(results,deal);
      },
      clearResults: function(){
        while (results.length) { results.pop(); }
      }
    };
  })
  .factory('Search', function ($http) {
    var search = function (query) {
      return $http({
        method: 'POST',
        url: 'api/v1/search',
        headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
        data: $.param(query)
      });
    };
    return {
      make: search
    };
  })
  .controller('SearchCtrl', function ($scope) {
    $scope.criteria = {};

    $scope.search = function() {
      $scope.dispatch('SearchEvent', {query: $scope.criteria});
    };
  })
  .controller('CascadeCtrl', function ($scope, SearchResults) {
    $scope.products = SearchResults.getResults();
  });

commangular.create('SearchCommand',function(Search, SearchResults, query) {
  return {
    execute: function() {
      // for manual test
      //SearchResults.setResults([{img:'http://bit.ly/1vVB27h'}]);
      Search.make(query)
      .success(function(deal) {
          SearchResults.clearResults();
          SearchResults.setResults(deal);
      })
      .error(function() {
        SearchResults.clearResults();
      });
    }
  };
});
</script>


</body>
</html>

## jsbin.zomuke.js
angular.module('myApp', ['commangular'])
  .config(function($commangularProvider ){
    $commangularProvider.mapTo('SearchEvent').asSequence().add('SearchCommand');
  })
  .factory('SearchResults', function () {
    var results = [];
    return {
      getResults: function(){
        return results;
      },
      setResults: function(deal){
        results.push.apply(results,deal);
      },
      clearResults: function(){
        while (results.length) { results.pop(); }
      }
    };
  })
  .factory('Search', function ($http) {
    var search = function (query) {
      return $http({
        method: 'POST',
        url: 'api/v1/search',
        headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
        data: $.param(query)
      });
    };
    return {
      make: search
    };
  })
  .controller('SearchCtrl', function ($scope) {
    $scope.criteria = {};

    $scope.search = function() {
      $scope.dispatch('SearchEvent', {query: $scope.criteria});
    };
  })
  .controller('CascadeCtrl', function ($scope, SearchResults) {
    $scope.products = SearchResults.getResults();
  });

commangular.create('SearchCommand',function(Search, SearchResults, query) {
  return {
    execute: function() {
      // for manual test
      //SearchResults.setResults([{img:'http://bit.ly/1vVB27h'}]);
      Search.make(query)
      .success(function(deal) {
          SearchResults.clearResults();
          SearchResults.setResults(deal);
      })
      .error(function() {
        SearchResults.clearResults();
      });
    }
  };
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Simple search API invocation using command pattern in angular js" />
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
	<script src="https://rawgit.com/yukatan/commangular/master/dist/commangular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="myApp">

	<div ng-controller="SearchCtrl">
	<form ng-submit="search()">
	<input type="text" ng-model="criteria.q">
	</form>
	</div>

	<div ng-controller="CascadeCtrl">
	<div ng-repeat="(key, product) in products">
	<img ng-src="{{product.img}}" alt="Image not found">
	</div>
	</div>

	<script id="jsbin-javascript">
	angular.module('myApp', ['commangular'])
	.config(function($commangularProvider ){
	$commangularProvider.mapTo('SearchEvent').asSequence().add('SearchCommand');
	})
	.factory('SearchResults', function () {
	var results = [];
	return {
	getResults: function(){
	return results;
	},
	setResults: function(deal){
	results.push.apply(results,deal);
	},
	clearResults: function(){
	while (results.length) { results.pop(); }
	}
	};
	})
	.factory('Search', function ($http) {
	var search = function (query) {
	return $http({
	method: 'POST',
	url: 'api/v1/search',
	headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
	data: $.param(query)
	});
	};
	return {
	make: search
	};
	})
	.controller('SearchCtrl', function ($scope) {
	$scope.criteria = {};

	$scope.search = function() {
	$scope.dispatch('SearchEvent', {query: $scope.criteria});
	};
	})
	.controller('CascadeCtrl', function ($scope, SearchResults) {
	$scope.products = SearchResults.getResults();
	});

	commangular.create('SearchCommand',function(Search, SearchResults, query) {
	return {
	execute: function() {
	// for manual test
	//SearchResults.setResults([{img:'http://bit.ly/1vVB27h'}]);
	Search.make(query)
	.success(function(deal) {
	SearchResults.clearResults();
	SearchResults.setResults(deal);
	})
	.error(function() {
	SearchResults.clearResults();
	});
	}
	};
	});
	</script>


	</body>
	</html>