Angular in Action

By Jeremy Wilken

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

• 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.

Table of Contents

1. Angular: a modern web platform
2. Building your first Angular app
3. App essentials
4. Component basics
5. Advanced components
6. Services
7. Routing
8. Building custom directives and pipes
9. Forms
10. Testing your application
11. Angular in production

• Language: English
• Publisher: Manning
• Release date: Mar 7, 2018
• ISBN: 9781638356004

Jeremy Wilken

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.

Book preview

preface

A major framework for many years, Angular has influenced a generation of web technologies. Even developers who haven’t used it have benefitted from its existence, as it helped popularize a number of important concepts and technologies.

Early in its AngularJS days (version 1.x is known as AngularJS), it became perhaps the most popular web application framework of its time. But the 1.x version had limitations, and a number of optimizations were built into the framework. The concept of two-way databinding (being able to sync data between the controller and the view automatically), which was touted early on as its best feature, became a performance bottleneck in large applications that abused its utility. To help mitigate this problem, one-way and one-time binding options were introduced to improve performance, but they required developers to opt in. Also, components were introduced as a better way to organize and structure applications, but taking advantage of them required refactoring of existing applications.

You could build an amazing and performant application with AngularJS 1.x, but it wasn’t always the default mode and required unlearning concepts that were believed to be best practices from earlier releases. Simply put, writing well-designed applications was possible because of workarounds from the original concepts that AngularJS embraced.

Instead of evolving the version 1.x codebase, the decision was made to rewrite it from scratch to implement the lessons learned into the foundations of the next major version. This was a multiyear endeavor that involved both the Angular team at Google and the larger community of early adopters. It was a long journey, and I rode alongside and built applications on top of it during early alpha and beta phases. The final result of that journey was Angular 2.0 (version 2.0 and above is known as just Angular), and its community has grown rapidly since its release.

I started working on Angular in Action while Angular was still in early beta for version 2.0. Angular then underwent regular and rapid iterations during the book’s writing and development. But today Angular is stable and evolves with a well-defined release cycle for new features and deprecations. The book examples are written to work with Angular 5 and above, and going forward, the GitHub projects will have notes about any required changes to keep up with Angular’s evolution.

acknowledgments

I’d like to thank first and foremost my wife, Linda, for her patience and understanding as I wrote this book, largely during the evening and weekend hours. I appreciate your support, and I pledge to make up some of the lost time.

Manning provided a team of professionals dedicated to making this book happen. Dozens of individuals were involved, including my developmental editors Helen Stergius and Cynthia Kane, technical developmental editor Alain Couniot, technical proofreader Tanya Wilke, and review editor Ivan Martinovic´. Several external reviewers also provided helpful feedback on different stages of the manuscript: Harsh Raval, Kumar Unnikrishnan, Michael A. Angelo, Phily Austria, Radoslaw Pilski, and Tony Brown.

Along with that team were others at Manning who helped manage the cycle of early releases and the final production release, including project editor Kevin Sullivan, copyeditor Corbin Collins, and proofreader Alyson Brener.

A big thank you goes to the Angular team for creating Angular and also for the opportunities they’ve given me to talk with team members individually. Google also sponsors the Google Developer Experts program, which has a great list of Angular experts who have been helpful and which I’m proud to belong to.

I also want to thank Jason and David Aden for their early contributions and time working on the manuscript with me.

Finally, thank you, the reader, for picking up this book to spend your precious time with me between these pages. If it weren’t for you, I wouldn’t have a reason to write. I hope to hear from you and see what you build!

about this book

Angular in Action is designed to help you learn how to use Angular in building your own web applications. I’ve brought the core lessons from my own experiences into this book. I’ve built a number of large enterprise applications on Angular and many smaller ones as well. I believe similar best practices go into most well-written applications no matter their size, so I share those as well.

My goal is to ensure you have a strong foundation in how Angular works, how it’s used to build web applications, and how to then ship those into production. This foundational knowledge will enable you to learn additional concepts more quickly and easily (often by reviewing the documentation or even blog posts).

There are certainly more Angular topics than could be covered in a single book, as Angular is an ambitious and comprehensive set of tools and libraries. I took great care to make this a book that works on multiple levels. You may find some topics to be more advanced than you need right now, but you can always come back to them later. Or you may find that the basics are familiar but the more advanced topics help fill in the gaps.

Who should read this book

