Level 23
The User API could be extracted to UserServices and ApiServices, but if I were actually writing an app I would build an APIProvider. If I were building a large app I would break it into Ap provideri, Http Endpoints, request service, url resolver, etc. services. However, to simplify here is an example
I have not tested or run the code, but here is how I would do it
- Blade example
<div class="article__col column--50"
ng-controller="UserController as UserCtrl">
<ul>
<li ng-click="UserCtrl.setActive(user,$event)"
ng-repeat="user in UserCtrl.data.users.data track by user.id">
<p ng-bind="user.first_name"></p>
</li>
</ul>
</div>
- AngularJS example.
(function () {
'use strict';
UsersApi.$inject = ['$http', "$q", "_ROUTES", "$window"];
function UsersApi($http,$q, _ROUTES, $window) {
var service = this,
token = $window.localStorage["_token"] || defaultValue;
/**
* API Resource instance. Needed if grow API to include http endpoints etc.
*/
function Resource(resource) {
this.resource = resource;
}
/**
* api service as you will need api.get, api.save, etc
*/
let api = function apiService(resource) {
return new Resource(resource);
};
/**
* Get on a given url
*
* @param url
* @param params
*/
api.get = function apiGet(url, params) {
return http({
method: 'GET',
url: url,
params: params // check for params
});
};
function isOK(response) {
function isErrData(data) {
return data && data._status && data._status === 'ERR';
}
return response.status >= 200 && response.status < 300 && !isErrData(response.data);
}
/**
* Call $http once url is resolved
*/
function http(config) {
return $q.when(config.url)
.then(function(url) {
config.url = url;
return $http(config);
}).then(function(response) {
return isOK(response) ? response.data : $q.reject(response);
});
}
function hasUserRoute(url) {
// can do further validation regex or string etc
return (angular.isUndefined(url) ?_ROUTES.USERS : url) + token;
}
/**
*Get all users of api url
*/
service._getUsers = function (url, params = {}) {
return api.get(hasUserRoute(url), params)
.then(function (result) {
return result;
});
};
return {
getUsers: function (url, params) {
return service._getUsers(url, params);
}
}
}
UserController.$inject = ['$scope','UsersApi'];
function UserController($scope,UsersApi) {
let vm = this,
getAllUsers = function () {
UsersApi
.getUsers()
.then(function (results) {
// you would do data and error validation here as well. For brevity sake ill let you handle
// this is now used in blade or html
vm.data = {
users: results,
};
});
};
vm.$onInit = function () {
// note: not good practice because there is no url or params being passed but just an example. The right way would be based on a method you would resolve url to a server and return the url to pass through to http method, but lets use as example
getAllUsers();
};
}
angular.module('myapp')
.factory('UsersApi', UsersApi)
.controller('UserController', UserController)
.constant("_ROUTES", {
USERS: 'http://localhost:8000/api/user/list?token=',
})
})();