Angular: Up and Running

Chapter 1. Introducing Angular

Our expectations of what we can perform on the web (and by web here, I mean both desktop as well as the mobile web) has increased to the point where what used to be full-fledged native desktop applications are run on the browser. Web applications now resemble desktop native applications in scope and complexity, which also results in added complexity as a developer.

Furthermore, Single-Page Applications (SPAs) have become a very common choice in building out frontend experiences, as they allow for great customer experiences in terms of speed and responsiveness. Once the initial application has loaded into a customer’s browser, further interactions only have to worry about loading the additional data needed, without reloading the entire page as was the norm with server-side rendered pages of the past.

AngularJS was started to first bring structure and consistency to single-page web application development, while providing a way to quickly develop scalable and maintainable web applications. In the time since it was released, the web and browsers have moved forward by leaps and bounds, and some of the problems that AngularJS was solving weren’t as relevant anymore.

Angular then was basically a completely new rewritten version of the framework, built for the new-age web. It leveraged a lot of the newer advances, from modules to web components, while improving the existing features of AngularJS, like dependency injection and templating.

Tip

From now on, when I say AngularJS, I refer to the original AngularJS framework, the 1.0 version. Whenever I mention Angular, it refers to the newer framework, from 2.0 onward. This is primarily because Angular 2.0 onward does not predicate itself to using only JavaScript, but also supports writing applications in TypeScript.

Why Angular

Angular as a framework provides a few significant advantages while also providing a common structure for developers on a team to work with. It allows us to develop large applications in a maintainable manner. We will dig into each one of these in more detail in the following chapters:

Custom components

Angular allows you to build your own declarative components that can pack functionality along with its rendering logic into bite-sized, reusable pieces. It also plays well with web components.

Data binding

Angular allows you to seamlessly move your data from your core JavaScript code to the view, and react to view events without having to write the glue code yourself.

Dependency injection

Angular allows you to write modular services, and have them injected wherever they are needed. This greatly improves the testability and reusability of the same.

Testing

Tests are first-class citizens, and Angular has been built from the ground up with testability in mind. You can (and should!) test every part of your application.

Comprehensive

Angular is a full-fledged framework, and provides out-of-the-box solutions for server communication, routing within your application, and more.

Note

Angular as a framework has adopted semantic versioning for all new releases. Furthermore, the core team has an aggressive roadmap, with a new major release planned every six months. Thus, what started off as Angular 2 is now referred to as just Angular, since we don’t want to call them Angular 2, Angular 4, Angular 5, and so on.

That said, unlike AngularJS to Angular, upgrading between versions of Angular (say 2 to 4, etc.) is an incremental step, and more often than not an almost trivial upgrade. So you don’t need to worry about having to do a major upgrade every few months with drastic code changes.

What This Book Will Not Cover

While Angular as a framework is quite large, the community around it is even larger. A lot of great features and options for use with Angular in fact stem from this community. This makes life harder as an author to figure out how to write a book that preps you, the reader, as an Angular developer, while still limiting the scope to what I think are the essentials.

To that extent, while Angular can be extended in so many ways, from writing native mobile apps using Angular (see NativeScript), rendering your Angular application on the server (see Angular Universal), using Redux as a first-class option in Angular (multiple options; see ngrx), and many more, the initial version of the book will only focus on the core Angular platform and all the capabilities it provides. It will also strive to focus on the more common cases rather than cover every single feature and capability of Angular, as such a book would run into thousands of pages.

The intention is to focus on the parts that will be necessary and useful to all Angular developers, rather than focus on bits and parts that would be useful to a subset.

Getting Started with Your Development Environment

Angular expects you to do a fair bit of groundwork to be able to develop seamlessly on your computer. Certain prerequisites need to be installed that we will cover in this section.

Node.js

While you will never be coding in Node.js, Angular uses Node.js as its base for a large part of its build environment. Thus, to get started with Angular, you will need to have Node.js installed on your environment. There are multiple ways to install Node.js, so please refer to the Node.js Download Page for more instructions.

Warning

On macOS, installing Node.js through Homebrew has been known to cause some issues. So try installing it directly if you run into any problems.

You need to install version 6.9.0 or above of Node.js, and version 3.0.0 or above of npm. You can confirm your versions after installing by running the following commands:

node --version
npm --v

TypeScript

TypeScript adds a set of types to the JavaScript code that we write, allowing us to write JavaScript that is easier to understand, reason about, and trace. It ensures that the latest proposed ECMAScript features are also available at the tip of our fingers. At the end of the day, all your TypeScript code compiles down to JavaScript that can run easily in any environment.

TypeScript is not mandatory for developing an Angular application, but it is highly recommended, as it offers some syntactic sugar, as well as makes the codebase easier to understand and maintain. In this book, we will be using TypeScript to develop Angular applications.

TypeScript is installed as an NPM package, and thus can be simply installed with the following command:

npm install -g typescript

Make sure you install at least version 2.4.0 or above.

While we will be covering most of the basic features/concepts that we use from TypeScript, it is always a good idea to learn more from the official TypeScript documentation.

Angular CLI

Unlike AngularJS, where it was easy to source one file as a dependency and be up and running, Angular has a slightly more complicated setup. To this extent, the Angular team has created a command-line interface (CLI) tool to make it easier to bootstrap and develop your Angular applications.

As it significantly helps making the process of development easier, I recommend using it at the very least for your initial projects until you get the hang of all the things it does and are comfortable doing it yourself. In this book, we will cover both the CLI command as well as the actions it performs underneath, so that you get a good understanding of all the changes needed.

Installing the latest version (1.7.3 at the time of writing this book) is as simple as running the following command:

npm install -g @angular/cli

Tip

If you are scratching your head at this newfangled naming convention for Angular packages, the new syntax is a feature of NPM called scoped packages. It allows packages to be grouped together within NPM under a single folder. You can read more here.

Once installed, you can confirm if it was successful by running the following command:

ng --version

Getting the Codebase

All the examples from this book, along with the exercises and the final solution, are hosted as a Git repository. While it is not mandatory to download this, you can choose to do so if you want a reference or want to play around with the samples in this book. You can do so by cloning the Git repository by running the following command:

git clone https://github.com/shyamseshadri/angular-up-and-running.git

This will create a folder called angular-up-and-running in your current working directory with all the necessary examples. Within this directory you’ll find subfolders containing the examples, organized by chapter.

Conclusion

At this point, we are all set up with our development environment and are ready to start developing Angular applications. We have installed Node.js, TypeScript, as well as the Angular CLI and understand the need and use of each.

In the next chapter, we will finally get our hands dirty building our first Angular application and understanding some of the basic terms and concepts of Angular.