Our expectations of the web (and by web I mean both) desktop and mobile have grown to a point where mature native desktop applications used to run in browsers. Web applications now resemble desktop native applications in scope and complexity, which adds to the complexity of the developer.
In addition, single-page applications (SPAs) have become a very common choice for building front-end experiences because they provide a good customer experience in terms of speed and responsiveness. Once the initial application is loaded into the client’s browser, further interaction only needs to worry about the additional data required to load, rather than having to reload the entire page as it used to be with server-side rendering.
AngularJS first brought structure and consistency to single-page Web application development, while providing a way to quickly develop scalable and maintainable Web applications. The web and browsers have evolved by leaps and bounds since AngularJS launched, and some of the problems AngularJS solves are no longer relevant.
Angular was basically a new rewrite of the framework, built for the new web. It takes advantage of many new advances from modules to Web components, while improving existing AngularJS features such as dependency injection and templates.
Angular offers some significant advantages as a framework and a common structure for developers on a team. It allows us to develop large applications in a maintainable manner. We will delve into each detail in the following chapters:
Angular lets you build your own declarative components that package functionality and rendering logic into small, reusable components. It also works well on network components.
Angular lets you write modular services and inject them where needed. This greatly improves testability and reusability.
Testing is a first-class citizen, and Angular was built with testability in mind from the ground up. You can (and should) test every part of your application.
Angular is a mature framework that provides out-of-the-box solutions for server communication, routing in applications, and more.
Getting Started with Your Development Environment
Angular wants you to do the groundwork so that development can be done seamlessly on your computer. You need to install some prerequisites, which we will introduce in this section.
Although you will never code in Node.js, Angular uses Node.js as the basis for most of its build environment. So, to get started with Angular, you need to install Node.js in your environment. There are several ways to install Node.js, so see the Node.js download page for more instructions.
TypeScript is an optional choice here when developing Angular applications. Still, it is highly recommended because it provides some advanced language features and makes the codebase easier to understand and maintain. In this book, we will use TypeScript to develop Angular applications.
TypeScript is installed as an NPM package, so it can be easily installed with the following command:
npm install -g typescript
Make sure you have at least version 2.4.0 installed. While we’ll cover most of the basic features/concepts used in TypeScript, it’s always a good idea to learn more from the official TypeScript documentation.
Unlike AngularJS, where it’s easy to get a file up and running as a dependency, Angular’s setup is a bit more complicated. In this case, the Angular team has created a command-line interface (CLI) tool to make it easier to boot and develop Angular applications.
Since it helps greatly simplify the development process, I recommend that you use it for your initial projects until you have mastered everything it does and can use it yourself. In this book, we introduce the CLI command and what it does below so that you have a good understanding of all the changes you need.