Angular for Business: Awaken the Advocate Within and Become the Angular Expert at Work

Table of Contents....4

About the Author....18

About the Technical Reviewer....19

Introduction....20

Chapter 1: A Quick Introduction to TypeScript....22

TypeScript Playground....22

Types!....23

Strings....23

Arrays....24

Enums....25

String Literal Types....25

Interfaces....28

Object and Array Literals....28

Classes in TypeScript....29

Generics in TypeScript....30

Arrow Functions in TypeScript....31

Promises in TypeScript....32

Promises: asyncawait....34

Some Are More Equal Than Others....36

What About var?....36

Summary....38

Digging Deeper into TypeScript....38

Learning and Mastering TypeScript....39

Conclusion....39

Chapter 2: A Gentle Introduction to Angular....40

Angulars Concept of Separation of Concerns....41

Understanding Components....42

Understanding Attributes....42

Understanding the Component Class....42

Understanding the Markup....43

Hello Component....44

Component Reuse....47

Import vs. Imports....47

ngFor....48

Attribute Binding....49

HTML Event Binding....50

ngIf....51

Summary....52

Chapter 3: Angular CLI Quick Reference....53

Installing NodeJS and NPM....53

For Windows and macOS....54

For Linux....54

Alternative Node Version Manager....55

Installing the Angular CLI....55

Getting Help....55

Starting a New Angular Project....56

Generating Project Assets....57

Common Flags for Schematics....58

Starting a Development Web Server....58

Checking Your Coding Style....59

Running Unit Tests....60

Building Your Projects....60

Additional Commands....60

Summary....61

Chapter 4: A Simple Angular Component....62

Create a New Angular Application....63

Create the Component....64

Component Code....65

Markup....67

Styling....68

h1....69

.div.loader....70

.hidden....70

.wrapper....71

Use....73

The Result....74

Summary....75

Chapter 5: Guardians of the [Angular] Galaxy....77

Understanding Angular Route Guards....77

The Value Proposition of Guards....78

Practical Application of Guards....78

Beyond Parameter Validation....80

The inject Function....81

Injection Context....82

Summary....83

Chapter 6: Resolve or Die: Error Handling Strategies for Loading Data....84

Angular Route Guards and Resolvers....84

What Data Are You Loading?....85

What If There Are Errors?....85

Give Up on Error....86

Redirect to an Error Page....86

Maybe Not Use a Resolver....87

Loading Indicator....88

Skeleton Text....89

Demo....91

Loading....91

Error State....91

Summary....92

Chapter 7: Custom Angular Checkbox with [(ngModel)] Support....93

Custom-Styled Checkbox....93

CSS....94

my-checkbox.component.css....96

The Component....96

Create the Component....97

Add the HTML Template....98

Component Fields....99

No Value Accessor....100

ControlValueAccessor....100

writeValue()....100

registerOnChange()....101

registerOnTouched()....102

setDisabledState()....102

Registering the Provider....103

Wrapping Up....104

The Complete Component....104

And the Template....106

Summary....107

For More Information....107

Chapter 8: Upgrading Angular....108

Keep on Top of Things....109

Follow Along....110

Official Upgrade Guidance....110

My Project....110

Angular 12.x to 12.y....111

Angular 12 to Angular 13....113

Upgrading the Project to Angular 13....114

Upgrading Ionic and Other Dependencies....117

Angular 13 to Angular 14....118

Angular 14 to Angular 15....122

Angular 15 to Angular 16....125

A Note on the Angular CLI....128

Summary....129

Chapter 9: Standalone Components....132

SCAM Pattern....132

Introduction to Standalone Components....133

Eliminates app.module.ts....133

Upgrading Your Angular App to Standalone....134

Preparing for Migration....134

Running the Schematic....135

Review a Change....136

Before:....136

After:....136

Step 2: Remove Unnecessary NgModule Classes....137

Routing....138

Before:....138

After:....139

Ionic 6.x Warning....140

Before: app.component.ts....140

After: app.component.ts....140

Before: app.component.html....141

After: app.component.html....141

Step 3: Bootstrap the Project Using Standalone APIs....141

Before: app.component.ts....142

After: app.component.ts....142

Before: main.ts....143

After: main.ts....143

Does It Work?....143

Summary....144

Chapter 10: Understand Your Service API....145

Consumer: Know Your API Behavior....145

Creators: Do Not Break Your Consumers....147

Summary....148

Chapter 11: RxJS: To Use or Not to Use?....149

Hard to Learn....149

Hard to Test....149

The Code....150

Make the Service Call....151

I Only Care About Selections....151

Making the Web Call....152

Implementing a Search Filter....153

Pager Component....154

Combine Them All....154

Inside the Template....156

The Benefit of This Approach....156

What Do Others Think?....157

Summary....158

Chapter 12: Best Practices for Handling Changes to Input Properties in Angular....159

The Pros and Cons of Property Setters vs. ngOnChanges....159

The Scenario That Started It All....160

The Case for ngOnChanges....161

Best Practices for Handling Changes to Input Properties in Angular....162

The Case for Setters....162

What Did Others Think?....163

How Many Inputs?....163

Use a Component Store....163

Property Change Notification?....164

Observable Inputs....164

My Solution....164

Summary....165

Chapter 13: Test-Driven Development with Angular....166

Background....166

The Service....167

The Generated Test....168

Understanding describe....168

Grasping beforeEach....169

Other Important Functions....169

Understanding it....170

Understanding the Service....170

Implementing Auto-Generated Service Code....172

