Angular 2 Installation

npm install  -g @angular/cli
npm stands for node package manager

for npm we need to install Nodejs.(

node –v(version of node),

npm –v(version of npm)

Now we need to install angular CLI(command line interface ).in

  • npm install –g @angular/cli
  • ng –v (to know cli version)
  • ng new project-name ( creating new project)
  • cd project-name(to enter in to project)
  • ng serve(to serve the project)

Folder structure:

  1. json
    1. scripts
    2. dependencies
    3. dev dependencies


scripts will control angular project like ng-serve, ng-build, ng-test….

ng-serve -to serve the project

ng-build – to build the project production purpose

ng-test- to test the project








Angular is depended upon there technologies like typescript, nodejs, rexjs, cli….etc.


Root:- src-it means this root folder is src

Index:- index.html  – this file display on the browser

Main:-  main .ts this is the main typescript file for the project and in this file angular is “bootstraping”  “ appmodule “.

Bootstrapping – main module (file module) which is located in app folder.


In app folder we contain app module and app component .

App module: every ts file is combination of 3 phases 1 st is import .

Import -> angular telling to typescript this file belongs to angular code

from imports we can import modular component services directives,

pipes etc….

Phose –II:

Decorator -> decorator will starts with @, decorator contain meta data

in module . Decorator contain declaration, imports, providers,


Bootstrap :- it will call first component (app.component)

Declaration :- in this we can declare components, pipes, directives…

Imports:- this we can declare modules,

Ex:-http modules, form modules, browser module …


Providers :- in providers we declare the services .

App Component:-

Phase –III:- it will export the class logic .

APP . components:-

It contains imports decorator export class logic;

@component decorator:- in this we have a selector templateURL,

Style URL.

Selector :- app-root

Style :- css style.

Selector:- we will consider selector as an element in HTML file, and this

element will shows complete template and styles, ts, properties and

methods in HTML file.

Ex:- from app.component.ts-> we will take app-root selector and call this in index.html, then index.html will show app.component.html data display on browser.

Angular Architecture :



Angular 2 Training


In this architecture  that template interact with component is we will call event binding .and component to template that is Property binding.
directives are interactwith template only, and services interact with component .

Component  :-

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

To create component ->

>ng  generate component   componentName

or (>ng  g  c name).

Directives :-  

Directives are similar to components, components are just directives with a view attached. There are three kinds of directives in Angular 2 as given below.

  1. components — To create HTML template.
    b. attribute — To changes the appearance and behavior of DOM element(NgStyle, NgClass).
    c. structural — To add and remove DOM elements(NgFor, NgIf).


To create custom directive:

>ng generate directive dname.

Or(>ng  g  d  name)

Leave a Reply