SlideShare a Scribd company logo
Angular 2
~ Ahasan Habib
Development Environment
● Operating System
* Windows
* Linux
* Mac
● Integrated Development Environment (IDE)
VISUAL STUDIO CODE (VSCODE)
VISUAL STUDIO 2015
● Nodejs
Programming Language
● Typescript
● Javascript
Introduction
● One Framework (Mobile & Desktop)
● Successor of Angular-1x
● But huge difference from angular 1x ...
● Configurations
* Systemjs.config.js
* tsconfig.json
* package.json
● Application Shell
Core Features
● Modules
● Components
● Templates
● MetaData
● Data Bindings
● Directives
● Services
● Dependency Injection
Module
Component
Template
Metadata
Data Binding
1. One way (Source to View Or View to Source).
2. Two way (Source to View AND View to Source).
3. Value Binding
4. Property Binding
5. Event Binding
6. Model Binding
Directives
1. Component Directives
2. Structural Directives
3. Attribute Directives
● NgFor
● NgIf
● NgModel
● NgSwitch
● NgSwitchCase
● NgSwitchDefault
Service
● No Specific Defination
● Components are basically service consumer.
● [LoggingService, DataService, Application Configuration]
Dependency Injection
Other Features
● Animations
● Change Detections
● Events
● Forms
● Http
● Lifecycle Hook
● Pipes
● Router
● Testing
“Tell me and I forget, teach me and I may
remember, involve me and I learn.”
― Benjamin Franklin
THANKS TO ALL

More Related Content

Viewers also liked

AmazonRedshift
AmazonRedshiftAmazonRedshift
AmazonRedshift
Ahasan Habib
 
DECK36 - Log everything! and Realtime Datastream Analytics with Storm
DECK36 - Log everything! and Realtime Datastream Analytics with StormDECK36 - Log everything! and Realtime Datastream Analytics with Storm
DECK36 - Log everything! and Realtime Datastream Analytics with Storm
Mike Lohmann
 
Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013
Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013
Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013
Amazon Web Services
 
Uses and Best Practices for Amazon Redshift
Uses and Best Practices for Amazon Redshift Uses and Best Practices for Amazon Redshift
Uses and Best Practices for Amazon Redshift
Amazon Web Services
 
Real-Time Streaming Data on AWS
Real-Time Streaming Data on AWSReal-Time Streaming Data on AWS
Real-Time Streaming Data on AWS
Amazon Web Services
 
Building Your Data Warehouse with Amazon Redshift
Building Your Data Warehouse with Amazon RedshiftBuilding Your Data Warehouse with Amazon Redshift
Building Your Data Warehouse with Amazon Redshift
Amazon Web Services
 
Streaming Data Analytics with Amazon Redshift and Kinesis Firehose
Streaming Data Analytics with Amazon Redshift and Kinesis FirehoseStreaming Data Analytics with Amazon Redshift and Kinesis Firehose
Streaming Data Analytics with Amazon Redshift and Kinesis Firehose
Amazon Web Services
 
Deep Dive on Amazon Redshift
Deep Dive on Amazon RedshiftDeep Dive on Amazon Redshift
Deep Dive on Amazon Redshift
Amazon Web Services
 
Getting Started with Amazon Redshift
Getting Started with Amazon RedshiftGetting Started with Amazon Redshift
Getting Started with Amazon Redshift
Amazon Web Services
 

Viewers also liked (9)

AmazonRedshift
AmazonRedshiftAmazonRedshift
AmazonRedshift
 
DECK36 - Log everything! and Realtime Datastream Analytics with Storm
DECK36 - Log everything! and Realtime Datastream Analytics with StormDECK36 - Log everything! and Realtime Datastream Analytics with Storm
DECK36 - Log everything! and Realtime Datastream Analytics with Storm
 
Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013
Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013
Getting Maximum Performance from Amazon Redshift (DAT305) | AWS re:Invent 2013
 
Uses and Best Practices for Amazon Redshift
Uses and Best Practices for Amazon Redshift Uses and Best Practices for Amazon Redshift
Uses and Best Practices for Amazon Redshift
 
Real-Time Streaming Data on AWS
Real-Time Streaming Data on AWSReal-Time Streaming Data on AWS
Real-Time Streaming Data on AWS
 
Building Your Data Warehouse with Amazon Redshift
Building Your Data Warehouse with Amazon RedshiftBuilding Your Data Warehouse with Amazon Redshift
Building Your Data Warehouse with Amazon Redshift
 
Streaming Data Analytics with Amazon Redshift and Kinesis Firehose
Streaming Data Analytics with Amazon Redshift and Kinesis FirehoseStreaming Data Analytics with Amazon Redshift and Kinesis Firehose
Streaming Data Analytics with Amazon Redshift and Kinesis Firehose
 
Deep Dive on Amazon Redshift
Deep Dive on Amazon RedshiftDeep Dive on Amazon Redshift
Deep Dive on Amazon Redshift
 
