Angular 2 - Part 6 [ Understanding AppModule ]

In our angular-cli generated app we have one module called app.module.ts inside the app dir. So whats the use of this, as in the previous post we said that this is used to bootstrap the component but lets examine this line by line what all other stuffs it can do
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

  1. At first we are importing all the modules that are used in our app 
    1. BrowserModule :  registers critical application service providers. It also includes common directives like NgIf and NgFor which become immediately visible and usable in any of this modules component templates.
    2. NgModule: This module is used to import angular core Module lib
    3. FormsModule: This module is used to handle the input related tasks 
    4. HttpModule: This mdule is used to make http services available in our module
  2. @NgModule : It is imported from angular/core. Here we tell angular what is used in our app. 
    1. declaration: What directives we have used in our app, Components are directives. It basically tells which componets should I use through out my application.
    2. imports: which other modules should I use. like browser module is used to use other default directives.
    3. providers: is used if we want to have application wise services
    4. bootstrap:  it is used to bootstrap the components that is used in this module
  3. The export keyword enable out module to be used externally
Thats all for now. In the next session we will talk about the templates \m/

Angular 2 - Part 5 [ How Angular App get started ]

How Angular 2 App get started?
Angular 2 is a single page app and will contains only one file called index.html in the root folder. although this html file doennot even contains any js files then how the fuck it get started:

Index file
<!doctype html>
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

Well when we compile and run the app then the angular-cli will dynamically add the required js files in the page. Which we can see the source in the page while its running

Well then where the fuck is our code?
The answer is it all we be inside the main.bundle.js file

here is the flow
  1. At first the angular app will always use main.ts file which will bootstrap the our app and create a js file at the run time. Inside teh main.ts file we have


    Which will load the AppModule from the module inside the app directory after importing it using

    import { AppModule } from './app/'; 
  2. Then the app will use the app.module.ts inside the app dir which will again bootstrap the AppComponent which we have created earlier in this series.

    bootstrap: [AppComponent]
  3. The Main this about angular 2 is that it will not load all the component at the beginning. It will only load the component which is in the index.html file which is app-root in our case. Its a lazy loading which will increase the performance.
  4. So the main flow is
    main.ts -> load the main module used in the index.html -> the main module will bootstrap the Component -> then main.ts will bootstrap the app and create a single main.bundle.js and add it to the main page -> then we enjoy :)

    Happy Coding geeks. In the next session we will talk about the AppModules \,,/

Angular 2 - Part 4 [ Understanding the Component ]

As we have seen angular is composed of lots of modules and component but what really is a component. Well we will learn this in this post

What our normal  app structure looks like - Here I am using the angular-cli

Here we have app.component.ts file inside the app directory which contains following beautiful lines of code:

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'app works!';

  1. The class name for this component is AppComponent
  2. The AppComponent is imported from core angular i.e. @angular/core 
  3. @Component is a decorator which makes this class something special, without this decorator this class will be nothing.
  4. Inside @Component decorator we have
    1. selector : The selector is what allow us to use our component. Its like creating our own html tag which contains certain user define properties. This selectors normally acts like a css selector. 
      1. Lets say we want to use selector as a ID or a class rather then creating this a new tag then we just need to modify selector as
        selector: '.app-root ' for class or
        selector: '#app-root' for id
        So that for eg. whenever we call div with class app-root then the same above component get loaded inside the div and for the ID as well.
    2. templateUrl : yeah! you are right every component must contains the html either inline type or may be load the different html page as shown in the given code. Here we are loading external html page in this component. If we are using the external html page then we need to use templateUrl otherwise we can write html also like

      template : '<div class="myAwesomeClass">{{title}}</div>';
    3. styleUrls: This is same as we decribed in the template section. we can define our own custom css for our componet either using the external css file or inline.
  5. export this keyword enable our component to be exported and use by other component too. 
    1. here title is a property which will be used in our template using the {{}} which is as we can compare with the scope in the angularjs 1
Thats all coders follow next tutorial for more happy coding moments \,,/

Anuglar 2 - Part 3 - Installing through Angular-Cli

