Angular has become very popular among developers. Every developer's first choice is to create angular applications (angular applications or angular web applications). Here we will explore setting up development environments for Angular. We will discuss each required tool for angular development setup.
Set Up Angular Development Environment
Getting StartedBefore starting the setting up application environment for angular. Let me introduce a little about angular. Angular is a client-side framework developed by the Google team. It is suitable for developing single-page applications and provides a standard way to develop UI recommended by HTL 5.
Here in this blog post, we will explore web development setup with Angular, we will discuss each and every part that is used for setting up a node server. You may be surprised why I am talking about node server though we are discussing setting up development environments for Angular. Node JS is a pillar of angular development environments, it plays a measure role in creatig a new angular project. In short, The node server provides an environment for angular web applications.
Node JS
To create new project in angular, the first required thing is Node JS, Node JS provides a run time environment to execute angular code. Along with angular applications or angular web applications, you can create a node JS application that can run outside the browser such a desktop or even servers that respond to the HTTP requests with Node JS or you can build app with node JS. Click the below link to download Node JS and install node JS.
Install Node JS Windows
There is a separate blog post I have already written. Please visit the post which helps to install NodeJS and create node JS development environment.
What is npm ?
With the installation of node JS, the npm also installed automatically. The node package manager known as npm is a tool for angular development that simplifies dependencies. Like other languages, node JS is also has its own package manager. It is same as C# Nuget or Java Maven where we are downloading the required libraries or packages. Various JavaScript packages can be downloaded using npm for example Angular Framework, Angular CLI etc, Next you will see how npm is used for setting up a web development environment with angular.
Install Angular CLI
The second most important thing in angular is Angular CLI, CLI in angular is a command-line interface tool for angular development. This angular tool is the official resource used to initialize, develop, scaffold, and maintain Angular projects directly from a command shell. It saves you from the mess of complicated configurations and builds resources like TypeScript, Webpack, and so on. Next to this, I have given a short idea about TypeScript and Webpack
The Angular command line interface is installed using npm package manager using the node command given below. Another blog post provides steps of angular CLI installation in detail. Visit the blog post to install the CLI.
npm install @angular/cli
TypeScript
TypeScript is a programming language with a compiler. After compiling codes, it generates JavaScript code. Angular applications are recommended to be developed in TypeScript, TypeScript is available as a package on the npm registry available as "typescript". So we will download and install TypeScript using the npm command use the below command to install TypeSctipt.
npm install typescript
npm install angular cli
Visual Studio Code (Vs code) IDE
Visual studio code is light, easy to set up, and free to use, I will recommend using VS code as integrated development environment (IDE) to develop web app using angular. As like other software VS code is easy to install, it is just next, next, and install process.
Click here to download the Visual Studio Code.
Module Loader
Before continuing to work on the angular applications or projects, you should know about module loader. a module loader library that loads the JavaScript file at run-time dynamically. One example of such a module loader is systemjs. it can be downloaded using the node js install command. the below example shows how to use the command.
npm install systemjs
Webpack
Webpack is a module bundler, a module bundler is a node module that takes a JavaScript file as input and then identifies all the other JavaScript files that the input file is dependent on directly or indirectly. it merges all he files and generates one single JavaScript File. Webpack is the default module bundler of angular applications. it can be downloaded and installed using the node command.
npm install webpack
We have completed all the steps for angular environment setup now. For more angular help you can visit the original site. I hope this blog post is helpful you for setting up a dev environment.
Thanks