Although I believe Angular is accessible for developers, this book is targeted at readers who have the subject knowledge detailed in the following list. Other readers will certainly find value in the content, but may have knowledge gaps that aren’t covered specifically:

Web applications —You understand the role of web applications and have a little bit of experience with building them.

JavaScript —You have enough knowledge of JavaScript and its syntax to be able to follow along with the examples.

HTML/CSS —You understand the roles of HTML and CSS, as well as their syntax.

I mention some topics in the book that are important but not part of Angular. You may know nothing about some of these, but the book provides enough cursory knowledge that you should be able to follow along:

TypeScript —Angular is written with TypeScript, and so are all the examples in this book. If you’re new to TypeScript, I provide many hints along the way, but I suggest you review the official documentation at www.typescriptlang.org.

Reactive programming —Angular’s design often allows and recommends using reactive-style programming, which is usually used in conjunction with the popular RxJS library. There’s a lot of great material out there for learning reactive and RxJS, and I share a few links to it in the book.

How this book is organized

This book is divided into themed chapters, beginning with the core details of Angular and expanding into more complex themes. Chapters 1–3 lay the groundwork for understanding what Angular is (and isn’t) and discuss its role in building your applications. These chapters also provide a quick but fairly comprehensive tutorial of many of Angular’s key features. If you’re already familiar with Angular, you may find these sections easy to skim to find new insights.

Chapters 4–5 act like a single unit on the topic of components. Angular (like HTML) is based on the idea of building individual components that can be composed together for more complex interactions. You can’t have an Angular application without components, and I cover them in great detail in these chapters so you can focus on other aspects in the remainder of the book.

Chapters 6–9 focus on key topics in building applications. Chapter 6 is all about services and, subsequently, dependency injection. Understanding how to manage your services is key to building a larger Angular application, and often key to using other capabilities as well. Chapter 7 looks closely at the router and how to use it to create simple to complex navigation patterns that are used in many web applications. Chapter 8 shows you how to build your own custom directives and pipes, which become crucial when you expand the size of your application and want to make it easier to maintain. Finally, chapter 9 covers the two different approaches to building forms with Angular, as well as how to create your own custom form controls.

The last two chapters round off your Angular training with a focus on testing in chapter 10 and on building and deploying your application for production in chapter 11. You might build some small hobby websites without testing or production tooling, but Angular provides some great tools that make it easy even for large enterprise applications to use. I suggest you use them too! The brief appendix discusses the transition from AngularJS to Angular (or version 1.x to 2+).

If you’re brand new to Angular and want a guided tour, I recommend reading the chapters in order. This approach will give you incremental knowledge to build on as you go, as often a chapter glosses over details that were covered in an earlier one.

If you have some prior experience with Angular or are interested in particular topics, feel free to head straight for those chapters. I believe you can skim early sections that cover familiar material and then look more closely at later parts of a chapter to learn more complex capabilities. As you skim, keep an eye out for diagrams that explain various concepts; they’re a great way to quickly validate whether you understand the topic at hand. If there are unfamiliar concepts, you can always refer to other chapters.

Most chapters feature fairly extensive examples. In order to do them properly, you’ll have to follow along through the whole chapter. The final versions of the code are provided if you don’t want to follow the examples and build the code yourself, but I strongly encourage you to code along. You’ll understand the coding and retain the information more effectively that way. If you run into any issues with a chapter example, you can check the GitHub project for any potential code changes that were required after the book’s publication (such as if a breaking change has been introduced in Angular). Stack Overflow is also a great place to ask any questions that extend beyond the chapter example code.

About the code

All the code in this book can be downloaded from GitHub at https://github.com/angular-in-action. (A zip file containing the complete code at time of publication will also be available from the publisher’s website at https://www.manning.com/books/angular-in-action.) Each chapter also provides a link to the specific chapter content, so you don’t need to download everything ahead of time.

You’ll need to have a recent version of NodeJS installed on your machine. Chapter 1 covers more specific things to install for the Angular CLI. You also need a modern browser—preferably one that has good debugging tools, like Chrome. If you’re running an outdated browser (like IE10), the code won’t run, so update your browser for compatibility and security.

This book contains many examples of source code, both in numbered listings and inline with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes code is also in bold to highlight code that has changed from previous steps in the chapter, such as when a new feature adds to an existing line of code.

