There is some preparation required for Angular development. In the sections that follow, I explain how to get set up and ready to create your first project. There is wide support for Angular in popular development tools, and you can pick your favorites.
It is important that you download the same version of Node.js that I use throughout this website. Although Node.js is relatively stable, there are still breaking API changes from time to time that may stop the examples.
The version I have used is 8.11.3, which is the current Long-Term Support release at the time of writing. There may be a later version available by the time you read this, but you should stick to the 8.11.3 release for the examples on this website. A complete set of 8.11.3 releases, with installers for Windows and macOS and binary packages for other platforms, is available at the click here
When you install Node.js, make sure you select the option to add the Node.js executables to the path. When the installation is complete, run the following command:
If the installation has gone as it should, then you will see the following version number displayed:
The Node.js installer includes the Node Package Manager (NPM), which is used to manage the packages in a project. Run the following command to ensure that NPM is working:
If everything is working as it should, then you will see the following version number:
Installing the angular-CLI Package
The angular-CLI package has become the standard way to create and manage Angular projects during development. In the original version of this book, I demonstrated how to set up an Angular project from scratch, which is a lengthy and error-prone process that is simplified by angular-CLI. To install Angular CLI, open a new command prompt and run the following command:
npm install --global @email@example.com
Notice: that there are two hyphens before the global argument. If you are using Linux or macOS, you may need to use sudo, like this:
sudo npm install --global @firstname.lastname@example.org
The Git revision control tool is required to manage some of the packages required for Angular development. If you are using Windows or macOS, then download and run the installer from https://git-scm.com/downloads. (On macOS, you may have to change your security settings to open the installer, which has not been signed by the developers.)
Git is already installed on most Linux distributions. If you want to install the latest version, then consult the installation instructions for your distribution at https://git-scm.com/download/linux. As an example, for Ubuntu, which is the Linux distribution I use, I used the following command:
sudo apt-get install git
Once you have completed the installation, open a new command prompt and run the following command to check that Git is installed and available:
This command prints out the version of the Git package that has been installed. At the time of writing, the latest version of Git for Windows and Linux is 2.17, and the latest version of Git for macOS is 2.16.3.
Installing an Editor
Angular development can be done with any programmer’s editor, from which there is an endless number to choose from. Some editors have enhanced support for working with Angular, including highlighting key terms and good tool integration. If you don’t already have a preferred editor for web application development, then Table 2-1 describes some popular options for you to consider. I don’t rely on any specific editor for this book, and you should use whichever editor you are comfortable working with.
Table 2-1. Popular Angular-Enabled Editors
|Sublime Text||Sublime Text is a commercial cross-platform editor that has packages to support most programming languages, frameworks, and platforms. See www.sublimetext.com for details.|
|Atom||Atom is a free, open-source, cross-platform editor that has a particular emphasis on customization and extensibility. See atom.io for details.|
|Brackets||Brackets is a free open source editor developed by Adobe. See brackets.io for details|
|WebStorm||WebStorm is a paid-for cross-platform editor that integrates many tools so that you don’t have to use the command line during development. See www.jetbrains.com/webstorm for details|
|Visual Studio Code||Visual Studio Code is a free, open-source, cross-platform editor from Microsoft, with an emphasis on extensibility. See code.visualstudio.com for details.|
|Visual Studio||Visual Studio is Microsoft’s flagship developer tool. There are free and commercial editions available, and it comes with a wide range of additional tools that integrate into the Microsoft ecosystem.|
When choosing an editor, one of the most important considerations is the ability to filter the content of the project so that you can focus on a subset of the files. There can be a lot of files in an Angular project, and many have similar names, so being able to find and edit the right file is essential. Editors make this possible in different ways, either by presenting a list of the files that are open for editing or by providing the ability to exclude files with specific extensions.
Installing a Browser
The final choice to make is the browser that you will use to check your work during development. All the current-generation browsers have good developer support and work well with Angular. I have used Google Chrome throughout this book, and this is the browser I recommend you use as well.