Book Image

Angular Services

Book Image

Angular Services

Overview of this book

A primary concern with modern day applications is that they need to be dynamic, and for that, data access from the server side, data authentication, and security are very important. Angular leverages its services to create such state-of-the-art dynamic applications. This book will help you create and design customized services, integrate them into your applications, import third-party plugins, and make your apps perform better and faster. This book starts with a basic rundown on how you can create your own Angular development environment compatible with v2 and v4. You will then use Bootstrap and Angular UI components to create pages. You will also understand how to use controllers to collect data and populate them into NG UIs. Later, you will then create a rating service to evaluate entries and assign a score to them. Next, you will create "cron jobs" in NG. We will then create a crawler service to find all relevant resources regarding a selected headline and generate reports on it. Finally, you will create a service to manage accuracy and provide feedback about troubled areas in the app created. This book is up to date for the 2.4 release and is compatible with the 4.0 release as well, and it does not have any code based on the beta or release candidates.
Table of Contents (15 chapters)
Angular Services
About the Author
About the Reviewer
Customer Feedback


I always had a thing for the less traveled roads and it reflects itself in this book, Angular Services, as well. When it is about showing the power of front-end frameworks, there are tons of tutorials and contents on how to build To-Do list applications, or time trackers, or any other use cases and path ways which has been explored, explained and exhausted excessively.

What I've aimed for in this book is slightly different. Yes, the subject still Angular Services and we learn about all Angular framework features along the way, but the vehicle is a Machine Learning flavored application called 'The Sherlock Project' which explores:

  • Reactive eXtension (rx.js) and observable objects

  • The importance of a good Model

  • The HTTP requests and how Angular Http module or third party libraries handle it

  • The 3 way data-binding offered by the modern noSQL database: Firebase Realtime Database

  • Data visualization provided by VizJS

What makes this book different is the use of Regression algorithm to explore major news agency outlets and other online resources, in order to get some insight about a news item. Basically we are using Angular Services as a host to several tools and concepts, so they work together and deliver four main tasks:

  • collect data

  • analyse and organize keywords

  • generate reports for items we are interested in

  • and finally evaluate the accuracy of the generated reports

Perhaps that is the main reason that unlike other books, we didn't invest much efforts on how pretty our application looks, rather we focused on what it does and how unique it is. The code is open source and you are most welcome to take it to the next level by adding missing bits and pieces and decorating it with all the pretty bells and whistles that a front-end application deserves.

What this book covers

Chapter 1, Setting Up the Environment, tells you about what you need to get a basic Angular project up and running. The WebStorm IDE (offered by JetBrains) is free for non-commercial use and open source project. The official seed project (offered by Angular team) introduced in this chapter contains all the dependencies (Angular, TypeScript, WebPack and so on) plus the basic components to render a simple page.

Chapter 2, The Wire-Frames, demonstrates the road map we are going to explore for the rest of the book. It explains the components we are going to implement for this project and briefly introduces the services we are going to create to deliver the task of each remaining chapters.

Chapter 3, The Collector Service - Using Controllers to Collect Data, describes the basic Angular concepts like Components, data-binding, decorators and so on during implementation an HTTP service for hitting on RSS outputs and gathering some news. This is where Firebase Realtime Database will be introduced as well and we will see how to use it to record JSON objects as database entries.

Chapter 4, The Rating Service - Data Management, introduces the pipes for the first time and implements a sorting pipe for ordering data in a particular way. In this chapter, we will see how to use TypeScript classes not only to implement Components and Services, but also for creating business logic for models as well.

Chapter 5, The Notifier Service - Creating Cron Jobs in Angular, creates the logic for automated tasks. It will demonstrate a data flow which utilizes the services created in the previous chapters for collecting, rating, and storing qualified news in a list ready to be fetched and notified by the application or later via email. We will see how to implement the helper functions for calculating dates, finding out dated items, and keeping the database clean on each automated job cycle, as well.

Chapter 6, The Evidence Tree Builder Service - Implementing the Business Logic, presents the idea of gathering evidence which supports investigation for the article of our interest. We will study the ways we evaluate an article and how to measure, weigh down, and lift up the value of certain words in any article. We'll learn how to see an article as a bag of words and how to use this concept to calculate. Thus chapter also introduces two major libraries Google Custom Search Engine (CSE) and VisJS for data visualization. 

Chapter 7, The Report Generator Service - Creating Controllers to Set Report Template, exposes the possible ways for implementing parent child interaction mechanisms where the child gets data models provided by the parent and fires back requests to the parent. We will learn how to implement components to read the result of previously saved data objects, parse them, and assemble new objects that can be used as building blocks of a report.

Chapter 8, The Accuracy Manager Service - Putting It All Together, implements the cure and prevention codes inside the application and save the programming resources by halting undesired situations. We will learn how to use global variables exported from the application module in order to store local variables and analyze their contents on demand.

What you need for this book

A usual front-end development machine with basic hardware configuration, plus latest stable versions of NodeJS, WebStorm and official Angular seed project is all you need to follow along and implement the concepts introduced in each chapter. The seed project in chapter one, contains all you need to get started. Later in the following chapters, you will need a cloud account (Google account) to benefit from CSE (Custom Search Engine) and Firebase. 

Who this book is for

If you are a JavaScript developer who is moving on to Angular and have some experience in developing applications, then this book is for you. You need not have any knowledge of on Angular or its services.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, path names, dummy URLs, user input, and Twitter handles are shown as follows: "The next lines of code read the link and assign it to the to the BeautifulSoup function."

A block of code is set as follows:

#import packages into the project 
from bs4 import BeautifulSoup 
from urllib.request import urlopen 
import pandas as pd

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<script src="d3.js" charset="utf-8"></script>  
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: [default] exten => s,1,Dial(Zap/1|30) exten => s,2,Voicemail(u100) exten => s,102,Voicemail(b100) exten => i,1,Voicemail(s0) Any command-line input or output is written as follows:

C:\Python34\Scripts> pip install -upgrade pip
C:\Python34\Scripts> pip install pandas

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "In order to download new modules, we will go to FilesSettings | Project Name | Project Interpreter."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

  1. Log in or register to our website using your e-mail address and password.

  2. Hover the mouse pointer on the SUPPORT tab at the top.

  3. Click on Code Downloads & Errata.

  4. Enter the name of the book in the Search box.

  5. Select the book for which you're looking to download the code files.

  6. Choose from the drop-down menu where you purchased this book from.

  7. Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR / 7-Zip for Windows

  • Zipeg / iZip / UnRarX for Mac

  • 7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at We also have other code bundles from our rich catalog of books and videos available at Check them out!

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to and enter the name of the book in the search field. The required information will appear under the Errata section.


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.


If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.