Angular 5, Building A Simple Service

Angular 5 is the newest release of the Angular Framework. In this article, we will be looking at how to build a simple service using the angular command line interface, or CLI. In the Angular ecosystem, services refer to the piece that is commonly used for storing data and making HTTP calls.

We will not be making HTTP calls today, instead, we will be storing data within our service to simulate the response of a call and passing that data back to a component. I will not be using any other tools other than Angular 5, npm and Visual Studio Code. First things first, if you haven’t already installed these tools:

To Install NPM, the package manager utilized by Angular

run the command

$ npm install npm@latest -g

To Install The Angular/CLI

$ npm install -g @angular/cli

NPM and Angular are the only tools you will need to install for this example. Any additional packages or components that we will need can be installed via the Angular CLI.

Getting Started, Creating Our Program

In order to create our Angular program, a component with which to consume our service and our service we will run three commands. The first command will generate the program structure:

$ ng new my-service

This may take a minute or two for the CLI to setup everything. When it is complete, go ahead and change directories to my-service. Open a second command line terminal for running additional commands and point this terminal to the same directory.

In our first terminal, once installed, run the command:

$ ng serve

and open a browser to localhost:4200 to see our program. You should see the angular logo big if you’ve been successful.

In our second terminal window, we are going to run a few more commands. We need to generate a component for our application and a service still to provide our data. The CLI provides commands for easily creating both of these. Run the command:

$ ng generate component component/welcome

This will create a folder named component, with a component named welcome, and setup our imports for this component. Then run the command:

$ ng generate service service/user.

This will setup the start of our service, but we still have a couple additional steps to make use of our service still.

So far you should now see the project structure as:

Inside our app.module.ts file though we need to make a few changes. The CLI automatically adds the imports for components, but not for services. We will need to add those by adding the import line

import { UserService } from ‘./service/user.service’

and then adding UserService  into our providers array. Your app.module.ts file should look like this:

Now, the last step to setting up is to import our service into our component. To accomplish this we need to add an import in our component, and dependency inject our service, into the component constructor.

Inside our welcome.component.ts we will need to add the import:

import { UserService } from ‘../../service/user.service’;
If you notice that the reference is pointing two levels back also. We just need to handle our constructor now. Change the constructor inside welcome.component.ts to:
constructor(private userService: UserService) { }
and we are going to create a single variable string called, name, that we will use to get a value from our service. Inside our service, I am going to make a method that returns a name for our name variable. I will name that method getUser, since it is only going to get a username or name.
welcome.component.ts should look like this now.
import { Component, OnInit } from '@angular/core';
import { UserService } from '../../service/user.service';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  name: string;
  constructor(private userService: UserService) { }

  ngOnInit() {
    this.name = this.userService.getUser();
  }

}

Next, take this code from app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to Angular!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

change it to this:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <app-welcome></app-welcome>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

We only want to show a welcome message which will be handled inside our welcome component and the angular logo.

Our welcome component is simple, it is only an H1 tag with a welcome phrase

<h1>
  Welcome {{ name }} to Angular!
</h1>

Right now, since we are serving the application, you will see it in the browser but it just says ‘Welcome  to Angular!’ the next step is to have our service return a value.

Inside of user.service.ts, notice that UserService is not a component, it is an Injectable. Being an injectable is why we must inject it, as a dependency, inside of the component we wish to access it with. I will create an array for holding names and a single method as I stated earlier for returning a name. Normally in a production application, selecting a name would be dynamically driven but for this example I will grab the first name in the array.

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
  private users: string[] = ['alvin', 'simon', 'theodore'];
  constructor() { }
  getUser() {
    return this.users[0];
  }
}

At this point, if you open back up your browser to localhost:4200 then you will now see:

Conclusion

We have now built a simple Angular application, a component, and a service using the new Angular 5 command line interface. I hope you have enjoyed this article. Happy coding!

A Web Developer by trade, find me on Github
A motorcycle enthusiast at heart.
Most days I’d rather be in the woods anywhere.