Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

August 12, 2015

Angular Custom Services in TypeScript: Factory vs Service

Filed under: AngularJS,TypeScript @ 1:14 pm
Tags: , , ,

In my prior post (http://bit.ly/DeborahK_AngularServices) I outlined the difference between the factory pattern and service pattern when building a custom Angular service with JavaScript. In this post we’ll look at the differences when the Angular custom service is written in TypeScript.

Angular Custom Service

The basic code to create an Angular custom service in TypeScript is the same for both the factor pattern and the service pattern.

Here is an example of a simple custom service written in TypeScript, missing only the Angular module registration:

module app.common {
    export interface IHelloService {
        sayHello(text: string): string;
        sayGoodbye(text: string): string
    }

    export class HelloService implements IHelloService {
        sayHello(text: string): string {
            return “Hello ” + text;
        };
        sayGoodbye(text: string): string {
            return “Goodbye ” + text;
        };
    }
    <Module Registration Here>
}

This code begins with a TypeScript module. The TypeScript module encapsulates the code within an Immediately Invoked Function Expression (IIFE) and provides a clean namespace for the service.

The interface defines the intent of the service. The service intends to provide a sayHello method and a sayGoodbye method. Both take in a string parameter and return a string.

The service class is exported so that it can be used from any other Angular code, such as an Angular controller. The class implements the defined interface, thereby committing to implement every property and method defined in that interface. In our case, it is committing to implement the two methods.

The primary difference between the factory pattern and service pattern when building an Angular service with TypeScript is the module registration. Let’s take a look at how that registration is different.

Service Pattern

When using the service pattern, the TypeScript code to register the service with an Angular module is straightforward.

Simply call the service method:

angular
        .module(“helloWorld”)
        .service(“helloService”,
                         HelloService);

Insert the above code into the service example in place of <Module Registration Here> and you have a working service using the service pattern.

Factory Pattern

Using the factory pattern, the registration code is a little more complex.

As shown in the prior post (http://bit.ly/DeborahK_AngularServices), an Angular factory returns an object. When building the service with a TypeScript class, a class itself cannot return an object. Properties and methods of the class can return an object, but the class itself cannot.

So when using the factory pattern with TypeScript, the trick is to define a function that creates an instance of the service and returns an object. The code for that looks like this:

function factory(): HelloService {
    return new HelloService();
}

angular
    .module(“helloWorld”)
    .factory(“helloService”,
                     factory);

Insert the above code into the service example in place of <Module Registration Here> and you have a working service using the factory pattern.

Enjoy!

For more information on this and many other techniques when building an Angular application with TypeScript, check out my Pluralsight course: “Angular with TypeScript”

AngularWTypeScript2

1 Comment

  1.   Ron — March 13, 2016 @ 8:37 pm    Reply

    Thank you for breaking this down – the bit about service pattern vs factory pattern with typescript was extremely helpful.

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs