Angular 2 Development with TypeScript Video Edition

Summary Angular 2 Development with Typescript teaches you what you need to start using Angular, while you also learn TypeScript and how to take advantage of its benefits. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the Technology Whether you're building web clients or full-featured SPAs, using the Angular 2 web framework is a liberating experience. Its declarative style makes it easy to define and add features without a lot of manually written boilerplate, and the fully integrated TypeScript language gives you the benefits of a statically typed language within the JavaScript ecosystem. Not to mention that adding Angular 2 and TypeScript to your skill set makes you a hot commodity. About the Book Angular 2 Development with Typescript introduces Angular 2 to developers comfortable using AngularJS v1 or other web frameworks. You'll start by exploring how Angular 2 works in an online auction application. Along the way, you'll learn to use TypeScript to write type-aware classes, interfaces, and generics. This is a practical book that covers real-world development concerns like data and views, user interaction with forms, and communicating with servers, as well as testing and deploying your Angular 2 applications. What's Inside Design and build modular applications Transpile TypeScript into today's JavaScript Use modern JavaScript workflow tools like npm, Karma, and Webpack About the Reader This book is for intermediate web developers with a working knowledge of JavaScript. No TypeScript or AngularJS experience needed. About the Author Yakov Fain and Anton Moiseev are experienced web application developers. Yakov has written several books on software development. Preface Acknowledgments About This Book About the Cover Illustration Introducing Angular 2 A Sampler of JavaScript Frameworks and Libraries Feature-complete frameworks Lightweight frameworks Libraries What is Node.js? High-level Overview of AngularJS High-level Overview of Angular Code simplification Performance improvements An Angular Developer's Toolbox How Things Are Done in Angular Introducing the Online Auction Example Summary Getting Started with Angular A First Angular Application Hello World in TypeScript Hello World in ES5 Hello World in ES6 Launching applications The Building Blocks of an Angular Application Modules Components Directives A brief introduction to data binding The SystemJS Universal Module Loader An overview of module loaders Module loaders vs. tags Getting started with SystemJS Selecting a Package Manager Comparing npm and jspm Starting an Angular project with npm Hands-on: Getting Started with the Online Auction Initial project setup Developing the home page Launching the online auction application Summary Navigation with the Angular Router Routing Basics Location strategies The building blocks of client-side navigation Navigating to routes with navigate() Passing Data to Routes Extracting parameters from ActivatedRoute Passing static data to a route Child Routes Guarding Routes Developing a SPA with Multiple Router Outlets Splitting an App into Modules Lazy-loading Modules Hands-on: Adding Navigation to the Online Auction Creating ProductDetailComponent Creating HomeComponent and code refactoring Simplifying ApplicationComponent Adding a RouterLink to ProductItemComponent Modifying the root module to add routing Running the auction Summary Dependency Injection The Dependency Injection and Inversion of Control Patterns The Dependency Injection pattern The Inversion of Control pattern Benefits of dependency injection Injectors and Providers How to Declare a Provider A Sample Application with Angular DI Injecting a Product Service Injecting the Http Service Switching Injectables Made Easy Declaring Providers with useFactory and useValue Using OpaqueToken The Hierarchy of Injectors viewProviders Hands-on: Using DI in the Online Auction Application Changing the Code to Pass the Product ID as a Parameter Modifying ProductDetailComponent Summary Bindings, Observables, and Pipes Data Binding Binding to Events Binding to Properties and Attributes Binding in Templates Two-way Data Binding Reactive Programming and Observables What are Observables and Observers? Observable Event Streams Cancelling Observables Pipes Custom Pipes Hands-on: Filtering Products in the Online Auction Summary Implementing Component Communications Inter-component Communication Input and Output Properties The Mediator Pattern Changing Templates at Runtime with ngContent Component Lifecycle Using ngOnChanges A High-level Overview of Change Detection Exposing a Child Component's API Hands-on: Adding a Rating Feature to the Online Auction Summary Working with Forms Overview of HTML Forms Standard Browser Features Angular's Forms API Template-driven Forms Directives Overview Enriching the HTML Form Reactive Forms Form Model Form Directives Refactoring the Sample Form Using FormBuilder Form Validation Validating Reactive Forms Hands-on: Adding Validation to the Search Form Modifying the Root Module to Add Forms API Support Adding a List of Categories to SearchComponent Creating a Form Model Refactoring the Template Implementing the onSearch() Method Launching the Online Auction Summary Interacting with Servers Using HTTP and WebSockets A Brief Overview of the Http Object's API Creating a Web Server with Node and TypeScript Creating a Simple Web Server Serving JSON Live TypeScript Recompilation and Code Reload Adding the RESTful API for Serving Products Bringing Angular and Node Together Static Resources on the Server Making GET Requests with the Http Object Unwrapping Observables in Templates with AsyncPipe Injecting HTTP into a Service Client-server Communication via WebSockets Pushing Data from a Node Server Turning a WebSocket into an Observable Hands-on: Implementing Product Search and Bid Notifications Implementing Product Search Using HTTP Broadcasting Auction Bids Using WebSockets Summary Unit-testing Angular Applications Getting to Know Jasmine What to Test How to Install Jasmine What Comes with Angular's Testing Library Testing Services Testing Navigation with the Router Testing Components Testing a Sample Weather Application Configuring SystemJS Testing the Weather Router Testing the Weather Service Testing the Weather Component Running Tests with Karma Hands-on: Unit-testing the Online Auction Testing Application Component Testing ProductService Testing StarsComponent Running the Tests Summary Bundling and Deploying Applications with Webpack Getting to Know Webpack Hello World with Webpack How to Use Loaders How to Use Plugins Creating a Basic Webpack Configuration for Angular npm run build npm start Creating Development and Production Configurations Development Configuration Production Configuration A Custom Type-definition File What's Angular CLI? Starting a New Project with Angular CLI CLI Commands Hands-on: Deploying the Online Auction with Webpack Starting the Node Server Starting the Auction Client Running Tests with Karma Summary An Overview of ECMAScript 6 TypeScript as a Language for Angular Applications Index "An enjoyable and important read. Highly recommended!" David Barkol, Microsoft Angular 2 Development with Typescript introduces Angular 2 to developers comfortable using AngularJS v1 or other web frameworks. You'll start by exploring how Angular 2 works in an online auction application. Along the way, you'll learn to use TypeScript to write type-aware classes, interfaces, and generics. This is a practical book/course that covers real-world development concerns like data and views, user interaction with forms, and communicating with servers, as well as testing and deploying your Angular 2 applications. Whether you're building web clients or full-featured SPAs, using the Angular 2 web framework is a liberating experience. Its declarative style makes it easy to define and add features without a lot of manually written boilerplate, and the fully integrated TypeScript language gives you the benefits of a statically typed language within the JavaScript ecosystem. Not to mention that adding Angular 2 and TypeScript to your skill set makes you a hot commodity. Inside: Design and build modular applications Transpile TypeScript into today's JavaScript Use modern JavaScript workflow tools like npm, Karma, and Webpack Target audience are intermediate web developers with a working knowledge of JavaScript. No TypeScript or AngularJS experience needed. Yakov Fain and Anton Moiseev are experienced web application developers. Yakov has written several books on software development. An instant classic! The only book you need to learn and master Angular 2 and TypeScript. David DiMaria, MapQuest Excellent! The purpose of this book is not knowledge but *action*. Irach Ilish Ramos Hernandez, Groupaxis Shows you how to leverage the combined power of TypeScript and Angular 2, with all the best practices baked in. Sebastien Nichele, Pacifica NARRATED BY MARK THOMAS Angular 2 Development with Typescript teaches you what you need to start using Angular, while you also learn TypeScript and how to take advantage of its benefits. This hands-on book begins with an overview of Angular 2 architecture and an introduction to the online auction application that youll be developing throughout the book. Youll learn TypeScript and how to write classes, interfaces, and generics, as well as how to transpile TypeScript code into todays JavaScript that can be deployed in all Web browsers. More topics include data and views, user interaction with forms, and communicating with servers. Finally, youll learn how to test and deploy your Angular 2 applications. Annotation 'Angular 2 Development with Typescript' teaches the reader Angular 2, while it also teaches TypeScript and how to take advantage of its benefits. This hands-on book begins with an overview of Angular 2 architecture and an introduction to the online auction application that will be developed throughout the book. It teaches TypeScript and how to write classes, interfaces, and generics, as well as how to transpile TypeScript code into today's JavaScript that can be deployed in all Web browsers KEY FEATURES • Lots of hands-on examples • Teaches the TypeScript language • Shows how to convert TypeScript into JavaScript that can be deployed in all Web browsers AUDIENCE This book is for developers with a working knowledge of JavaScript. No prior exposure to AngularJS is needed.