In many cases, the original source code, has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In rare cases, even this was not enough, and listings include line-continuation markers (➥). Additionally, comments in the source code have often been removed from the listings when the code is described in the text. Code annotations accompany many of the listings, highlighting important concepts.

Book forum

Purchase of Angular in Action includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum, go to https://forums.manning.com/forums/angular-in-action. You can also learn more about Manning's forums and the rules of conduct at https://forums.manning.com/forums/about.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray! The forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

about the author

Jeremy Wilken

is a software engineer with a passion for designing applications and technology solutions that focus on improving the lives of users. He is a Google Developer Expert for Web Technologies and Angular as well as the Google Assistant, which is an endorsement from Google as a subject matter expert and community leader in Angular and the web.

Most of his day-to-day work is in building Angular applications, but he also spends a lot of time and energy speaking at events, running workshops and trainings, writing, and helping build community through meetups and conferences. He’s worked for companies like eBay, Teradata, and VMware, and has been a consultant for many years.

He lives in Austin, Texas, with his wife and two daughters. Outside of the tech world, he is a certified beer judge (it’s a real thing) and brews his own beer.

about the cover illustration

The figure on the cover of Angular in Action is captioned A colonel of the Strelitzes, the old Russian militia and body guard to the czars of Moscovy. The illustration is taken from Thomas Jefferys’ A Collection of the Dresses of Different Nations, Ancient and Modern (four volumes), London, published between 1757 and 1772. The title page states that these are hand-colored copperplate engravings, heightened with gum arabic.

Thomas Jefferys (1719–1771) was called Geographer to King George III. He was an English cartographer who was the leading map supplier of his day. He engraved and printed maps for government and other official bodies and produced a wide range of commercial maps and atlases, especially of North America. His work as a map maker sparked an interest in local dress customs of the lands he surveyed and mapped, which are brilliantly displayed in this collection. Fascination with faraway lands and travel for pleasure were relatively new phenomena in the late eighteenth century, and collections such as this one were popular, introducing both the tourist as well as the armchair traveler to the inhabitants of other countries.

The diversity of the drawings in Jefferys’ volumes speaks vividly of the uniqueness and individuality of the world’s nations some 200 years ago. Dress codes have changed since then, and the diversity by region and country, so rich at the time, has faded away. It’s now often hard to tell the inhabitants of one continent from another. Perhaps, trying to view it optimistically, we’ve traded a cultural and visual diversity for a more varied personal life—or a more varied and interesting intellectual and technical life.

At a time when it’s difficult to tell one computer book from another, Manning celebrates the inventiveness and initiative of the computer business with book covers based on the rich diversity of regional life of two centuries ago, brought back to life by Jefferys’ pictures.

1

Angular: a modern web platform

This chapter covers

Angular as a platform for modern applications

Key reasons for choosing Angular

Angular’s architecture and how components form the basis of it

How AngularJS differs from Angular

ES2015 and TypeScript and how Angular uses them

Angular is a modern web application platform that promises to provide developers with a comprehensive set of tools and capabilities to build large, robust applications. The core value proposition of Angular is to make it possible to build applications that work for nearly any platform—whether mobile, web, or desktop. The Angular team has focused on building much more than a robust application framework; they’ve also built an entire ecosystem.

All that’s a bit of a mouthful, which is partly what makes Angular such an exciting technology to work with. Let’s start by taking a closer look at why you would choose Angular for your next project.

1.1 Why choose Angular?

Building web applications that can meet the needs of users is not a trivial task. The quality and complexity of applications is ever increasing, and so are users’ expectations for quality and capabilities. Angular exists to help developers deliver applications to meet these demands.

If you haven’t settled on Angular as a tool of choice yet, let’s quickly cover some of the top reasons that you should seriously consider Angular. Some items are covered more in section 1.3, but here are the top highlights in my experience:

Inspired by web standards, enhanced by modern capabilities —Anyone building web applications today knows there are many different ways and ideas about how to design applications. Angular tries to design its framework and the development process around common standards (like leveraging the latest JavaScript language features), using modern capabilities (such as embracing TypeScript for type enforcement).

Development tooling included, customizations available —Angular provides a common developer experience through its CLI tooling (for generating, building, testing, and deploying apps), while making those same tools available to be easily integrated into custom solutions (such as a custom build toolchain) and third-party tools (like different editors or IDEs).

Powerful ecosystem with a large community —There is an ever-growing number of third-party libraries, UI libraries, blog posts, and events. Angular’s large and active community provides a great foundation on which to learn and should instill confidence that it will remain a valuable technology.

