StackOverflow_25928741: how-to-use-angularjs-resource-custom-actions

Illustration of answer to http://stackoverflow.com/questions/25928741/how-to-use-angularjs-resource-custom-actions.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.25/angular-resource.min.js"></script>
<div ng-controller="mainCtrl">
  <h4>Query existing technicians:</h4>
  <input type="text" ng-model="ttId" placeholder="teamtechnicianId..." />
  <button ng-click="getTechnician(ttId)">Get technician by ID</button><br />
  <small>(Leave field empty to get all technicians.)</small>
  <hr />
  <form ng-submit="addTechnician(tempTechnician)">
    <h4>Add technician:</h4>
    <label class="form-group">
      Team ID:
      <input type="text" ng-model="tempTechnician.teamId" />
    </label><br />
    <label class="form-group">
      Technician ID:
      <input type="text" ng-model="tempTechnician.technicianId" />
    </label><br />
    <div class="form-group">
      <button type="submit">Add</button>
    </div>
  </form>
</div>

<!-- -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- -->
<!-- Page Footer -->
<small class="footer" ng-controller="FooterCtrl as ctrl">
  <b>Angular v{{ctrl.version.full}}</b> ({{ctrl.version.codeName}})
  <span class="right">
    &copy;
    <a ng-href="{{ctrl.author.url}}" target="_blank">{{ctrl.author.name}}</a>
  </span>
</small>

CSS

.form-group {
  display: inline-block;
  text-align: right;
  width: 275px;
}

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
body { padding-bottom: 22px; }
.footer { background-color: White; border-top: 1px solid rgba(100, 100, 100, 0.33); bottom: 0; display: block; font-size: 0.75em; height: 20px; left: 0; margin: 0 5px; overflow: auto; padding: 5px; position: fixed; right: 0; }
.right { float: right; }

JavaScript

(function () {'use strict';

angular.
  module('myApp', ['ngResource']).
  config(configHttpProvider).
  constant('API_BASE', '/api').
  controller('AppCtrl', AppCtrl).
  factory('TeamTechnician', teamTechnicianFactory);

// Functions - Definitions
function AppCtrl(TeamTechnician) {
  // Variables - Private
  var self = this;
  
  // Functions - Public
  self.addTechnician = addTechnician;
  self.getTechnician = getTechnisian;
  
  // Functions - Definitions
  function addTechnician(newTechnician) {
    TeamTechnician.add(newTechnician);
  }
  
  function getTechnician(teamtechnicianId) {
    if (angular.isUndefined(teamtechnicianId)) {
      TeamTechnician.query();
    } else {
      TeamTechnician.get({teamtechnicianId: teamtechnicianId});
    }
  }
}

function teamTechnicianFactory($resource, API_BASE) {
  // Define the `TeamTechnician` resource class
  return $resource(API_BASE + '/teamtechnicians/:teamtechnicianId', {}, {
    add: {
      method: 'POST',
      url: API_BASE + '/teamtechnicians/:teamId/:technicianId',
      params: {
        teamId: '@teamId',
        technicianId: '@technicianId'
      }
    }
  });
}

function configHttpProvider($httpProvider) {
  // Intercept all `$http` requests, to inspect the requested URL
  $httpProvider.interceptors.push(function interceptorFactory() {
    return {
      request: function interceptRequest(config) {
        alert('Requestd URL:\n' + config.url);
        return config;
      }
    };
  });
}

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
angular.module('myApp').controller('FooterCtrl', function FooterCtrl() {
  this.version = angular.version;
  this.author  = {
    name: 'ExpertSystem',
    url: '//stackoverflow.com/users/2341938/expertsystem'
  };
});