Tools

In order to make use of all these future technologies, we need some tools to support us. We were already talking about ECMAScript 6 and decorators, where we actually prefer TypeScript decorators, as they support the constructor parameter decorators that are used by Angular. Although the ECMAScript 6 syntax supports modules, we still need some sort of module loader that will actually load the required modules in the browser or help us generate an executable bundle.

Node.js and npm

Node.js is JavaScript on steroids. Initially, a fork of the V8 JavaScript engine from the Google Chrome browser, Node.js was extended with more functionality, specifically to make JavaScript useful on the server-side. File handling, streams, system APIs, and a huge ecosystem of user-generated packages are just some of the facts that make this technology an outstanding partner for your web development.

The node package manager, NPM, is a door to over 200,000 packages and libraries that can help you build your own application or library. The Node.js philosophy is very similar to the UNIX philosophy, where packages should stay small and sharp, but they should use composition to achieve greater goals.

To build our application, we will rely on Node.js as the host for the tools that we're going to use. We should, therefore, make sure that we install Node.js on our machine so that we are prepared for the next chapter, where we will start to craft our task management application.

The code within this book was written using Node.js 8.9.0. Please make sure you're installing an equivalent Node.js version on your system. You can get Node.js from their website at https://nodejs.org, and it should be a breeze to install this on any kind of operating system by following the instructions on their website.

Once you've installed Node.js, we can perform a simple test to check whether everything is up and running. Open a Terminal console and execute the following command:

node -e "console.log('Hello World');"

Angular CLI

There are many ways to start out with a new Angular project. The most convenient one is probably to use the Angular CLI. The CLI, as the name already suggests, is a command-line interface to create new projects as well as new artefacts within an existing project.

The following instructions are guiding you through the creation of your first Angular project using the Angular CLI tool.

1. Let's start by installing the Angular CLI on your system. Execute the following command on your command line:

npm install -g @angular/[email protected]

2. After you've installed the Angular CLI tool, you can now use it to scaffold a new Angular project. You can access the tool executable by typing ng in your terminal. Let's open another Terminal window and create a new Angular project using the Angular CLI tool:

ng new my-first-app --prefix mac

3. The previous step will take a while since all dependencies of your project need to be installed first. After completion, we can now use the CLI tool to start a local development server:

cd my-first-app
ng serve

4. You can now launch your favourite browser and open up the address http://localhost:4200, where you should see the message welcome to mac.

Congratulations! You've just created your first Angular application using the Angular CLI tool! As I already told you, the convenience level of starting an Angular project like this is really great.

The CLI tool can be viewed as a scaffolding tool which helps you set up the necessary tooling as well as the structure of your project. Let's take a look at the most important features you'll get for free when you're using the CLI to give birth to your project:

• TypeScript: Maybe obvious, but in order to use a transpiler, there will be many manual steps involved for you to set up the necessary tooling.
• Webpack: This massive power tool is solving a lot of problems you probably haven't even though about yet. Along with TypeScript transpilation, its main concern is to load ECMAScript modules and provides you with a development server to preview and work on your project. Finally, it's also the tool which helps you to create an optimized bundled version of your project for production use.
• Karma, Jasmine, and Protractor: This trio is unbeatable when it comes to testing! While Karma runs your executable specifications, Jasmin helps you write your tests. Protractor, on the other hand, can be used to create full end-to-end, integrational tests.

You could also use the ECMAScript 5 style of writing Angular applications, which would allow you to develop your application right away without additional tooling. However, if you want to leverage the full potential of Angular, you should write your application in TypeScript rather than JavaScript. The Angular API is optimized to use features from future JavaScript versions and TypeScript, in order to provide the best ease of development.

Please go ahead and explore the source code that has been generated using the Angular CLI. Over the course of the chapters in this book, we will gain more in-depth knowledge, which will help you understand and put all of those pieces together. For the moment, we were just concerned about the installation of the Angular CLI and gave it a quick dry run.