Sponsored by Google, open source community driven —Google has a team of engineers, managers, and evangelists solely dedicated to bringing Angular to the rest of Google and the entire web community. With thousands of internal customers who rely on Angular inside Google, the Angular team uses those experiences to inform future development and receives large volumes of external contributions that together shape Angular’s future (you can join in too!).

Angular is much more than just a JavaScript library that powers some of the top websites in the world. I’m passionate about open source communities, and I’m an advocate for people to get engaged in a project as part of their regular routine. Projects in the Angular community are where I put a lot of my energy and contributions, and I invite you to join me. Although I do engage with the Angular project itself, I primarily contribute to projects in the Angular ecosystem, such as Clarity, a UI component library and design language.

You may be a developer trying to figure out whether Angular will meet your needs, or you may be a manager trying to understand the role of the technology, or trying to figure out how to improve your current applications. Regardless of where you’re starting from, the Angular ecosystem has a lot to offer.

1.2 What you’ll learn

This book is designed to be a comprehensive walk through Angular, but it’s also meant to get you informed about various aspects of the ecosystem. The approach is always experiential, where you’ll learn about a topic and build it yourself to see the concepts come to life. At the end of this book you should be able to make high-quality Angular applications and have the foundational knowledge and experience on which to build a career and applications.

The key takeaways in this book include the following:

How Angular works —We’ll look at some of the key internal concepts that make it such a compelling platform for building your applications. You’ll learn the concepts and build examples to illustrate them as part of a functional application.

How to build applications —In most chapters, we’ll walk step-by-step through a number of real-life examples. The code examples are comprehensive and focus on a certain set of goals for each chapter.

Learn about the ecosystem —Each example uses some third-party libraries and capabilities. This helps you see more of a realistic development experience and gain a foundation for building your own applications.

