Dev Environment

To work with Angular and start developing your own component-driven websites, you will need to make some decisions and create an environment for building, compiling, and running your application. In this chapter, we will set that environment up and get ready to build our first application.

Language

Angular lets us build client applications in HTML and CSS, and either JavaScript or a script language that compiles to JavaScript. We are going to use TypeScript rather than JavaScript for working with Angular. Don’t worry if you are not familiar with TypeScript; if you have used JavaScript and object-oriented programming before, you should be able to pick up TypeScript very quickly.

Note: You can download the ebook TypeScript Succinctly by Steve Fenton from the Syncfusion website.

You can use JavaScript for Angular; however, Angular itself is written in TypeScript, and most examples will use the TypeScript language. Since TypeScript is “strongly-typed JavaScript” (and more), any editor that supports TypeScript will be able to use IntelliSense features to make your development work much easier.

Editor

You can use any editor you would like to develop Angular applications, but your programming work will be much easier if you choose an editor that supports TypeScript. For the purposes of this book, we are going to use Microsoft’s Visual Studio Code. You can download Visual Studio Code here (it’s free).

If you are not familiar with Visual Studio Code, it is an editor and development tool that operates similarly to Visual Studio, but is more geared toward managing files and folders than solutions and projects. An Angular application works in folders and files, so Visual Studio Code can work very well with Angular applications.

Note: You can download the book Visual Studio Code Succinctly by Alessandro Del Sole from the Syncfusion website.

Node Package Manager (NPM)

Angular is a JavaScript framework that will add thousands of files and folders (supporting libraries) into your application folder. The best way to manage these files and folders is to let another application do it for you. The Node Package Manager is that program. It is a prerequisite to using Angular for development.

Installing NPM

To install the package manager, visit the Node.js downloads page.

You will see the following page (although its appearance may change over time).

Figure 3: NPM Install Page

Download and install the version that is right for your machine.

NPM is a console-based program that we will use to install the Angular framework, as well as other useful features. Visual Studio Code allows you run a command window (use the View > Integrated Terminal menu) from within Visual Code, or you can open your own console window and run the necessary commands from there.

You can always update to the most current version of NPM by using the following command at a command prompt window.

npm install npm@latest -g

This will install the most current version for use globally on your computer.

Note: There is much more to Node and NPM than what we need for Angular. JavaScript packages can be managed using NPM, and at the time of this writing, there are over 300,000 packages accessible through NPM. Be sure to visit the NPM website if you want to learn more.

Confirming NPM

Open a console window and confirm that NPM was installed properly. You can do this by checking the version, as shown in Figure 4 (your version may be different).

Figure 4: NPM Version

Installing packages

When we create our Angular application folders, one of the files will be a JSON configuration file that NPM will use to manage our package dependencies. Here is a sample:

We will cover this more in the next chapter. One key point is that the version number is specified for the dependencies, allowing you to keep your production environment safely at one version, while possibly exploring new features in a later version.

Summary

Now that your development environment is built, you are ready to put together your first Angular application.