Many Angular applications require external API calls to Create, Read, Update, Delete (CRUD) data. Creating a reusable API factory simplifies the API call process by introducing a global CRUD object that can be used across all of your controllers. Promises are a core feature of AngularJS and uses the $http service to perform HTTP GETs, POSTs, PUTs and DELETEs on a API / URL.
First, we will create the API Promise Factory, api.promise.factory.js
'use strict'; myApp.factory('apiPromise', ['$window', '$http', '$q', '$log', apiPromise]); function apiPromise($window, $http, $q, $log) { var apiUrl = 'http://somethingapi.api.com'; /** * * @param urlPath * @returns {*} */ var get = function(urlPath,data) { var url = apiUrl + urlPath; $log.debug("Sending GET request to [" + urlPath + "]"); return $http.get(url); }; /** * * @param urlPath * @param data * @returns {*} */ var post = function(urlPath, data) { var url = apiUrl + urlPath; $log.debug("Sending POST request to [" + urlPath + "] and sent DATA [" + data + "]"); return $http.post(url, data); }; /** * * @param urlPath * @param data * @returns {*} */ var put = function(urlPath, data) { var url = apiUrl + urlPath; $log.debug("Sending PUT request to [" + urlPath + "] and sent DATA [" + data + "]"); return $http.put(url, data); }; /** * * @param urlPath * @returns {*} */ var remove = function(urlPath, data) { var url = apiUrl + urlPath; $log.debug("Sending DELETE request to [" + urlPath + "]"); return $http.delete(url); }; return { /** * * @param data * @returns {*} */ getSomething: function(data) { var apiPath = '/something/'; return get(apiPath, data); }, /** * * @param data * @returns {*} */ createSomething: function(data) { var apiPath = '/something/create/'; return post(apiPath, data); }, /** * * @param data * @returns {*} */ updateSomething: function(data) { var apiPath = '/something/update/'; return put(apiPath, data); }, /** * * @param data * @returns {*} */ deleteSomething: function(data) { var apiPath = '/something/delete'; return remove(apiPath, data); } }; }
Next, we will create a controller to handle the specific click events / requests on the UI (Create, Update, Delete), something.controller.js
function somethingCtrl($scope, $rootScope, $log, apiPromise,somethingFactory, sessionFactory) { $scope.sendGet = function (data) { somethingFactory.getSomething(data) .then( function (data) { //Success Function $log.debug("SUCCESS - " + JSON.stringify(data)); }, function (error) { //Error Function $log.debug("FAIL - " + JSON.stringify(error)); }); }; $scope.sendCreate = function (data) { somethingFactory.createSomething(data) .then( function (data) { //Success Function $log.debug("SUCCESS - " + JSON.stringify(data)); }, function (error) { //Error Function $log.debug("FAIL - " + JSON.stringify(error)); }); }; $scope.sendUpdate = function (data) { somethingFactory.updateSomething(data) .then( function (data) { //Success Function $log.debug("SUCCESS - " + JSON.stringify(data)); }, function (error) { //Error Function $log.debug("FAIL - " + JSON.stringify(error)); }); }; $scope.sendDelete = function (data) { somethingFactory.deleteSomething(data) .then( function (data) { //Success Function $log.debug("SUCCESS - " + JSON.stringify(data)); }, function (error) { //Error Function $log.debug("FAIL - " + JSON.stringify(error)); }); }; }
Next, we will create the factory that will initialize the API requests, something.factory.js
'use strict'; /** * @name somethingFactory * @description * * Factory that maintains the current session information of the user */ myApp.factory('somethingFactory', ['$log','$q','apiPromise', somethingFactory, data]); function somethingFactory($log,$q,apiPromise, data) { $log.debug("somethingFactory Initialized"); /** * Contains all code that is executed when this factory is initialized */ function init(){ $scope.Data = apiPromise.getSomething(data); }; //Call the init function to initialize things init(data); /** * Export the variables/functions for this factory */ return { getSomething : function(data) { return apiPromise.getSomething(data); }, createSomething : function(data) { return apiPromise.createSomething(data); }, updateSomething : function (data) { return apiPromise.updateThemePublishStatus(data); }, deleteSomething : function(data) { return apiPromise.deleteSomething(data); }, } };
Lastly, we will want to create the view and call specific API calls:
In your index.html (wrapper) add in the following controllers / factory includes in <head></head>:
<script type="public/services/something.controller.js"></script> <script type="public/services/something.factory.js"></script> <script type="public/services/api.promise.factory.js"></script>
Create a partial / template to handle your data, something.html:
<h1><span style="color: #cc0000;">Something</span> Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <table class="table table-condensed" ng-controller="somethingController"> <div style="padding: 15px 0;"> <input type="text" style="width: 820px; padding-left: 20px;" /> <input type="button" ng-click="createSomething(data)" class="button btn-primary" value="Create Something" /> </div> <thead> <tr> <th>ID</th> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr ng-repeat="data as data"> <td>{{data.id}}</td> <td>{{data.firstname}}</td> <td>{{data.lastname}}</td> <td>{{data.email}}/td> <td><a href="#" ng-click="sendEdit(data.id);" class="btn btn-success btn-small">Edit</a> <a href="#" ng-click="sendDelete(data.id);" class="btn btn-danger btn-small">Delete</a></td> </tr> </tbody> </table>
Categories AngularJS, API Factory
0 Comments