Created
August 16, 2014 22:32
-
-
Save cef62/4fc0ba8f0b3ca4d16c3d to your computer and use it in GitHub Desktop.
Simple search API invocation using command pattern in angular js // source http://jsbin.com/zomuke/6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| }); | |
| } | |
| }; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment