Angular2: Environment, Features and Components

Environment: The key components which are needed for Angular 2 are:

NPM - Node Package Manager: Which is used to work with open source repositories. This is used to download the dependencies and attach them to the project as Angular 2 as a framework has dependencies on other components.

Git: Can be used to get the sample application from GitHub for Angular.

Editor: Many editors can be used to develop Angular applications such as Visual Studio Code, Visual Studio and WebStorm.

Different ways to get started with Angular are:

• One way is to do everything from scratch which is the most difficult and not the preferred way due to the number of dependencies.
• Another way is to use the quick start at Angular GitHub. This contains the necessary code to get started. This is normally what is opted by all developers. GitHub Location to Download
• The final way is to use Angular CLI

Features: Following are the key features of Angular 2:

• Components: These will help to build the applications into many modules. Components are over Controllers from AngularJS.
• TypeScript: This is a superset of JavaScript and is the basis for Angular 2
• Services: Services are set of code which can be shared by different components of an application. As an example, if you had a data component that picked data from a database could have it as a shared service that could be used across multiple applications

In addition, Angular 2 has better event handling capabilities, powerful templates and better support for module devices.

Components: Below are components of Angular 2:

• Modules: help separate the functionality of application into logical pieces of code. Usually each piece of code or module is designed to perform a single task. If you are using Visual Studio Code, app.module.ts file under app folder contains the root module class.
• Component: can be used to bring the modules together, and are logical pieces of code in an angular application. If you are using Visual Studio Code, App.component.ts file in app folder contains this file
• Template: used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives
• Metadata: is used to decorate a class so that it can configure the expected behavior of the class and consists of Annotations and Parameters as parts and resides as part of app.component.ts file
• Services: used to create components which can be shared across the application

Setting up the Environment:

If you selected Visual Studio Code as your Editor:

• Install node.js using https://nodejs.org/en/ Link. NPM will be installed along with this.
• Install Visual Studio Code using https://code.visualstudio.com/download
• If you don't have Git installed, use link https://git-scm.com/download/win to install the same. Helps to maintain the code base, not a mandatory requirement

If you selected Visual Studio 2015 as your Editor:

• Install node.js using https://nodejs.org/en/ Link. NPM will be installed along with this.
• Install Visual Studio 2015 with update 3 using https://www.visualstudio.com/vs/older- downloads/
• Install TypeScript using https://www.microsoft.com/en- us/download/details.aspx?id=48593 link OR using npm install -g typescript@2.0 command from Command Prompt
• If you don't have Git installed, use link https://git-scm.com/download/win to install the same. Helps to maintain the code base, not a mandatory requirement

Verify the Installed Versions

• Open command prompt and use node -v to get Node.js version
• Open command prompt and use npm -v to get NPM version
• Launch Visual Studio -> Help Menu -> About Microsoft Visual Studio to get the Visual Studio version
• Launch Visual Studio -> Help Menu -> About Microsoft Visual Studio to get the TypeScript version

Once these are ready, we are good to START creating our FIRST Angular 2 Application.

Happy Programming !!!