title: How to call custom back-end methods (parsing objects) using Typescript and Angular resources
body: <p>I've been struggling for weeks now to get custom service calls to work using Typescript / Angular / C#.  I can't seem to find any viable solution online, and the more I look the more I get confused.</p>
  
  <p>My current solution has been structured based mostly on Pluralsight courses.
  I'm understanding the general connectivity from HTML => Angular (controllers/ models / services), but struggling with the Angular services => C# API controller connection.</p>
  
  <p>Current structure:</p>
  
  <p><strong>app.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>module App {
      
      var main = angular.module("Scheduler", ["ngRoute", "App.Services"]);
      main.config(routeConfig);
  
      routeConfig.$inject = ["$routeProvider"];
      function routeConfig($routeProvider: ng.route.IRouteProvider): void {
  
          $routeProvider
              .when("/schedule",
              {
                  templateUrl: "/app/scheduler/views/scheduler.html",
                  controller: "ScheduleCtrl as sch"
  
              })
              .otherwise("/schedule");
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>services.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>module App.Services {
      angular.module("App.Services", ["ngResource"]);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>controller.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>module App.Scheduler {
      
      export interface IScheduleParams extends ng.route.IRouteParamsService {
          scheduleId: number;
      }
  
      export class ScheduleCtrl implements IScheduleModel {
  
          scheduleResource: ng.resource.IResourceClass&lt;App.Services.IScheduleResource&gt;;
  
          static $inject = ["$routeParams", "scheduleService", "$scope"];
          constructor(private $routeParams: IScheduleParams,
                      private scheduleService: App.Services.SchedulerService,
                      public schedule: Schedule) {
  
              this.scheduleResource = scheduleService.getScheduleResource();
  
              this.schedule = new Schedule(0, 0, new Array&lt;PaymentEntry&gt;(), 0, new Array &lt;ScheduleEntry&gt;());
          }
  
          generateSchedule(): void {
  
              //todo: Need to call the backend service here to generate entries
  
             var returnedSchedules = this.scheduleService.generateSchedules(this.schedule);
  }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>schedulerService.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>module App.Services {
  
  
  //INTERFACES
      //services
      export interface ISchedulerService {
          getScheduleResource(): ng.resource.IResourceClass&lt;IScheduleResource&gt;;
          generateSchedules(schedule: App.Scheduler.Schedule): App.Scheduler.ScheduleEntry[];  //custom service call
      }
  
      //resources
      export interface IScheduleResource 
          extends ng.resource.IResource&lt;App.Scheduler.ISchedule&gt; {
      }
  
      
  //CLASSES
      //Schedule Service
      export class SchedulerService implements ISchedulerService {
  
          static $inject = ["$resource"];
  
          constructor(private $resource: ng.resource.IResourceService) {
          }
  
          //Read operations (single / list)  -- this works fine
          getScheduleResource(): ng.resource.IResourceClass&lt;IScheduleResource&gt; {
              return this.$resource("api/scheduler/GetSchedules/:scheduleId");
          }
  
          //custom operations  -- **!! NEED HELP HERE PLEASE !!**
          generateSchedules(schedule: App.Scheduler.Schedule): App.Scheduler.ScheduleEntry[] {
  
            return this.$resource("api/schedule/GenerateSchedules/:schedule");
            //I need to be able to pass in a Schedule object and receive an array of objects back
          }
  
      }
  
      angular
          .module("Scheduler")
          .service("schedulerService", SchedulerService);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>models.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>module App.Scheduler {
  
  //INTERFACES
  
      export interface ISchedule {
          param1: number;
          payments: Array&lt;IPaymentEntry&gt;;
          schedules?: Array&lt;IScheduleEntry&gt;;
  
      }
  
      export interface IPaymentEntry {
          param1: number;
          param2: number;
      }
  
      export interface IScheduleEntry {
          param1: number;
          param2: string; 
          param3: number;
      }
  
  //CLASSES
      export class Schedule {
  
          constructor(public param1?: number,
                      public payments?: Array&lt;IPaymentEntry&gt;,
                      public schedules?: Array&lt;IScheduleEntry&gt;) {
  
          }
      }
  
      export class PaymentEntry implements IPaymentEntry {
  
          constructor(public param1?: number,
                      public param2?: number) {
      
          }
      }
  
      export class ScheduleEntry implements IScheduleEntry {
  
          constructor(public param1: number,
                      public param2: string,
                      public param3: number) {
          }
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>ApiController.CS</strong></p>
  
  <pre><code>public class SchedulerController : ApiController
  {
      public IEnumerable&lt;Schedule&gt; GetSchedules()
      {
          //...
      }
  
      public Schedule GetSchedules(int id)
      {
          //...        
      }
  
      [HttpPost]
      public IEnumerable&lt;PaymentEntry&gt; GenerateSchedules([FromBody]Schedule schedule)
      {
         //todo: add random logic here 
          return new Schedule();
      }
  </code></pre>
  
  <p>Any guidance or a working example of how to successfully call the <em>generateSchedules</em> method from the <strong>schedulerService.ts</strong> to the <strong>ApiController.CS</strong> would be greatly appreciated to and from the API controller would be greatly appreciated.</p>