Getting Started with Amazon Redshift
Getting Started with Amazon RedshiftGetting Started with Amazon Redshift
Getting Started with Amazon Redshift
 

Similar to angular2-learn

Best Angular JS training in Hyderabad, India
Best Angular JS training in Hyderabad, IndiaBest Angular JS training in Hyderabad, India
Best Angular JS training in Hyderabad, India
N Benchmark IT Solutions
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) Presentation
Raghubir Singh
 
JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!
_Dewy_
 
Angular js 2.0 beta
Angular js 2.0 betaAngular js 2.0 beta
Angular js 2.0 beta
Nagaraju Sangam
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
Dani Akash
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
Ravi Mone
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
Premkumar M
 
Presentation on angular 5
Presentation on angular 5Presentation on angular 5
Presentation on angular 5
Ramesh Adhikari
 
SEC Cosmin Vladutu & Ion Condrea
SEC Cosmin Vladutu & Ion CondreaSEC Cosmin Vladutu & Ion Condrea
SEC Cosmin Vladutu & Ion Condrea
johnny_woopie
 
Wad Sec Project
Wad Sec ProjectWad Sec Project
Wad Sec Project
Cosmin Vladutu
 
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)
Ofer Cohen
 
CraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJSCraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJS
craftworkz
 
Jab12 - Joomla! architecture revealed
Jab12 - Joomla! architecture revealedJab12 - Joomla! architecture revealed
Jab12 - Joomla! architecture revealed
Ofer Cohen
 
Demystifying microservices for JavaEE developers by Steve Millidge.
Demystifying microservices for JavaEE developers by Steve Millidge.Demystifying microservices for JavaEE developers by Steve Millidge.
Demystifying microservices for JavaEE developers by Steve Millidge.
Payara
 
Module2
Module2Module2
Module2
Hoàng Lê
 
Java 9 and Project Jigsaw
Java 9 and Project JigsawJava 9 and Project Jigsaw
Java 9 and Project Jigsaw
DPC Consulting Ltd
 
Moving From AngularJS to Angular 2
Moving From AngularJS to  Angular 2 Moving From AngularJS to  Angular 2
Moving From AngularJS to Angular 2
Exilesoft
 
Angular js- 1.X
Angular js- 1.XAngular js- 1.X
Angular js- 1.X
Nitin Giri
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
jbandi
 
Getting started with Azure Functions in Isolated Mode
Getting started with Azure Functions in Isolated ModeGetting started with Azure Functions in Isolated Mode
Getting started with Azure Functions in Isolated Mode
Callon Campbell
 

Similar to angular2-learn (20)

Best Angular JS training in Hyderabad, India
Best Angular JS training in Hyderabad, IndiaBest Angular JS training in Hyderabad, India
Best Angular JS training in Hyderabad, India
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) Presentation
 
JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!JEE Conf 2015: Less JS!
JEE Conf 2015: Less JS!
 
Angular js 2.0 beta
Angular js 2.0 betaAngular js 2.0 beta
Angular js 2.0 beta
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
Presentation on angular 5
Presentation on angular 5Presentation on angular 5
Presentation on angular 5
 
SEC Cosmin Vladutu & Ion Condrea
SEC Cosmin Vladutu & Ion CondreaSEC Cosmin Vladutu & Ion Condrea
SEC Cosmin Vladutu & Ion Condrea
 
Wad Sec Project
Wad Sec ProjectWad Sec Project
Wad Sec Project
 
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)Joomla!Day Poland 2013 - Joomla Architecture  (Ofer Cohen)
Joomla!Day Poland 2013 - Joomla Architecture (Ofer Cohen)
 
CraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJSCraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJS
 
Jab12 - Joomla! architecture revealed
Jab12 - Joomla! architecture revealedJab12 - Joomla! architecture revealed
Jab12 - Joomla! architecture revealed
 
Demystifying microservices for JavaEE developers by Steve Millidge.
Demystifying microservices for JavaEE developers by Steve Millidge.Demystifying microservices for JavaEE developers by Steve Millidge.
Demystifying microservices for JavaEE developers by Steve Millidge.
 
Module2
Module2Module2
Module2
 
Java 9 and Project Jigsaw
Java 9 and Project JigsawJava 9 and Project Jigsaw
Java 9 and Project Jigsaw
 
Moving From AngularJS to Angular 2
Moving From AngularJS to  Angular 2 Moving From AngularJS to  Angular 2
Moving From AngularJS to Angular 2
 
Angular js- 1.X
Angular js- 1.XAngular js- 1.X
Angular js- 1.X
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
 
Getting started with Azure Functions in Isolated Mode
Getting started with Azure Functions in Isolated ModeGetting started with Azure Functions in Isolated Mode
Getting started with Azure Functions in Isolated Mode
 

angular2-learn