Get practical insights from my experiences —In many of the examples and notes about them, I share practical advice from my experience, including suggestions on things to avoid (even if it's perfectly legitimate code) and how to choose between different approaches when they’re provided.

You should be equipped to design and build web applications with Angular by the end of the book. If you’re not as interested in the technical aspects (perhaps as a manager), you’ll still glean a lot of the same lessons to get a solid frame of reference for how Angular works and what it provides for your project.

There are a few things I won’t be able to cover in this book, but just because these items aren’t specifically discussed, it doesn’t mean you can’t learn many things related to them. The following are not core topics covered in this book:

How to write libraries —This book focuses on how to build applications with Angular, and in many ways building a library has different guidelines and recommendations. That would be another book. But building a library is also difficult if you don’t know how to build an application first.

Every available API and features —Many APIs and features aren’t covered in this book, mostly because they’re rarely used. I believe this book will empower you to build your skills to the level that you can quickly learn these additional features as your project needs require.

How to design your app and UX principles —This is such a large topic that I can’t cover it fully. I’ve tried to show several different ideas and patterns in the chapter examples to give you some ideas, but it’s often opinion-based. I hope you’ll take time to compare the design of each and know that there can be limitations as well due to these being examples and not actual projects.

Angular is an evolving project, with new features and sometimes deprecation of existing ones. I’ve taken great care to ensure that the concepts taught are the core ideas that are unlikely to change (though they may be enhanced). If there are any changes that break some of the example code or concepts, please check the GitHub project for each chapter or the book’s forums, which should have a list of known changes and errata.

To better understand the impact of Angular in today’s web, let’s go back a few years to look at the history that brought us here.

1.3 The journey from AngularJS to Angular

Web applications came of age around 2009–2010, when the Web 2.0 fad finally gave way to better application approaches and frameworks. The term web application also became refined, due perhaps in large part to the standardization of HTML5 and EcmaScript 5 (the basis of JavaScript), and focused primarily on the ability to build robust applications that run almost entirely in the browser.

In 2009, Miško Hevery announced AngularJS, which became one of the most popular frameworks (if not the most) for building web applications. The AngularJS project was brought into Google, and version 1.0 was officially launched in October 2010. There were many other viable frameworks, but AngularJS struck a chord with a wide audience of developers.

Angular vs. AngularJS

There has been some confusion about Angular versions. The Angular team has decided to provide guidance and call the first version AngularJS. That’s the name it was given initially, and it separates it architecturally from later versions. Any release from 1.0 through 2.0 is known as AngularJS.

For versions 2.0 and greater, it’s known as just Angular. Version 2.0 was a complete rewrite, and all versions after it are planned as incremental changes upon it.

Angular version 2, officially announced in September 2014, was developed over the course of two years (plus some time prior to its announcement). It was released as Angular version 2 in September 2016, with Angular 4 being released in March 2017. The Angular team will continue to provide major releases on a six-month schedule, with a focus on easy upgrades. Depending on when you read this, Angular 6, or even 10, could be the most current release.

But you aren’t looking at this book to learn about the past—you’re interested in building modern web applications. Perhaps you’ve built Angular 1 applications, or even started with some of the Angular 2 guides. The focus of this book is on building modern web applications, and Angular provides the platform to elegantly accomplish that.

Throughout the book, I’ll mention AngularJS occasionally to draw connections for readers who have experience with it, but when I use Angular without a number, I’m always referring to Angular version 2 or greater. Check out https://angular.io (figure 1.1) for more info.

c01-1.png

Figure 1.1 The Angular website is a great resource for documentation, events, and everything about Angular.

1.4 Angular: a platform, not a framework

There are a few important distinctions between a framework and a platform. A framework is usually just the code library used to build an application, whereas a platform is more holistic and includes tooling and support beyond a framework. AngularJS was focused solely on building web applications in the browser and was clearly a framework. It had a large ecosystem of third-party modules that could be easily used to add features to your application, but at the heart of it all, it simply built web applications in the browser.

Angular comes with a leaner core library and makes additional features available as separate packages that can be used as needed. It also has many tools that push it beyond a simple framework, including the following:

Dedicated CLI for application development, testing, and deployment

Offline rendering capabilities on many back-end server platforms

Desktop-, mobile-, and browser-based application execution environments

Comprehensive UI component libraries, such as Material Design

Some of these things existed in some shape with AngularJS, but most were community solutions and were bolted into AngularJS after the fact. In contrast, Angular was developed with these platform features in mind.

These parts are still in refinement and will continue to evolve into more robust options.

1.4.1 Angular CLI

Modern development typically requires setting up many tools in order to start a project, which has given rise to more tools to help manage those tools. A typical project needs to manage handling a build process (asset optimization), testing (unit and end-to-end testing), and local development support (local server).

The CLI is always improving

The Angular CLI is a wonderful tool that has an ever-growing list of capabilities. Over time, it will likely do many more things than I mention here, and perhaps the capabilities may change as well.

The Angular

CLI

(often just referred to as the

CLI

) is the official toolchain for building Angular applications that provide these features and more. This book uses the

CLI

for all examples, and you’re encouraged to use it for your projects as well. You could roll your own build tooling, but that’s suggested only if the

CLI

doesn’t meet your needs.

You can install the CLI using npm. It does require that you have a recent version of NodeJS installed to run properly:

npm install -g @angular/cli

The

CLI

has a number of features that aid in the development of Angular apps. Here are the primary features:

Generates new project scaffolding —Instead of having to create a new project from an existing project or creating all the files yourself, the

CLI

will generate a full project with a basic app already started for you.

Generates new application pieces —Need a new component? Easy; it can generate the files for you. It can generate components, services, routes, and pipes, and it also will automatically ensure they are fully wired up in the build process.

Manages the entire build toolchain —Because files need to be processed before being served to the client (such as TypeScript compilation), the

CLI

will process your source files and build them into an optimized version for development or production.

Serves a localhost development server —The

CLI

handles the build flow and then starts a server listening on localhost so you can see the results, with a live reload feature.

Incorporates code linting and formatting code —Helps enforce quality code by using the

CLI

to lint your code for style and semantic errors, and it can also help format your code automatically to the style rules.

Supports running unit and e2e tests —Tests are vital, so the

CLI

sets up Karma for running your unit tests and works with Protractor to execute your e2e tests. It will automatically pick up and execute new tests as they’re generated.

You can add other features and capabilities to the

CLI

. To see the full list of features, you can run ng help to output the current help documentation. You can also read more about the

CLI

at https://cli.angular.io.

1.4.2 Server rendering and the compiler

Compiling output in Angular is decoupled from the browser in a way that allows Angular applications to be rendered in different environments, such as a server or desktop app. There are many great side effects of this design pattern, because Angular is much more versatile by being able to render on the client and server, and it opens many different opportunities.

There are two things in play here—first, the decoupled compiler of Angular, and then optional support for universal rendering. It takes a decoupled compiler to enable the universal rendering, because you can implement different rendering patterns depending on the environment.

The compiler in Angular is a very important piece of the puzzle. It’s responsible for resolving data bindings, registering event handlers, and rendering out the resulting

HTML

for components.

The term server rendering is about the notion that it shouldn’t matter where you run the JavaScript engine that executes Angular code. It should be possible to run Angular universally, such as with browser JavaScript engines, NodeJS, or even less common engines like Java’s Nashorn engine. This greatly increases the ways in which Angular can be used.

Why does this matter? Let’s explore a few primary use cases:

Server rendering for faster loading —Mobile devices are the primary way to access the internet these days, and mobile connections are frequently slow and unreliable. A server-side rendering option allows you to resolve data bindings and render components on the server so the initial payload sent to the user is pre-initialized. It can also optimize and send the necessary bytes for a quick initial load time and lazy load the other assets as needed.

Performance in the browser —One of the major pain points of JavaScript is that it’s single threaded, which means that JavaScript can only handle one instruction at a time. In modern browsers, a newer technology known as web workers allows Angular to push some of the execution of the compiler into another process. This means that a lot more processing can occur, and it allows things like animations and user interactions to be smoother.

SEO —There’s a major concern about how heavy JavaScript applications are crawled by search engines. Universal rendering means we can detect crawlers and render the site for them so that content is ready without having to worry if the crawler executes JavaScript (some do, some don’t). This will certainly enhance SEO efforts for Angular applications.

Multiple platforms —Many developers want to use other platforms for their back ends, such as

.NET

or

PHP

. Angular can be compiled in the platform of choice, assuming there’s a supported renderer. Angular will provide support for NodeJS, but the community is actively building and maintaining rendering support for other platforms such as Java and Go.

All of these have been issues for years in building web applications, and Angular provides a comprehensive solution. The great thing is you don’t have to do a lot of work to enable these features in your application.

This is an area of evolution at the time of writing, and setting it up correctly is an advanced topic that I can’t cover in depth. But the Angular documentation and CLI are being constantly improved to show you how to incorporate these types of benefits easily.

1.4.3 Mobile and desktop capabilities

The rendering capabilities enable Angular to work with native mobile and desktop applications. Tools like Cordova have been around for a while; they let you create hybrid applications—web applications wrapped up inside some type of native shell. But Angular’s rendering design makes it possible to support rendering out to different native platforms entirely.

The major value is that you can share a lot of code between your Angular applications, even if some are designed to build mobile apps and others are web applications. This is particularly valuable in large teams.

The mobile and desktop capabilities of Angular are extensions of the design of the compiler. The following tools are all outside of Angular’s core but use the design of Angular to power some powerful design patterns:

Ionic (mobile) —This fantastic and popular hybrid app framework (figure 1.2) for Angular JS has been updated to work with Angular. Millions of mobile apps have been created with Ionic, and it’s primarily focused on building hybrid apps. The UI components are all created to run in the browser, but look and feel like native UI components.

NativeScript (mobile) —This is another popular mobile framework that creates native mobile apps. NativeScript implements the native

UI

components but allows you to write Angular components to describe your application.

React Native (mobile, desktop) —By the name, you’d be correct to assume that React Native is really part of the React framework ecosystem. But with a custom render, it’s possible to use the React Native tool to generate native mobile apps.

c01-2.png

Figure 1.2 Ionic is a popular and powerful mobile framework for Angular.

Windows Universal (desktop) —Windows has support for building native Windows applications using JavaScript. It’s possible to use Angular as your application layer but still have to build out a native Windows application.

Electron (desktop) —Based on NodeJS, Electron is a very popular cross-platform application framework. It implements a set of

API

s to hook into the native OS, and you can leverage Angular to power the internal logic of your app.

Progressive Web Apps (mobile, desktop) —The capabilities of Progressive Web Apps (

PWA

s) aren’t limited to Angular. They’re fundamentally about blurring the line between the web and native. As of this writing, they’re in experimental support. This is an exciting potential avenue for building applications of tomorrow.

These different options support the power of the decoupled compiler in Angular. It also means that there will likely be many, many more examples and use cases that allow you to build Angular applications that can run nearly anywhere.

1.4.4 UI libraries

There’s an ever-growing catalog of

UI

libraries built