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.

Related Content you might be interested in

Current Title:

Small book image
Angular Services
Feb, 2017 | 294 pages
Small book image
Web Development with MongoDB and Node
Bruno Joseph Dmello
Sep, 2017 | 330 pages
Small book image
Ionic 2 Blueprints
Sani Yusuf | Indermohan Singh
Aug, 2016 | 336 pages
Small book image
Hands-on Full Stack Development with Angular 5 and Firebase
Uttam Agarwal
Feb, 2018 | 256 pages
Table of Contents (15 chapters)
Angular Services
Angular Services
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Setting Up the Environment
Setting Up the Environment
Introducing Angular
There is no backward compatibility
Previous knowledge of AngularJS 1.x is not necessary
The relationship between ECMAScript, AtScript, and TypeScript
Setting up tools and getting started!
Setting up the seed project
Setting up an Angular project in WebStorm
Frontend developers versus backend developers
Introducing The Sherlock Project
Summary
2
Introducing Wire-Frames
Introducing Wire-Frames
What is a module?
Components - the reusable objects
The root component
Updating the Bootstrap file
Running the web server
Bootstrapping versus root component
The big picture
The navigation system
The Angular router module
The collector wire-frame
Accessing a component via root
The rating wire-frame
The notifier wire-frame
Updating the navigation system
Switching to SPA
The Evidence Tree Builder Wire-frame
The AI Wire-frame
The Report Generator Wire-frame
The Auto-pilot Wire-frame
The Accuracy Manager Wire-frame
Summary
3
The Collector Service - Using Controllers to Collect Data
The Collector Service - Using Controllers to Collect Data
What is a service and why do we need them?
Updating the collector component
The collector service
The Dependency Injection
Property binding
Class binding
Style binding
Event binding
Getting the real news
Angular and observable objects
Updating the collector component
Saving objects in a database
Setting up The Sherlock Project on Firebase
Saving objects to the database
Working with data via lists
Summary
4
The Rating Service - Data Management
The Rating Service - Data Management
Setting the ranking parameters
The Google Trends service
The rating service structure
The rating logic structure
The rating component
The rating template
Creating a custom pipe
Summary
5
The Notifier Service - Creating Cron Jobs in Angular
The Notifier Service - Creating Cron Jobs in Angular
Cron job versus Interval/Timeout
Introducing node-cron
Getting and rating the news periodically
The Notifier component
The Notifier service
Automating tasks with Zappier
In App notifications
News maintenance
Summary
6
The Evidence Tree Builder Service - Implementing the Business Logic
The Evidence Tree Builder Service - Implementing the Business Logic
Clustering and similarity - retrieving documents of interest
The evidence service
The evidence component
The evidence template
Understanding the bag of words model
Corpus - how to build the body
The Corpus functions
Introducing the Google Custom Search Engine
Updating the component and the service
How to choose a subject for a road test
How can we live On Mars?
Getting insights via clustering
Data visualization
Processing the network graph data
Decorating a network graph
Processing custom events
Summary
7
The Report Generator Service - Creating Controllers to Set Report Template
The Report Generator Service - Creating Controllers to Set Report Template
Saving network graph data to the database
The report generator component
The report generator template
Creating new report templates
Updating the report template
Deleting The Report Template
Rendering The Reports
Printing the report
Summary
8
The Accuracy Manager Service - Putting It All Together
The Accuracy Manager Service - Putting It All Together
Introducing the anatomy of cure and prevention
Why are test frameworks not practical here?
The accuracy manager component
The accuracy manager view
The accuracy service
Summary

The root component

In this book, we will have a couple of components and services that will work together to achieve a goal. But we need a root component to act as a communication center between all these players. This root component will control the application flow. Let's start by creating this component:

  1. Inside the WebStorm IDE, open the app.ts file, and notice the export line:

            export class AppComponent {}

  2. As we saw before, the export keyword simply indicates that we are willing to share this class with every other player in the project. In other words, if anyone needs this class, they just need to import it in their own body.

  3. The plan is to make the AppComponent class as the root component for our project, that is why we have the Component function imported from the Angular2 core module:

            import {Component} from 'angular2/core'; 
        export class Sherlock {}

  4. This code should be self explanatory. Normally each import command has two main parameters. First we need to mention...

Previous Section
End of Section 4
Next Section