In this article, you are going to learn that how setup the development environment for Angular and TypeScript.
TABLE OF CONTENT
- What is Angular?
- Why do we need Angular?
- Architecture and Building Blocks of Angular Apps
- => Setting Up the Development Environment
- Your First Angular App
- Structure of Angular Projects
- TypeScript Fundamentals
- What is TypeScript?
- Creating First TypeScript Program
- Declaring Variables
- Type Assertions
- Arrow Functions
- Access Modifiers
- Access Modifiers in Constructor Parameters
- Angular Fundamentals
- Creating Components
- Generating Components Using Angular CLI
- Dependency Injection
- Generating Services Using Angular CLI
Before we start code with Angular, there are some prerequisites to install first. In this article we set up everything what we need to start work with Angular 4. Before we more further to learn Angular we need to make some decisions related to selection of programming language, Editor and setup our tools to get everything ready.
What Language to select for Angular?
We've selected TypeScript as our Angular language.
Editor or IDE for Angular
Once we've picked a language, we select an editor or IDE that fully supports development in that language. Then we set up the development environment to get started with Angular. In these there are lots of editors and IDEs offer support for TypeScript and we can check the documentation of TypeScript Editor Support, but we only get the clever Intellisense as we type if we use a supported IDE. Initially, this was only Microsoft's Visual Studio.
Some of the support TypeScript out of the box and by including a plugin. Select any one of these supported Editors or whichever suits you best, but keep in mind that working with TypeScript will be much pleasant if you select an editor that understands TypeScript.
We are going to use either Visual Studio or Visual Studio Code throughout the tutorial. It support it much better than other IDEs or Editors because Visual Studio 2017 now has ability to debug the TypeScript code as like C# code.
Setting up Development Environment
Setting up development environment for Angular require to Install npm or Node Package Manager
Install npm or Node Package Manager
First thing you need is the latest version of the Node. Visit the Node.js website and download the latest version of the Node.
We'll need npm to install all the libraries for Angular. Then we help us to execute scripts to compile our code and launch our Angular application.
After installing Node, we can verify it by running command “node –version” on command prompt that it has been install successfully or not.
With npm installed we are ready to install third party libraries e.g. Angular CLI for set up our Angular application and create our first Angular application.
It is the command line tool to create new Angular projects or generate some boiler-plate code and creates deployable packages. Now again move back to the command prompt and write below command to install Angular CLI on the development machine:
npm install -g @angular/cli
To ensure that installation is successful, check it with below command:
We have learnt how to setup the environment for Angular development and installation of Angular CLI. If we have installed tools required for development then we good go for creating our first Angular application.