Angular in Action

Angular in Action teaches you everything you need to build production-ready Angular applications.Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them. About the Technology Angular makes it easy to deliver amazing web apps. This powerful JavaScript platform provides the tooling to man- age your project, libraries to help handle most common tasks, and a rich ecosystem full of third-party capabilities to add as needed. Built with developer productivity in mind, Angular boosts your efficiency with a modern component architecture, well-constructed APIs, and a rich community. About the Book Angular in Action teaches you everything you need to build production-ready Angular applications. You'll start coding immediately, as you move from the basics to advanced techniques like testing, dependency injection, and performance tuning. Along the way, you'll take advantage of TypeScript and ES2015 features to write clear, well-architected code. Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them. What's Inside • Spinning up your first Angular application • A complete tour of Angular's features • Comprehensive example projects • Testing and debugging • Managing large applications About the Reader Written for web developers comfortable with JavaScript, HTML, and CSS. About the Author Jeremy Wilken is a Google Developer Expert in Angular, Web Technologies, and Google Assistant. He has many years of experience building web applications and libraries for eBay, Teradata, and VMware. Angular in Action 1 contents 7 preface 12 acknowledgments 14 about this book 15 about the author 19 about the cover illustration 20 1 Angular: a modern web platform 21 1.1 Why choose Angular? 22 1.2 What you’ll learn 23 1.3 The journey from AngularJS to Angular 24 1.4 Angular: a platform, not a framework 25 1.4.1 Angular CLI 26 1.4.2 Server rendering and the compiler 27 1.4.3 Mobile and desktop capabilities 28 1.4.4 UI libraries 29 1.5 Component architecture 31 1.5.1 Components’ key characteristics 33 1.5.2 Shadow DOM 35 1.5.3 Templates 37 1.5.4 JavaScript modules 37 1.6 Modern JavaScript and Angular 40 1.6.1 Observables 41 1.7 TypeScript and Angular 43 2 Building your first Angular app 45 2.1 Preview the chapter project 46 2.2 Setting up the project 48 2.3 The basic app scaffolding 49 2.4 How Angular renders the base application 51 2.4.1 App component 51 2.4.2 App module 52 2.4.3 Bootstrapping the app 53 2.5 Building services 56 2.6 Creating your first component 58 2.7 Components that use components and services 64 2.8 Components with forms and events 67 2.9 Application routing 70 3 App essentials 74 3.1 Entities in Angular 75 3.1.1 Modules 77 3.1.2 Components 78 3.1.3 Directives 80 3.1.4 Pipes 82 3.1.5 Services 83 3.2 How Angular begins to render an app 84 3.3 Types of compilers 85 3.4 Dependency injection 86 3.5 Change detection 87 3.6 Template expressions and bindings 88 3.6.1 Interpolation 89 3.6.2 Property bindings 90 3.6.3 Special property bindings 91 3.6.4 Attribute bindings 92 3.6.5 Event bindings 93 4 Component basics 96 4.1 Setting up the chapter example 97 4.1.1 Getting the code 99 4.2 Composition and lifecycle of a component 99 4.2.1 Component lifecycle 101 4.2.2 Lifecycle hooks 103 4.2.3 Nesting components 104 4.3 Types of components 105 4.4 Creating a Data component 109 4.5 Using inputs with components 111 4.5.1 Input basics 112 4.5.2 Intercepting inputs 115 4.6 Content projection 117 5 Advanced components 124 5.1 Change detection and optimizations 125 5.2 Communicating between components 128 5.2.1 Output events and template variables 130 5.2.2 View Child to reference components 132 5.3 Styling components and encapsulation modes 133 5.3.1 Adding styles to a component 134 5.3.2 Encapsulation modes 136 5.4 Dynamically rendering components 139 5.4.1 Using the Ng-bootstrap modal for dynamic components 140 5.4.2 Dynamically creating a component and rendering it 143 6 Services 148 6.1 Setting up the chapter example 149 6.1.1 Getting the chapter files 151 6.1.2 Sample data 151 6.2 Creating Angular services 152 6.3 Dependency injection and injector trees 157 6.4 Services without dependency injection 161 6.5 Using the HttpClient service 162 6.5.1 HttpInterceptor 166 6.6 Helper services 169 6.7 Services for sharing 173 6.8 Additional services 177 7 Routing 179 7.1 Setting up the chapter example 180 7.2 Route definitions and router setup 182 7.3 Feature modules and routing 185 7.4 Route parameters 187 7.4.1 Creating links in templates with routerLink 187 7.4.2 Access the route parameters in a component 188 7.5 Child routes 190 7.6 Secondary routes 193 7.6.1 Defining a secondary route 194 7.6.2 Navigating between secondary routes 195 7.6.3 Closing a secondary route and programmatic routing 196 7.7 Route guards to limit access 197 7.8 Lazy loading 202 7.9 Routing best practices 205 8 Building custom directives and pipes 208 8.1 Setting up the chapter example 209 8.2 Crafting custom directives 210 8.2.1 Creating an attribute directive 212 8.2.2 Modifying a component with a directive with events 214 8.2.3 Creating a structural directive 217 8.3 Crafting custom pipes 219 8.3.1 Creating a pure pipe 221 8.3.2 Creating an impure pipe 223 9 Forms 228 9.1 Setting up the chapter example 229 9.1.1 Review the app before starting 231 9.2 Template-driven forms 232 9.2.1 Binding model data to inputs with NgModel 232 9.2.2 Validating form controls with NgModel 234 9.2.3 Custom validation with directives 237 9.2.4 Handling submit or cancel events 239 9.3 Reactive forms 241 9.3.1 Defining your form 242 9.3.2 Implementing the template 244 9.3.3 Watching changes 246 9.3.4 Custom validators with reactive forms 247 9.3.5 Handling submit or cancel events 250 9.3.6 Which form approach is better? 254 9.4 Custom form controls 255 10 Testing your application 262 10.1 Testing tools and setting up the chapter example 263 10.1.1 Testing tools 264 10.2 Unit testing 264 10.2.1 Anatomy of unit tests 265 10.2.2 Testing pipes 266 10.2.3 Testing services, stubs, and mocking HTTP requests 267 10.2.4 Testing components and using testing modules 273 10.2.5 Testing directives 281 10.3 e2e testing 285 10.4 Additional testing strategies 290 10.4.1 How much testing is enough? 291 10.4.2 When do I write tests? 291 10.4.3 What do I write, e2e or unit tests? 292 10.4.4 What if I don’t have time to write tests? 292 10.4.5 What about other types of testing? 293 11 Angular in production 295 11.1 Building Angular for production 296 11.1.1 Production build 296 11.1.2 Optimizing for target browsers 297 11.1.3 Progressive Web Apps 297 11.1.4 Internationalization (i18n) 298 11.1.5 Using alternative build tooling 298 11.1.6 Server-side rendering or pre-rendering 299 11.1.7 Build pipelines 300 11.2 Angular architecture choices 300 11.2.1 Lazy load routes 300 11.2.2 Reduce external dependencies 301 11.2.3 Stay up to date 304 11.3 Deployment 304 Appendix: Upgrading from AngularJS€to€Angular 307 Index 313 SummaryAngular in Action teaches you everything you need to build production-ready Angular applications.Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.About the TechnologyAngular makes it easy to deliver amazing web apps. This powerful JavaScript platform provides the tooling to man- age your project, libraries to help handle most common tasks, and a rich ecosystem full of third-party capabilities to add as needed. Built with developer productivity in mind, Angular boosts your efficiency with a modern component architecture, well-constructed APIs, and a rich community.About the BookAngular in Action teaches you everything you need to build production-ready Angular applications. You'll start coding immediately, as you move from the basics to advanced techniques like testing, dependency injection, and performance tuning. Along the way, you'll take advantage of TypeScript and ES2015 features to write clear, well-architected code. Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them. What's InsideSpinning up your first Angular applicationA complete tour of Angular's featuresComprehensive example projectsTesting and debuggingManaging large applicationsAbout the ReaderWritten for web developers comfortable with JavaScript, HTML, and CSS.About the AuthorJeremy Wilken is a Google Developer Expert in Angular, Web Technologies, and Google Assistant. He has many years of experience building web applications and libraries for eBay, Teradata, and VMware.Table of ContentsAngular: a modern web platform Building your first Angular app App essentialsComponent basics Advanced components Services Routing Building custom directives and pipes Forms Testing your application Angular in production Summary Angular in Action teaches you everything you need to build production-ready Angular applications.Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the Technology Angular makes it easy to deliver amazing web apps. This powerful JavaScript platform provides the tooling to man- age your project, libraries to help handle most common tasks, and a rich ecosystem full of third-party capabilities to add as needed. Built with developer productivity in mind, Angular boosts your efficiency with a modern component architecture, well-constructed APIs, and a rich community. About the Book Angular in Action teaches you everything you need to build production-ready Angular applications. You'll start coding immediately, as you move from the basics to advanced techniques like testing, dependency injection, and performance tuning. Along the way, you'll take advantage of TypeScript and ES2015 features to write clear, well-architected code. Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them. What's Inside About the Reader Written for web developers comfortable with JavaScript, HTML, and CSS. About the Author Jeremy Wilken is a Google Developer Expert in Angular, Web Technologies, and Google Assistant. He has many years of experience building web applications and libraries for eBay, Teradata, and VMware. Table of Contents