Home » JavaScript » Angular.js » AngularJs 2 Series: Concept of Services

About Rajeev Hathi

Rajeev Hathi
Rajeev is a senior Java architect and developer. He has been designing and developing business applications for various companies (both product and services). He is co-author of the book titled 'Apache CXF Web Service Development' and shares his technical knowledge through his blog platform techorgan.com

AngularJs 2 Series: Concept of Services

Introduction

In this article I will demonstrate the concept of Services in AngularJs 2. I will show you how to develop a custom alert service that displays a message as an alert notification. We will use Angular CLI (Command Line Interface) to build the AngularJs 2 Service. The article assumes that you have already setup AngularJs with CLI. For more information on setting up Angular CLI you can refer to Build Your Own Component article.

Services are common business functions that are used across Angular application. One good example would be a logging service.

Assuming your Angular application has some of the components performing the logging for audit purpose. In such a case, you will end up have a log method in each of these components. This obviously is a bad design approach as the log method is duplicated across components. If you want to change the semantics of logging then you will need to change the code in all these components which in turn will impact the whole application. So a good design approach will be to have a common service component performing the logging feature. The log method in each of the components will be removed and placed in the specific logging service class. The components can use the logging feature by injecting the logging service. Service injection is one form of dependency injection provided by Angular.

Design Considerations

Services can be used to interact with data. It can be used to provide connection to database and define functions that operate on data like CRUD operations. One can also design the service to provide a remote access to a web resource. It can be used to provide common integration needs like invoking a API of another application. Services can also be an excellent choice to design communication between components of your Angular application. You can build a service that provides a common event handling platform. Last but not the least, one can centralize common business functions used across the application as services. There are various approaches one can take to design a service. While designing services, think common functionality that every aspect of your application uses and transform them into services.

Creating Alert Service

We will create a service named AlertService that will display message as an alert notification. We will use Angular CLI tool to create our service. Open the Node.js command prompt, navigate to <your-project-home>\src\app folder and run the following command:

ng generate service alert

The above command will create two files viz. alert.service.spec.ts and alert.service.ts. You can safely ignore the ‘.spec.ts’ file as this is for testing purpose. Lets look at the alert.service.ts file:

import { Injectable } from [email protected]/core';

@Injectable()
export class AlertService {

	alert(message: string) {
		alert(message);
	}

	constructor() { }

}

The class is automatically named as AlertService. Lets understand the structure of the class. You will observe the @Injectable decorator automatically defined in the class. It means this alert service and any of its dependencies can be automatically injected by other component. As our alert service does not have any dependency with any other service, we can safely omit the @Injectable decorator. Though for design readability Angular recommends that you always define the @Injectable decorator whenever you create any service. We have added the alert() method which simply uses JavaScript native alert function to display the message.
One more important thing to do is to make our AlertService service available to the whole application through the use of providers meta data. The providers meta data must be defined in the app.module.ts (main application module file) file. If you provide the service in a main module file then it is visible to whole application. If you provide it in any component then only that component can use the service. By providing the service at the module level, Angular creates only one instance of AlertService class which can be used by all the components in an application.

import { BrowserModule } from [email protected]/platform-browser';
import { NgModule } from [email protected]/core';

import { AppComponent } from './app.component';
import { AlertService } from './alert.service';
import { OrderSuccessNotificationComponent } from './order-success-notification.component';

@NgModule({
  declarations: [
    AppComponent,
    OrderSuccessNotificationComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [AlertService],
  bootstrap: [AppComponent]
})
export class AppModule { }

The above app.module.ts file has the providers meta data which has our AlertService class defined. Now we can inject this alert service in any component. If you do not provide your service, it cannot be injected by Angular at runtime.

Just like most of the other server and client side frameworks, Angular 2 also has the concept of Dependency Injection. Instances of services or classes can be injected using the constructor. Angular provides the concept of providers meta data to provide a service or any class as a candidate for automatic injection, at runtime, by defining that service or a class in a constructor of the dependent class.

We will create a order success component named OrderSuccessNotificationComponent that will inject our AlertService service class through the constructor to notify the user about the order being processed successfully. For more information on creating Angular components refer to Build Your Own Component article.

import { Component } from [email protected]/core';
import { AlertService } from './alert.service';

@Component({
  selector: 'order-success',
  template: `
  `,
  styles: []
})
export class OrderSuccessNotificationComponent {

	private status: string = "Order created successfully";
	
	constructor(private alertService: AlertService) {
		this.alertService.alert(this.status);
	}

}

Note the use of order-success selector that can be used to display the notification encapsulated in the status variable. Place this element <order-success> in the bootstrap (starting) component of your application. Upon running the application you will see the order success alert notification. The example provided might look trivial but the larger objective is to show how you can make use of services to define common business functionality and use in your application.

Reference: AngularJs 2 Series: Concept of Services from our WCG partner Rajeev Hathi at the TECH ORGAN blog.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

One comment

  1. I really like what you guys are usually up too.
    This sort of clever work and reporting! Keep up the awesome works
    guys I’ve included you guys to my personal blogroll.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook