Book Image

Angular 6 by Example - Third Edition

By : Chandermani Arora, Kevin Hennessy
Book Image

Angular 6 by Example - Third Edition

By: Chandermani Arora, Kevin Hennessy

Overview of this book

<p>Angular helps you build faster, efficient, and flexible cross-platform applications. Creating complex and rich web applications, with a lighter resource footprint, has never been easier or faster. Angular is now at release 6, with significant changes compared to previous versions.</p> <p>In this third edition of Angular by Example, you’ll build three apps with varying degrees of complexity. The book starts with a simple “Guess the Number”game, which serves as a platform to launch you into the world of Angular. Next, you will learn to develop a popular “7-Minute Workout” app, covering the building blocks of Angular. The final app, “Personal Trainer” morphs the existing “7-Minute Workout” into a full-fledged personal workout builder and runner, covering advanced directive building, which is the most fundamental and powerful feature of Angular.In addition to this, you will learn about testability and the framework constructs Angular provides to effectively test your app. The book concludes by providing you with practical advice and useful tips that will come in handy as you build more apps with Angular.</p>
Table of Contents (15 chapters)
Title Page
Copyright and Credits
Packt Upsell
Contributors
Preface
Index

Preface

Angular 6 is here, and we are super excited! This book allows us to reach out to you and lend a helping hand in your quest to learn Angular. Angular has gone mainstream and has become the ubiquitous platform for web and mobile development.

If you are an AngularJS developer, then there is loads of exciting stuff to learn, and there is a whole new world to explore for developers getting started. Getting started with Angular can be overwhelming even for a seasoned AngularJS developer. Too many terms will be thrown at you: such as TypeScript, Transpiler, Shim, Observable, Immutable, Modules, Exports, Decorators, Components, Web Component, and Shadow DOM. Relax! We are trying to embrace the modern web, and everything new that is here is to make our lives easier. Lots of these concepts are not specific to Angular itself but highlight the direction in which the web platform development is moving. We will try our best to present these concepts in a clear and concise manner, helping everyone understand how these pieces fit into this big ecosystem. Learning by examples has its advantages, for example, you will immediately get to see the concept explained in action. This book follows the same pattern as its predecessor. Using the Do It Yourself (DIY) approach, we build multiple simple and complex applications using Angular.

Who this book is for

Angular helps you build faster, more efficient, and more flexible cross-platform applications. Angular is now at release 6, with significant changes through its previous versions. This is a unique web development book that will help you get to grips with Angular and explore a powerful solution for developing single page applications.

What this book covers

Chapter 1, Getting Started, introduces you to the Angular framework. We create a super simple app in Angular that highlights some core features of the framework.

Chapter 2, Building Our First App – 7 Minute Workout, teaches us how to build our first real Angular app. In the process, we will learn more about one of the primary building blocks of Angular, components. We will also be introduced to Angular’s templating constructs, databinding capabilities, and services.

Chapter 3, More Angular – SPA and Routing, covers the routing constructs in the framework where we build multiple pages for 7 Minute Workout. This chapter also explores a number of patterns around inter-component communication.

Chapter 4, Personal Trainer, introduces a new exercise where we morph the 7 Minute workout into a generic Personal Trainer app. This app has the capability to create new workout plans other than the original 7 minute workout. This chapter covers Angular’s form capabilities and how we can use them to build custom workouts.

Chapter 5, Supporting Server Data Persistence, deals with saving and retrieving workout data from the server. We augment Personal Trainer with persistence capabilities as we explore Angular's http client library and how it uses RxJS Observables.

Chapter 6, Angular Directives in Depth, goes deep into the inner workings of Angular directives and components. We build a number of directives to support Personal Trainer.

Chapter 7, Testing Personal Trainer, introduces you to the testing world in Angular. You build a suite of unit and end-to-end tests that verify the working of Personal Trainer.

Chapter 8, Some Practical Scenarios, provides some practical tips and guidance around scenarios that we might encounter while developing apps on this framework. We cover scenarios such as authentication and authorization, performance, and the most important case, migrating apps from AngularJS to the latest version of Angular.

To get the most out of this book

We will be building our apps in the TypeScript language; therefore, it would be preferable if you have an IDE that makes development with TypeScript easy. IDEs such as Atom, Sublime, WebStorm, and Visual Studio (or VS Code) are great tools for this purpose.

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:

  1. Log in or register at www.packtpub.com.
  2. Select the SUPPORT tab.
  3. Click on Code Downloads & Errata.
  4. 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/chandermani/angular6byexample. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

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: "We can see how the router combines the routes in app.routes.ts with the default route in workout-builder.routes.ts".

A block of code is set as follows:

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/styles.css"
],

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

const routes: Routes = [
    ...
{ path: 'builder', loadChildren: './workout-builder/workout-builder.module#WorkoutBuilderModule'},
    { path: '**', redirectTo: '/start' }
];

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

ng new guessthenumber --inlineTemplate

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: "With the Developer tools open in the Sources tab"

Note

Warnings or important notes appear like this.

Note

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packtpub.com.