Angular Design Patterns: Implement the Gang of Four patterns in your apps with Angular

Angular Design Patterns

Implement the Gang of Four patterns in your apps with Angular

Mathieu Nayrolles

BIRMINGHAM - MUMBAI

Angular Design Patterns

Copyright © 2018 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Commissioning Editor: Ashwin Nair

Acquisition Editor: Rahul Nair

Content Development Editor: Aditi Gour

Technical Editor: Jinesh Topiwala

Copy Editor: Safis Editing

Project Coordinator: Hardik Bhinde

Proofreader: Safis Editing

Indexers: Mariammal Chettiyar

Graphics: Jason Monteiro

Production Coordinator: Shraddha Falebhai

First published: July 2018

Production reference: 1270718

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-78646-172-8

www.packtpub.com

mapt.io

Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals

Improve your learning with Skill Plans built especially for you

Get a free eBook or video every month

Mapt is fully searchable

Copy and paste, print, and bookmark content

PacktPub.com

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

About the author

Mathieu Nayrolles was born in France and lived in a small village in Côte d'Azur for almost 15 years. He started his computer science studies in France and continued in Montréal, Canada, where he now lives with his wife. Mathieu holds a PhD in electrical and computer engineering from Concordia University and two master degrees from eXia.Cesi (software engineering) and UQAM (computer science).

Despite his academic journey, Mathieu also worked for worldwide companies such as Ubisoft, Eurocopter, Ericsson, or Saint-Gobain, where he learned how important good technical resources are.

You can discover some of his works through his books: Expert Angular, Xamarin Studio for Android Programming: A C# Cookbook, Mastering Apache Solr: A practical guide to get to grips with Apache Solr, Instant Magento Performances, Magento Performance Optimization: How to, and Mastering Apache.

About the reviewer

Rajesh Gunasundaram is a software architect, technical writer, and blogger. He has over 15 years of experience in the IT industry. He is a founder and editor of technical blogs programmerguide [dot] net and ioscorner [dot] com. He  has also written many books for Packt publishing and has a YouTube channel named ProgrammerGuide.

His technical strengths include Azure, Xamarin, ASP.NET MVC, Web API, WCF, .Net Framework / .Net Core, C#, Objective-C, Angular, Bot Framework, BizTalk, SQL Server, REST, SOA, design patterns and software architecture, Bootstrap, HTML5, and CSS3. He has also developed mobile applications. His expertise is in handling RESTful services in Angular.

Packt is searching for authors like you

If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

Table of Contents

Title Page

Copyright and Credits

Angular Design Patterns

Packt Upsell

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

TypeScript Best Practices

Environment setup

Node.js and npm for Linux

TypeScript

Quick overview

Best practices

Naming

Interface redefinitions

Getters and setters

Constructor

Type guards

Enumerator

Pitfalls

Type-casting and JSON

Inheritance and polymorphism

Summary

Angular Bootstrapping

Architectural overview

Component

Services

Directives

Pipes

Routes

Angular CLI

Installation

Creating a new application

Generating

Serving

Deploying

Summary

Classical Patterns

Components

Singleton

Factory method

Observer

TypeScript observables with parameters

Observing HTTP responses

Implementation

Understanding the implementation

Promises

Summary

Navigational Patterns

MVC

Model-view-controller at large

Model-view-controller limitations for the frontend

Angular's model-view-controller

Redux

Summary

Stability Patterns

Timeouts

Circuit breaker 

Factory

Memento

Summary

Performance Patterns

AJAX overkill

Proxy patterns

Loop count

Change detection and immutable states

Prototype and the reusable pool

Summary

Operation Patterns

General health metrics

Specific metrics

Error reporting

Method metrics with AOP

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

Preface

Angular by Google is a framework for building web applications. It is a completely new product as compared to AngularJS.

AngularJS was known to have performances issues, and it's not necessarily very easy to get started with. Everything could go well as long as you knew the very specifics and potential bottlenecks of the framework. In addition, AngularJS was often seen as a big toolbox, with a lot of tools inside, letting you build applications in many different ways, ending in various implementations of the same logic depending on the developer.

Angular brings tremendous improvements performance-wise, while being a much simpler and straightforward framework to use. Angular simply allows you to do more with less.

Google has announced from the start of the development of Angular that the framework would be a whole new product and wouldn’t be compatible with AngularJS, while they might try to offer some tools to ease the transition. Often, rewriting your application from scratch might be the best solution to migrate it. In that context, it will be necessary for the developer to learn the key parts of the Angular framework in order to bootstrap an application and the best practices to develop it as well as the existing tools to debug and benchmark the application.

Taking a complete journey through the most valuable design patterns and providing clear guidance on how to effectively use them in Angular, this book gives you access to one of the best ways to learn Angular and use it to meet stability and quality required in today's web development.

We will take the reader on a journey across Angular designs for the real world with a combination of case studies, design patterns to follow, and anti-patterns to avoid.

By the end of the book, you will have learned about the various features of Angular and be able to apply well-known, industry-proven design patterns in your work.

Who this book is for

This book is for new Angular developers that want to increase their understanding of Angular and apply it to real-life application development.

What this book covers

Chapter 1, TypeScript Best Practices, describes some of the best practices of the Typescript language. While Angular is compatible with other programming languages, in this book, we use Typescript. Typescript is powerful and expressive, but there are a few gotchas to avoid.

Chapter 2, Angular Bootstrapping, allows us to start on the right foot using the best available tools to create, build, and deploy our applications.

Chapter 3, Classical Patterns, revisits some of the well-known object-oriented patterns within the context of Angular.

Chapter 4, Navigational Patterns, focuses on the different ways to navigate Angular apps.

Chapter 5, Stability Patterns, presents different stability patterns that can be used to ensure the stability of real-world Angular applications.

Chapter 6, Performances Patterns, builds on the huge performance improvements made to Angular by Google and describes applicable patterns to improve the performances of your applications.

Chapter 7, Operation Patterns, focuses on getting our applications as operations ready after having implemented our features using well-known design patterns and livening them with some performances and stability patterns.

To get the most out of this book

To get the most out of this book, the reader will need to know about Angular, Typescript, and object-oriented programming.

Download the example code files

You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

Log in or register at www.packtpub.com.

Select the SUPPORT tab.

Click on Code Downloads & Errata.

Enter the name of the book in the Search box and follow the onscreen instructions.

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 https://github.com/PacktPublishing/Angular-Design-Patterns. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: http://www.packtpub.com/sites/default/files/downloads/AngularDesignPatterns_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: APIService, which displays the @Injectable() annotation that makes it, well, injectable.

A block of code is set as follows:

interface Animal{

  eat():void;

  sleep():void;

}

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

ReferenceError: window is not defined

Any command-line input or output is written as follows:

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

$ sudo apt-get install -y Node.js

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: The Model stores the data required by the application according to commands sent by the Controller.

Warnings or important notes appear like this.

Tips and tricks appear like this.

Get in touch

Feedback from