Make Them Run (and Fail)....174

Make Them Pass....175

UUID....176

Make It Right....177

The Final Test....178

The Final Service....179

Refactoring the Service....180

Before....180

After....181

Summary....182

Chapter 14: Unit Testing Strategies....183

Test Your Own Code....183

How Do You Test That Function?....184

It Relies on an HTTP Service and Logger....185

It Passes the Raw HTTP Response to the Scrub Function....185

It Makes an Assumption That the Response Object Contains a Status Code....185

It Returns a Promise....185

It Does Too Much....186

Refactor Time....186

What Have We Done?....187

What Tests Do We Need?....187

The processResponse Function....188

handleError and handleSuccess Functions....188

The scrub Function....189

Summary....189

Chapter 15: Diagnosing Random Angular Test Failures....190

TLDR....190

Longer Explanation....191

After the First Failure....191

Start Disabling Tests....191

Disable Random Test Ordering....192

You Can Specify the Random Seed!....193

Start Isolating Tests....193

Give Asynchronous Code a Closer Look....194

New Test Suite....196

Suspect Your Test Doubles....196

Summary....198

Chapter 16: Command Line: What Do All Those Symbols Mean?....199

And &&....200

Or ....201

My Home Folder ....201

Background &....202

Redirect Output >....203

Redirect Input <....205

IO Pipe ....206

Expand ....206

Expansion Within ....207

No Expansion Within '....208

Use Command Output ....208

History!....209

CtrlR Search History....210

Summary....211

Chapter 17: Source Control: In Search of a Better Code Review....212

How to Set Up GitHub to Smooth Your Teams Development Process....212

The Problem....213

Goals and Constraints....213

Recommendation....213

Development Work Flow....214

GitHub Protected-Branch Settings....215

The Rationale....216

A Single Protected Branch....217

Write Access for the Entire Team....217

Pull Request with Template....217

Optional....218

Authorized Reviewers....218

Strict Status Checks....219

Require FB to Be Up-to-Date with the Main Branch....219

Required Code Owner Review....219

Require Linear History (Use Squash Merges from Feature Branches to Main Branch)....220

Merge Completed by Code Author....221

What About Automatic Merge?....221

Summary....221

Chapter 18: Fix Mistaken Git Commits....222

Summary....224

Chapter 19: Archive Your Git Repository....225

Why Archive Your Git Repo?....225

How to Do It....226

Zip File....226

Tar File....226

TarBzip....226

Summary....227

Reference....227

Chapter 20: Use git-bisect to Find Problems Fast....228

git-bisect to the Rescue....229

Run the App....230

Find the Bug....231

Summary....231

Chapter 21: How We Learn....232

Learning to Drive....233

Learning Mobile App Development....233

Applying Knowledge to Practice....233

Mastery....234

Time and Learning....234

Summary....234

Chapter 22: How We Teach....235

Teaching EDGE....236

Explain....236

Demonstrate....236

Guide....237

Enable....237

Example....237

Challenges....238

Summary....239

Chapter 23: Slow Down to Be Noticed....240

Background....240

An Idea Took Shape....241

Demonstration....241

Normal....242

Fast....242

Slow....242

Result....243

How You Can Apply This....243

People Will Listen....243

People Will Notice....244

Try It Yourself....244

Summary....244

Chapter 24: Watch Your Language....246

Profanity....246

Spelling....247

Alright....247

Alot....247

CancelledCanceled....247

Irregardless....248

October 2020 Update!....248

ItsIts....248

LetsLets....249

ThenThan....249

ThereTheirTheyre....249

WhoseWhos....249

YourYoure....250

Grammar....250

AwhileA While....250

ImplyInfer....251

LeadLed....251

LessFewer....251

Split Infinitives....251

Contractions....252

Summary....253

Chapter 25: Agile Software Development: A Quick Start Guide....254

The Basics of Agile Software Development and How It Can Benefit Your Project....254

Task Creation and Tracking....255

Estimation....257

Iteration Planning and Scheduling....259

Development....260

Calculating Velocity....263

Individual Velocity....264

Bugs and Testing....265

Rinse and Repeat....265

Summary....266

Rules to Live By....267

Resources....268

Feedback....268

Chapter 26: Pixabay.com Image Repository....269

Overview....269

Image Search....270

Image Details....271

Thank the Artist....271

Pixabay for Artists....272

Summary....272

Index....273

Written from author Michael D. Callaghan's personal experience teaching Angular to web development teams, this book will serve as a practical guide to help you adopt Angular for your organization. 

This book consists of a series of essays related to Angular development, adoption, and the wider eco-system designed to appeal to experienced web developers and managers who have some experience with Angular and are looking to adopt and integrate it into their business for their web development projects.

You'll begin with an introduction to Angular15, along with associated frameworks and tools such as Typescript and RxJS. You'll then explore Angular components, progressive Web Apps (PWA’s) APIs, Test-driven development, testing, and the basics of agile project management. This includes how to train your team and effectively communicate with management and key stake-holders within your organization while transitioning onto an Angular workflow. 

What You'll Learn

• Advocate for Angular from within your organization
• Create a simple "no-code" Angular component
• Keep up with Angular releases for enterprise projects
• Understand service APIs from both the producer and consumer point of view
• Implement the basics of agile project management

Who This Book Is For

Experienced web developers and managers with some knowledge of Angular and the related JavaScript eco-system who are looking at adopting Angular for enterprise projects and those who need to get co-workers up to speed with an Angular-based workflow.