app.js
/*global angular*/
(function() {
var app = angular.module("census", []);
app.directive("gnomeFilter", function() {
return {
restrict: "E",
templateUrl: "gnome-filter.html",
controller: function($http, DataShareServ) {
var self = this;
self.gnomeList = DataShareServ.data;
self.makeRequest = function() {
console.log("Received submit order");
$http({
method: 'GET',
url: 'https://gnome-census.com/api/v1/gnomes/RedHairGnomes',
}).then(function successCallback(response) {
self.gnomeList = response.data.entries;
}, function errorCallback(response) {
console.log('Error: ' + response);
});
};
},
controllerAs: "filterCtrl"
};
});
app.directive("gnomeList", function() {
return {
restrict: "E",
templateUrl: "gnome-list.html",
controller: function($http, DataShareServ) {
var self = this;
self.list = DataShareServ.data;
//innitialization of the list
$http({
method: 'GET',
url: 'https://gnome-census.com/api/v1/gnomes/AllGnomes',
}).then(function successCallback(response) {
self.list = response.data.entries;
}, function errorCallback(response) {
console.log("Error: " + response);
});
},
controllerAs: "listCtrl"
};
});
// Create the factory that share the Fact
app.factory('DataShareServ', function() {
return {
data: {}
};
});
})();
gnome-filter.html
<form ng-submit="filterCtrl.makeRequest()">
<div>
<button type="submit">Submit</button>
</div>
</form>
gnome-list.html
/*global angular*/
(function() {
var app = angular.module("census", []);
app.controller("gnomeFilter", function(DataShareServ) {
var self = this;
self.listServ = DataShareServ;
self.makeRequest = function() {
self.listServ.request({
hairColor: "red"
});
};
});
app.controller("gnomeList", function(DataShareServ) {
var self = this;
self.listServ = DataShareServ;
self.listServ.request();
self.list = self.listServ.data;
});
// Create the factory that share the Fact
app.factory('DataShareServ', function($http) {
var self = this;
self.list = {};
self.list.data = [];
self.list.request = function(params) {
var theUrl = 'https://gnome-shop-fl4m3ph03n1x.c9users.io/api/v1/gnomes';
if (params.hairColor)
theUrl = theUrl + "?hairColor=" + params.hairColor;
$http({
method: 'GET',
url: theUrl,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}).then(function successCallback(response) {
self.list.data = response.data.entries;
console.log("submitted");
}, function errorCallback(response) {
console.log('Error: ' + response);
});
};
return self.list;
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body>
<!-- Search functionality -->
<form ng-controller="gnomeFilter as filterCtrl" ng-submit="filterCtrl.makeRequest()">
<button type="submit">Get Reddies !!</button>
</form>
<!-- Gnomes list -->
<div ng-controller="gnomeList as listCtrl">
<ul>
<li ng-repeat="gnome in listCtrl.list">
{{gnome.name}}
</li>
</ul>
</div>
</body>
<ul>
<li ng-repeat="gnome in listCtrl.list">
<h3>
{{gnome.name}}
{{gnome.age}}
</h3>
</li>
</ul>
