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