we can now install the angular 2 cli in our system so that it can be used in the future with ease. It can also used to create the angular project with the simple commands in the terminal

for this we need to follow the following commands. Remember I am using the ubuntu terminal some commands can vary in windows and in mac it may need sudo permission :)

Step 1 
Install Angular-cli globally by using npm install -g angular-cli

Step 2
Make new directory using the command mkdir or whatever other technique you want. For this I am using mkdir myAngApp

Step 3
create a angular app in the above created directory using ng new <name of your project>
like ng new first-app

Step 4
now go to the project directory by cd first-app and then serve the angular project using the ng serve.
Now you can view the project in browser using localhost:3000 or what ever port your system has assigned please view the terminal for the port info.

WOW you have done it Congrats please tune for the next part for more happy coding :)

Angular 2 - Hello Angular's new world

Before starting this part please make sure that you have installed node in yout system. 
For this complete series I am using node v6.2.2 in the ubuntu 16.04 LTS system.

Step 1: Create your app directory
goto terminal or cmd and type mkdir myapp

Step 2: Open any text editor and create below files and save them in the respective dir i.e. myapp dir

Package.json : [The package.json will contain the packages that our apps require. These packages are installed and maintained with npm (Node Package Manager).]

  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  "licenses": [
      "type": "MIT",
      "url": ""
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",


  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false


  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"

Note:: A large number of libraries of the JavaScript extends JavaScript environment with features and syntax which is not natively recognized by the TypeScript compiler. Thetypings.json file is used to identify TypeScript definition files in your Angular application.
In the above code, there are three typing files as shown below:
  1. core-js: It brings ES2015/ES6 capabilities to our ES5 browsers.
  2. jasmine: It is the typing for Jasmine test framework.
  3. node: It is used for the code that references objects in the nodejs environment.


(function (global) {
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      rxjs: {
        defaultExtension: 'js'
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'

Step 3: To install packages
npm install

Step 4: Create new dir called app
mkdir app and create 

1. app.component.ts

import { Component } from '@angular/core';
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
export class AppComponent { 

The above code will import the Component and View package from angular2/core.
  1. The @Component is an Angular 2 decorator that allows you to associate metadata with the component class.
  2. The my-app can be used as HTML tag to injecting and can be used as a component.
  3. The export specifies that, this component will be available outside the file.

2. app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }   from './app.component';
import { ContactComponent }   from './dataBind/dataBind.component';

  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent]

export class AppModule { }

3. main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();

  1. The main.ts file tells Angular to load the component.
  2. To launch the application, we need to import both Angular's browser bootstrap function and root component of the application.

STEP 5:: Create index.html in the roor dir
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
      System.import('app').catch(function(err){ console.error(err); });
  <!-- 3. Display the application -->

STEP 6: Now Run 
using the terminal command npm start

Now the page will be opened in the browser with the text "My first Angular App" text

Angular 2 - Introduction

What is Angular 2?
Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript and has been conceived as a mobile first approach.

The beta version of Angular 2 has been released in the March of 2014.

Why to use Angular 2?
Angular 2 is simpler than Angular 1 and its fewer concepts make it easier to understand. You can update the large data sets with minimal memory overhead.It will speed up the initial load through server side rendering.

  1. Angular 2 is faster and easier than Angular 1.
  2. It supports latest the version of browsers and also supports old browsers including IE9+ and Android 4.1+.
  3. It is a cross platform framework.
  4. Angular 2 is mainly focused on mobile apps.
  5. Code structure is very simplified than the previous version of Angular.
  6. Angular 2 has a more powerful templating system then Angular 1.
  7. Angular 2 has simpler APIs, lazy loading, easier debugging.
  8. Angular 2 is much more testable then Angular 1.

  1. If an application is a heavy load, then Angular 2 keeps it fully UI responsive.
  2. It uses server side rendering for fast views on mobile.
  3. It works well with ECMAScript and other languages that compile to JavaScript.
  4. It uses dependency injection to maintain applications without writing too long code.
  5. Everything will be the component based approach.

Angular 2 is mainly rewritten to eliminate the issues we were facing in Angular 1 version consider its performance issue or maintainability in large scale.