Angular: Up and Running

Introduction

It’s funny that we constantly over- or underestimate the impact of certain events and projects in our lives. I seriously believed that the last project I worked on at Google, Google Feedback, would end up completely changing how the company interacted with its customers. And I believed Angular (AngularJS at the time) would just be another flash-in-the-pan, yet-another-framework that would not outlive the Feedback project’s admin interface.

And in hindsight, it was exactly the other way around. While Feedback still exists and is baked into a lot of Google products, it is Angular that has gone from a tiny project used by one internal team at Angular to now being used by thousands of developers and companies worldwide. And a lot of it stems from Misko, Igor, and the entire team around it, and their unerring dedication to improving how we develop web applications.

What started off as a two-member project is now one of the largest open source communities on the web, and the framework has impacted and been a part of thousands of projects across the world. There are dozens of books, hundreds of tutorials, and thousands of articles on Angular, and Angular’s adoption and support continues to grow each day.

Some of the major concepts that were ahead of their time during the first version of Angular (like data binding, separation of concerns, dependency injection, etc.) are now common features of new frameworks.

The biggest change to the AngularJS ecosystem has been the release of the new version of Angular (initially called Angular 2.0, now just called Angular). It was a drastic, non-backward-compatible change that almost divided an entire community. But with community engagement and an open, inclusive team, what could have been a disastrous step turned out to be a much needed overhaul of Angular to bring it to the new age of web development.

Truly, what makes Angular a great technology and framework is the community around it—those who contribute to the core framework, or develop plug-ins for it, as well as those who use it on a day-to-day basis.

As part of the community, I am truly excited to present this book, and contribute in my own way to what makes this community great.

Who Should Read This Book

This book is for anyone who is looking to get started with Angular (2.0 and onward), whether as a side project, as an additional tool, or for their main work. It is expected that readers are comfortable with JavaScript and HTML before starting this book, but a basic knowledge of JavaScript should be sufficient to learn Angular. Knowledge of AngularJS 1.0 is not needed or expected.

We will also use TypeScript, which is the recommended way of developing in Angular, but a preliminary knowledge is sufficient to read this book.

We will take it step by step, so relax and have fun learning with me.

Why I Wrote This Book

Angular as a framework has grown immensely, and comes with a large set of features and capabilities. With a large community behind it, it also comes with an influx of helpful content. But the help content, tutorials, and guides are either focused only on particular topics, or sporadic and not necessarily useful for someone getting started.

The aim of this book is to provide a step-by-step guide on getting started with Angular. Each concept is provided in a logical, organized fashion, building on top of the previous one. With so many moving parts and an active community, this book does not intend to cover each and every aspect, but instead focuses on the core building blocks in a detailed fashion while letting readers discover the rest on their own.

At the end of the book, you should be familiar with a majority of the Angular framework, and be able to use Angular to develop your own web applications and use it in your own projects.

A Word on Web Application Development Today

JavaScript has come a long way, to the point where it is one of the most widely used and adopted programming languages. Nowadays, it’s rare for web developers to have to worry about browser inconsistencies and the like, which was the primary reason for frameworks like jQuery to have existed.

Frameworks (like Angular and React) are now a very common choice for developing frontend experiences, and it is rare for anyone nowadays to decide to build a frontend application without leveraging one.

The advantages of using frameworks are manifold, from reducing boilerplate code, to providing a consistent structure and layout for developing an application to many more. The primary intent is always to reduce the time spent on cruft, and focus more on the major functionality we want to provide. And if it works across browsers (and platforms, like Android and iOS, in addition to desktop), then more power to it.

Angular (as well as other frameworks) provides this, primarily through some core fundamentals that are at the heart of the framework, including:

• Powerful templating syntax driven by declarative programming

• Modularity and separation of concerns

• Data binding, and through it, data-driven programming

• Testability and awesome testing support

• Routing and navigation

