patternjavascriptMinor
Simple AngularJS controller for REST API
Viewed 0 times
restangularjssimplecontrollerforapi
Problem
We record software builds from our build machine into a database and for practice purposes I'm building a little web dashboard for it.
The API is REST (WebApi) and provides access to query for Products, Branches, Profiles and specific Builds.
The controller queries all products (each product contains a list of branches and profiles it has been build for) as well as all branches and profiles anything was ever built for.
It then goes on to query the last 10 builds for each of the branches and profiles a product was built for.
This is my first attempt at anything related to web-programming so I thought I'll get someone to look at it. Here is the code:
```
(function (angular) {
var app = angular.module("app", ["ngResource"]);
app.factory("Product", ["$resource", function ($resource) {
return $resource("/api/Product");
}]);
app.factory("Build", ["$resource", function ($resource) {
return $resource("/api/Build");
}]);
app.factory("BasicResource", ["$q", "$http", function ($q, $http) {
var resourceFactory = {
async: function(type) {
var d = $q.defer();
var result = $http.get("/api/" + type).success(function() {
d.resolve(result);
});
return d.promise;
}
};
return resourceFactory;
}]);
app.controller("MainCtrl", ["$rootScope", "$scope", "$q", "$http", "BasicResource", "Product", "Build", function ($rootScope, $scope, $q, $http, BasicResource, Product, Build) {
$rootScope.title = "Build Dashboard";
$scope.Builds = [];
$q.all([
Product.query().$promise,
BasicResource.async("Branch"),
BasicResource.async("Profile")
]).then(function(data) {
$scope.Products = data[0];
$scope.Branches = data[1].data;
$scope.Profiles = data[2].data;
}).then(function() {
var allBuildQuerie
The API is REST (WebApi) and provides access to query for Products, Branches, Profiles and specific Builds.
The controller queries all products (each product contains a list of branches and profiles it has been build for) as well as all branches and profiles anything was ever built for.
It then goes on to query the last 10 builds for each of the branches and profiles a product was built for.
This is my first attempt at anything related to web-programming so I thought I'll get someone to look at it. Here is the code:
```
(function (angular) {
var app = angular.module("app", ["ngResource"]);
app.factory("Product", ["$resource", function ($resource) {
return $resource("/api/Product");
}]);
app.factory("Build", ["$resource", function ($resource) {
return $resource("/api/Build");
}]);
app.factory("BasicResource", ["$q", "$http", function ($q, $http) {
var resourceFactory = {
async: function(type) {
var d = $q.defer();
var result = $http.get("/api/" + type).success(function() {
d.resolve(result);
});
return d.promise;
}
};
return resourceFactory;
}]);
app.controller("MainCtrl", ["$rootScope", "$scope", "$q", "$http", "BasicResource", "Product", "Build", function ($rootScope, $scope, $q, $http, BasicResource, Product, Build) {
$rootScope.title = "Build Dashboard";
$scope.Builds = [];
$q.all([
Product.query().$promise,
BasicResource.async("Branch"),
BasicResource.async("Profile")
]).then(function(data) {
$scope.Products = data[0];
$scope.Branches = data[1].data;
$scope.Profiles = data[2].data;
}).then(function() {
var allBuildQuerie
Solution
-
You can use this
You would call it as such:
You would still have some asymmetry relative to Products, but not as much.
-
If I understand correctly, you want some kind of advice about pagination. If you really get too much data, maybe you could print only the branches and profiles for one product at a time.
If you have too many branches and profiles for a single product, you should probably only output either branches or profiles, and paginate those.
You can use this
unexplodeWord function:var explodedWords = [{"0":"h","1":"e","2":"l","3":"l","4":"o"},
{"0":"w","1":"o","2":"r","3":"l","4":"d"}]
var words = explodedWords.map(unexplodeWord);
// Converts {"0":"h","1":"e"} to "he".
function unexplodeWord(explodedWord) {
var chars = [];
angular.forEach(explodedWord, function(char) {
chars.push(char);
});
return chars.join('');
}
words.forEach(function(item) { console.log("word: " + JSON.stringify(item)); });You would call it as such:
$scope.Products = data[0];
$scope.Branches = data[1].map(unexplodeWord);
$scope.Profiles = data[2].map(unexplodeWord);You would still have some asymmetry relative to Products, but not as much.
-
If I understand correctly, you want some kind of advice about pagination. If you really get too much data, maybe you could print only the branches and profiles for one product at a time.
If you have too many branches and profiles for a single product, you should probably only output either branches or profiles, and paginate those.
Code Snippets
var explodedWords = [{"0":"h","1":"e","2":"l","3":"l","4":"o"},
{"0":"w","1":"o","2":"r","3":"l","4":"d"}]
var words = explodedWords.map(unexplodeWord);
// Converts {"0":"h","1":"e"} to "he".
function unexplodeWord(explodedWord) {
var chars = [];
angular.forEach(explodedWord, function(char) {
chars.push(char);
});
return chars.join('');
}
words.forEach(function(item) { console.log("word: " + JSON.stringify(item)); });$scope.Products = data[0];
$scope.Branches = data[1].map(unexplodeWord);
$scope.Profiles = data[2].map(unexplodeWord);Context
StackExchange Code Review Q#57548, answer score: 2
Revisions (0)
No revisions yet.