Angular 2 – Getting Started

 Why Angular? 

  1. Expressive HTML: Angular makes HTML more expressive. Expressive html is simply a different way of seeing, interpreting and authoring markup. It is a HTML with features such as `if condition’, for loops and local variables.
  2. Powerful data binding: Angular has powerful data-binding. We can easily display fields from data mode, track changes, process updates  from the user.
  3. Module by designer: Angular promotes modular by design. It is easier to make and reuse the content.
  4. Built in back-end integration: Angular has built-in support for communication with back-end services.

Why Angular 2? 

Angular 2 is built for speed. It has faster initial loads and improved rendering times. Angular 2 is  modern with advanced features including JavaScript standards such as classes, modules, object and operators. Angular 2 has a simplified AP. It has few directives and simple binding. It enhances productivity to improve day-to-day work flow

Angular 2 is a set of components and services that provide functionality across components.

What is Angular 2 Component?

Each component comprises a set of templates –  HTML for user interface.   The component  has meta-data and is `view’ defined.  The template associated with  the code is defined with `class’ and additional information defined with meta data.

What are Angular modules?

Angular modules help us to organize our application. Every angular application has at least  one angular module.

There are two type of angular module. Root Angular module and Feature Angular module:

Science Angular is a JavaScript library which we could use with any  JavaScript language. Most common language choices for Angular 2 are  ES 5 version of JavaScript, ES 2015, Typescript and Dart.

What is Type script?

Typescript is a an opensource language. Typescript is a super-set of JavaScript. One of the benefits of Typescript is strong typing which essentially means that everything has data type. Angular team itself takes advantage of these benefits to use  Typescript to build  Angular2. Typescript type definition files contain different aspects of a library.

When setting up our environment for Angular 2 application,  we need two basic node package managers.

Given below are some of the files which we need to set  up and configure for Angular 2 application.

Typescript configuration file(tsconfig.json):

 This specifies Typescript compile option and other settings. The typescript compiler “TSC” reads this file and tells typescript compiler to transpile our typescript code to es5 code. Details can be found in the below picture. The source map option if defined will generate map file. Map files assist with debugging. “emitdecoratormetadata” and “experimentalDecorators” are supports for decorator. This must be set to `true’ as otherwise the Angular application will not compile.The “noimplecitany” option defines whether all our variables are strongly typed or not.

We can configure this file, as per requirement:

  • TypeScript Definitions File (typings.json): This file contains a list of the node modules library. We are specifying “core-js” which brings es 2015 capability to es browser. The Node is used to develop and build the application and is used like a server.
  • npm Package File (package.json): It is the most important file for successful set up and development time execution.  This file describes basic information of the application.

  • main.ts: It will bootstrap our root application module. We are using dynamic bootstrapping and JIT compiler. This means Angular compiler compiles the application in the browser and lunch the application starting with the root application module “AppModule”


  • Deepak Kumar Barik

    Deepak Kumar Barik works as Senior Software Engineer with Trigent Software. Having completed his MCA and MCPD with highly skilled applications, he has nearly seven years of experience in .NET technology. He also has hands-on experience in C#.Net, ASP.Net, MVC, WCF, Azure, WEB API, web technologies and SQL.