• And a host of other features, from server-side rendering, to the ability to write native mobile applications, and much more!

With the help of Angular, we can focus on building amazing experiences, while managing complexity and maintainability in a seamless fashion.

Navigating This Book

This book aims to walk a developer through each part of Angular, step by step. Each chapter that introduces a new concept will be immediately followed by a chapter on how we can unit test it. The book is roughly organized as follows:

• Chapter 1, Introducing Angular, is an introduction to Angular as well as the concepts behind it. It also covers what it takes to start writing an Angular application.

• Chapter 2, Hello Angular, walks through creating a very simple Angular application, and diving into how the pieces work together. It also introduces the Angular CLI.

• Chapter 3, Useful Built-In Angular Directives, digs into the basic built-in Angular directives (including ngFor, ngIf, etc.) and when and how to use them.

• Chapter 4, Understanding and Using Angular Components, covers Angular components in more detail, as well as the various options available when creating them. It also covers the basic lifecycle hooks available with components.

• Chapter 5, Testing Angular Components, introduces how to unit test angular components using Karma and Jasmine, along with the Angular testing framework.

• Chapter 6, Working with Template-Driven Forms, covers creating and working with forms in Angular, specifically template-driven forms.

• Chapter 7, Working with Reactive Forms, covers the other way of defining and working with forms, which is how to create and develop reactive forms.

• Chapter 8, Angular Services, covers Angular services, which includes how to use built-in Angular services, as well as how and when to define our own Angular services.

• Chapter 9, Making HTTP Calls in Angular, moves into the server communication aspect of Angular, and delves into making HTTP calls, as well as some advanced topics like interceptors and the like.

• Chapter 10, Unit Testing Services, takes a step back and covers unit testing again, but this time with a focus on unit testing services. This includes testing simple services and slightly harder cases like asynchronous flows as well as services and components that make HTTP calls.

• Chapter 11, Routing in Angular, goes in depth into how we can accomplish routing in an Angular application and covers the Angular routing module in detail as well as a majority of its features.

• Chapter 12, Productionizing an Angular App, finally brings together all the concepts and covers taking the developed Angular application to production and the various concerns and techniques involved in the same.

The entire code repository is hosted on GitHub, so if you don’t want to type in the code examples from this book, or want to ensure that you are looking at the latest and greatest code examples, visit the repository and grab the contents.

This book uses AngularJS version 5.0.0 for all its code examples.

Online Resources

The following resources are a great starting point for any AngularJS developer, and should be always available at your fingertips:

• The Official Angular API Documentation

• The Official Angular Quickstart Guide

• The Angular Heroes Tutorial App

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This element signifies a tip or suggestion.

Note

This element signifies a general note.

Warning

This element indicates a warning or caution.

Using Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/shyamseshadri/angular-up-and-running.

This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Angular: Up and Running by Shyam Seshadri (O’Reilly). Copyright 2018 Shyam Seshadri, 978-1-491-99983-7.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

O’Reilly Safari

Note

Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals.

Members have access to thousands of books, training videos, Learning Paths, interactive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others.

For more information, please visit http://oreilly.com/safari.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

• O’Reilly Media, Inc.
• 1005 Gravenstein Highway North
• Sebastopol, CA 95472
• 800-998-9938 (in the United States or Canada)
• 707-829-0515 (international or local)
• 707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/angularUR.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

This book is dedicated to my wife, Sanchita, and my parents and grandmom who were my rock as well as my motivation to write this book in the best manner I could, all the while balancing my own fledgling startup in its most precarious time (the beginning!).

I’d also like to thank my reviewers, Yakov Fain and Victor Mejia, who had to read and review my unedited ramblings and make sure I got my point across in the most succinct and understandable terms.

This book of course wouldn’t be possible without the faith and efforts of the awesome team at O’Reilly, especially Angela and Kristen!

And finally, thank you to the amazing Angular community for all their contributions, feedback, and support, and for teaching us how to use and make it better.