How to call custom back-end methods (parsing objects) using Typescript and Angular resources <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>