Angular JS Application Development Environment Setup


This article introduces that how to set up a development environment for Angular JS application with NodeJs and VS Code IDE. We set up an environment in three steps and develop first Angular JS application using boilerplate project. These steps are:

  1. Install Node.js
  2. Install Angular CLI
  3. Install VS Code IDE

Install Node.js

Node.js is not a JavaScript while it is JavaScript based platform. Node.js and NPM are essential for Angular application development. These steps are complying with the installation of Node.js on the windows machine.

  1. Download Node.js Set up installer from official site https://nodejs.org/en/. It provides two window installers V6.11.5 LTS and V8.8.1 Current. We download a windows installer named node-v6.11.5-x64.msi that is LTS.
  2. Run Node.js set up node-v6.11.5-x64.msi Windows Installer. It opens Installation Wizard. We follow installation steps until it finished.
  3. Once the installation completes, restarts the system.

Hence, Node.js installation has been completed. Now, we verify that whether it is properly installed or not.

  1. We verify that Node.js installed on the system. We open the command prompt to execute command node –v. It prints Node.js version something like v6.10.0
  2. We verify that NPM installed on the system. We execute npm –v command in the Command prompt window. It prints a version number such as 3.10.10 that means the NPM installed on the system.

Now, both Node and NPM installed on the system.


Install Angular CLI

Angular JS is not a library while it is JavaScript framework to develop a dynamic web app. It works best for Single Page Application, Form-based application and large and complex application.

The Angular CLI is a tool that has commands for scaffolding. It is a command line interface to building a web app. We can create an Angular JS application with Angular CLI. We execute the following command to install Angular CLI.

npm install -g @angular/cli

This command installs the Angular CLI on the system. Here g means that Angular CLI installs globally.

Now, we create a project in Angular JS. We execute below command in command prompt.

ng new FirstAngularSample

Here FirstAngularSample is a name for the application. It creates a directory with the boilerplate project and installs all required dependencies.

Now we start app using the following command.

ng serve –Open

Here, the Open command opens the browser to run the app.

Hence, Angular JS app developed on the system. We execute these commands in the same directory where project exist.


Install VS Code IDE

Now, we install an IDE to modify and enhance application code. We can download VS Code IDE setup from official site https://code.visualstudio.com/. We run the exe file and comply all steps to install VS Code on the system.

Now, we run VS Code IDE on the system. To open the project, we click on File Menu –> Open Folders. After that, we choose the FirstAngularSample folder which is a root directory for developed application and clicks on Select Folder.Hence, the entire application shows in VS Code.

Now, we assign a new text value to title field in the app.component.ts file. This updated value will be shown in the browser when the application runs.

Now we display this title value in the browser. We use it in the app.component.html file as per following code snippet.

Now runs the application and it shows the web page as per the following image.

Figure: Angular App

Conclusion

We setup angular application development environment. Now, we can create a dynamic web app. Node and NPM versions must be node v4.x.x or higher and npm 3.x.x or higher.