SlideShare a Scribd company logo
-Rohit Kumar @rbdharnia
-Manish Kapoor @kapoormanish_89
Angular2 with TypeScript
Agenda
TypeScript
• What is TypeScript
• Installation
• Hello World!!
• Features
• Demos
– Types
– Class
– Inheritance
– Interface
Angular2
• Why angular 2?
• Angular 2 quick start
application
• Angular 2 architecture
• Navigation and Routing
Angular2 with TypeScript
TypeScript
Installation:
TypeScript
The “Hello World!!”:
TypeScript
○ Implements ECMA 6 Specification.
○ Has types(number, string, boolean, any)
○ Better Support for OOP(Classes, Interfaces, Inheritance, Enum)
○ Optional typing(Duck typing)
○ Functions(Optional parameters, default parameters)
○ Module System (Exporting & Importing modules)
Features:
TypeScript
Demo: Inheritance
TypeScript
Demo: Types
TypeScript
Demo: Class
TypeScript
Demo: Interface
TypeScript
Exercises!!
1. Hello World!
2. Create a method with multiple parameters.
3. Create a method with default parameters.
4. Create a method with optional parameters.
5. Create a class with name “Person” and fields ‘firstName’ and
‘lastName’.
6. Add a funtion print() in the class which prints firstName and
secondName
7. Create a constructor.
8. Create another class Employee which extends Person
9. Add another field ‘employeeCode’ and method print() . This method
should override the method of base class
Angular2 with TypeScript
Angular 2 Agenda
• Why angular 2?
• Angular 2 quick start application
• Angular 2 architecture
• Navigation and Routing
Why Angular2
• Simple, but Not Simplistic
• Web component oriented architecture
• Mobile First
• Better Foundations (DI, Router, Components)
• Speed & Performance
• Productivity
Angular 2 Quick Start
Step 1: Create and configure the project
A. Create the project folder
B. Add package definition and configuration files
C. Install packages
Angular 2 Quick Start
Angular 2 Quick Start
No need to add configuration
yourself, just clone and checkout to
branch ‘master’.
git@github.com:rohitbishnoi/angular2-
quickstart.git
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Architecture Overview
Architecture Overview
1. Modules
a. Angular apps are modular
b. Generally we assemble our application from many modules
c. Block of code dedicated to a single purpose
d. A module exports some value, typically a class.
e. Modules are optional, but it is highly recommended.
Architecture Overview
2. Components
a. A component controls a portion of screen, we could call it a
view.
b. We define components application logic inside a class.
c. Class interacts with view through its API.
Components continued..
Architecture Overview
3. Templates
a. We define a component's view with its companion template.
b. A form of html that tells Angular how to render the
component.
c. Most of the time it looks like regular html … and then it get a
bit strange.
d. See the example on next page.
Templates continued..
Templates continued..
Let's write some code now
• Create a ToDoListComponent
• It will have 2 variables, todos list and a selectedTodo
• Bootstrap todo list
• Create a template todo-list-component.html
• Display a list of bootstrapped todos.
Hint: use directives option in AppComponent config
metadata to make it aware about ToDoListComponent.
directives: [TodoListComponent]
Templates continued..
<li *ngFor="let todo of todos" (click)="selectTodo(todo)">
{{todo}}
</li>
What is *ngFor and (click) in above code snippet ?
Templates continued..
Template Syntax
• Html
• Interpolations {{selectedTodo}}, {{2+2}}
• Template Expressions [property]="expression"
• Template Statements: responds to an even raised by
a binding target for ex (event)="statement"
• Binding Syntax: binding data value to and from the
data model.
Template Syntax continued..
Data Direction Syntax Binding Type
One-way
from data source
to view target
{{expression}}
[target] = "expression"
bind-target = "expression"
Interpolation
Property
Attribute
Class
Style
One-way
from view target
to data source
(target) = "statement"
on-target = "statement"
Event
Two-way [(target)] = "expression"
bindon-target = "expression"
Two-way
Binding types other than interpolation have a target name to the left of the equal
sign, either surrounded by punctuation ([], ()) or preceded by a prefix (bind-, on-,
bindon-).
Templates syntax continued..
Template Syntax
• Built-in directives
– ngClass
– ngStyle
– *ngIf
– *ngSwitch
– *ngFor example *ngFor="let hero of heroes"
Architecture Overview
4. Metadata
• Metadata tell angular how to process a class.
• TodoListComponent was just a class until we tell angular about
it.
• We tell angular that TodoListComponent is a component by
attaching some metadata to it.
• We attached metadata using a decorator @Component
Metadata continued..
Here are a few of the possible @Component configuration options:
• selector
• templateUrl
• directives
• providers: what the hell is that now?
Architecture Overview
4. Data Binding
• You already have some idea about it now.
Exercises
• Create a model class Todo with following fields
– Title of string type
– Priority of integer type
• Create a FormComponent
– It will have a list of todos
– A todo object to hold currently editing todo item
– A method to which add the todo item in the list
– Add a template which renders form. See screenshot on next
slide for reference.
Hint: use ngModel to bind form elements to component
variables. For eg [(ngModel)] = “currentTodo.title”
Exercises
Architecture Overview
5. Services
• Service is a broad category encompassing any value, function,
or feature that our application needs.
• A class with a narrow, well-defined purpose. It should do
something specific and do it well. For example logging service,
tax calculator.
• There is nothing specifically Angular about services. Yet
services are fundamental to any Angular application.
Services continued..
Here's an example of a service class that logs to the browser console.
Architecture Overview
5. Dependency Injection
• Dependency injection is a way to supply a new instance of a
class with the fully-formed dependencies it requires. Most
dependencies are services.
• Angular can tell which services a component needs by looking
at the types of its constructor parameters. For example
Dependency Injection continued..
How it works: An injector maintains a container of service instances that it has
previously created. If a requested service instance is not in the container, the
injector makes one and adds it to the container before returning the service to
Angular. When all requested services have been resolved and returned,
Angular can call the component's constructor with those services as arguments.
This is what we mean by dependency injection.
Architecture Overview
Exercises
● Create a TodoService which maintains a list of todo items.
● It will have a method to add a new Todo to the list.
● Inject TodoService in TodoListComponent and
TodoFormComponent.
● TodoListComponent will just render the list as a unordered
list. (ul > li)
● This list should be sorted by priority (high priority task first)
.
● TodoFormComponent will be responsible for rendering the
todo form and it will use service method to add todos in the
list.
Hint: use the following syntax to inject services while
bootstraping. bootstrap(AppComponent, [BackendService,
HeroService, Logger]);
Routing and Navigation
● The Angular Component Router enables navigation from one
view to the next as users perform application tasks.
● Angular router is handling browser url change, forward and
backward button clicks and link navigations.
● We can bind the router to links on a page and it will navigate
to the appropriate application view when the user clicks a link.
Routing and Navigation
Steps to configure the router
● Set the <base href="/"> in index.html
● Import ROUTER_DIRECTIVES in app component.
● Configure application routes, bootstrap application with an
array of routes using the provideRouter function.
Routing and Navigation
Routing and Navigation
● Register our router with bootstrap method, or inject it in
bootstrap just like we do with services.
Routing and Navigation
● Add the Router Links and Router Outlet in applications
AppComponent.
Routing and Navigation
● Add the Router Links and Router Outlet in applications
AppComponent.
Resources
• http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-
meteor
• http://developer.telerik.com/featured/will-angular-2-be-a-success-you-bet/
• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
• https://angular.io/docs/ts/latest/guide/architecture.html
• https://angular.io/docs/ts/latest/quickstart.html
• https://angular.io/docs/ts/latest/guide/template-syntax.html
• https://angular.io/docs/ts/latest/guide/router.html

More Related Content

What's hot (20)

Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
Commit University
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
Apptension
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
AngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLIAngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLI
Domenico Rutigliano
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2 Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
Ross Dederer
 
Angular2
Angular2Angular2
Angular2
Software Infrastructure
 
Angular 2 Crash Course
Angular  2 Crash CourseAngular  2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
Angular 2
Angular 2Angular 2
Angular 2
alinabiliashevych
 
Angular2
Angular2Angular2
Angular2
Gabi Costel Lapusneanu
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dor Moshe
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
Nir Kaufman
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
Nir Kaufman
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
jbandi
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
Commit University
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascript
Ran Wahle
 
Tech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new frameworkTech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new framework
Codemotion
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
Ran Wahle
 
Adventures with Angular 2
Adventures with Angular 2Adventures with Angular 2
Adventures with Angular 2
Dragos Ionita
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
Commit University
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
Apptension
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2 Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
Ross Dederer
 
Angular 2 Crash Course
Angular  2 Crash CourseAngular  2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dor Moshe
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
Nir Kaufman
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
Nir Kaufman
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
jbandi
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
Commit University
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascript
Ran Wahle
 
Tech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new frameworkTech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new framework
Codemotion
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
Ran Wahle
 
Adventures with Angular 2
Adventures with Angular 2Adventures with Angular 2
Adventures with Angular 2
Dragos Ionita
 

Viewers also liked (9)

Angular 2.0
Angular 2.0Angular 2.0
Angular 2.0
THanekamp
 
Introduction to mongo db
Introduction to mongo dbIntroduction to mongo db
Introduction to mongo db
Rohit Bishnoi
 
Angular2 rxjs
Angular2 rxjsAngular2 rxjs
Angular2 rxjs
Christoffer Noring
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practice
Matteo Scandolo
 
Angular redux
Angular reduxAngular redux
Angular redux
Nir Kaufman
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
Nir Kaufman
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
Eyal Vardi
 
El barco
El barcoEl barco
El barco
daniel2997
 
Introduction to mongo db
Introduction to mongo dbIntroduction to mongo db
Introduction to mongo db
Rohit Bishnoi
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practice
Matteo Scandolo
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
Nir Kaufman
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
Eyal Vardi
 
Ad

Similar to Angular2 with TypeScript (20)

Angular 2 overview in 60 minutes
Angular 2 overview in 60 minutesAngular 2 overview in 60 minutes
Angular 2 overview in 60 minutes
Loiane Groner
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
17612235.ppt
17612235.ppt17612235.ppt
17612235.ppt
yovixi5669
 
Foster - Getting started with Angular
Foster - Getting started with AngularFoster - Getting started with Angular
Foster - Getting started with Angular
MukundSonaiya1
 
Fly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using AngularFly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using Angular
Vacation Labs
 
An evening with Angular 2
An evening with Angular 2An evening with Angular 2
An evening with Angular 2
Mike Melusky
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Angular
AngularAngular
Angular
Vinod Kumar Kayartaya
 
Angular
AngularAngular
Angular
khoado2002
 
Angular 18 course for begineers and experienced
Angular 18 course for begineers and experiencedAngular 18 course for begineers and experienced
Angular 18 course for begineers and experienced
tejaswinimysoola
 
better-apps-angular-2-day1.pdf and home
better-apps-angular-2-day1.pdf  and homebetter-apps-angular-2-day1.pdf  and home
better-apps-angular-2-day1.pdf and home
ChethanGowda886434
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentation
dharisk
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
Angular2 + rxjs
Angular2 + rxjsAngular2 + rxjs
Angular2 + rxjs
Christoffer Noring
 
Angularj2.0
Angularj2.0Angularj2.0
Angularj2.0
Mallikarjuna G D
 
Building a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web ServicesBuilding a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web Services
David Giard
 
Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1
Ahmed Moawad
 
Angular 2 introduction
Angular 2 introductionAngular 2 introduction
Angular 2 introduction
Christoffer Noring
 
Angular Project Report
 Angular Project Report Angular Project Report
Angular Project Report
Kodexhub
 
Angular 2 overview in 60 minutes
Angular 2 overview in 60 minutesAngular 2 overview in 60 minutes
Angular 2 overview in 60 minutes
Loiane Groner
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
Foster - Getting started with Angular
Foster - Getting started with AngularFoster - Getting started with Angular
Foster - Getting started with Angular
MukundSonaiya1
 
Fly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using AngularFly High With Angular - How to build an app using Angular
Fly High With Angular - How to build an app using Angular
Vacation Labs
 
An evening with Angular 2
An evening with Angular 2An evening with Angular 2
An evening with Angular 2
Mike Melusky
 
Angular 18 course for begineers and experienced
Angular 18 course for begineers and experiencedAngular 18 course for begineers and experienced
Angular 18 course for begineers and experienced
tejaswinimysoola
 
better-apps-angular-2-day1.pdf and home
better-apps-angular-2-day1.pdf  and homebetter-apps-angular-2-day1.pdf  and home
better-apps-angular-2-day1.pdf and home
ChethanGowda886434
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentation
dharisk
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
Building a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web ServicesBuilding a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web Services
David Giard
 
Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1Exploring Angular 2 - Episode 1
Exploring Angular 2 - Episode 1
Ahmed Moawad
 
Angular Project Report
 Angular Project Report Angular Project Report
Angular Project Report
Kodexhub
 
Ad

Recently uploaded (20)

Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME FlowProviding an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry ReportThe State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME FlowProviding an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry ReportThe State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 

Angular2 with TypeScript

  • 1. -Rohit Kumar @rbdharnia -Manish Kapoor @kapoormanish_89 Angular2 with TypeScript
  • 2. Agenda TypeScript • What is TypeScript • Installation • Hello World!! • Features • Demos – Types – Class – Inheritance – Interface Angular2 • Why angular 2? • Angular 2 quick start application • Angular 2 architecture • Navigation and Routing
  • 6. TypeScript ○ Implements ECMA 6 Specification. ○ Has types(number, string, boolean, any) ○ Better Support for OOP(Classes, Interfaces, Inheritance, Enum) ○ Optional typing(Duck typing) ○ Functions(Optional parameters, default parameters) ○ Module System (Exporting & Importing modules) Features:
  • 11. TypeScript Exercises!! 1. Hello World! 2. Create a method with multiple parameters. 3. Create a method with default parameters. 4. Create a method with optional parameters. 5. Create a class with name “Person” and fields ‘firstName’ and ‘lastName’. 6. Add a funtion print() in the class which prints firstName and secondName 7. Create a constructor. 8. Create another class Employee which extends Person 9. Add another field ‘employeeCode’ and method print() . This method should override the method of base class
  • 13. Angular 2 Agenda • Why angular 2? • Angular 2 quick start application • Angular 2 architecture • Navigation and Routing
  • 14. Why Angular2 • Simple, but Not Simplistic • Web component oriented architecture • Mobile First • Better Foundations (DI, Router, Components) • Speed & Performance • Productivity
  • 15. Angular 2 Quick Start Step 1: Create and configure the project A. Create the project folder B. Add package definition and configuration files C. Install packages
  • 18. No need to add configuration yourself, just clone and checkout to branch ‘master’. [email protected]:rohitbishnoi/angular2- quickstart.git
  • 33. Architecture Overview 1. Modules a. Angular apps are modular b. Generally we assemble our application from many modules c. Block of code dedicated to a single purpose d. A module exports some value, typically a class. e. Modules are optional, but it is highly recommended.
  • 34. Architecture Overview 2. Components a. A component controls a portion of screen, we could call it a view. b. We define components application logic inside a class. c. Class interacts with view through its API.
  • 36. Architecture Overview 3. Templates a. We define a component's view with its companion template. b. A form of html that tells Angular how to render the component. c. Most of the time it looks like regular html … and then it get a bit strange. d. See the example on next page.
  • 38. Templates continued.. Let's write some code now • Create a ToDoListComponent • It will have 2 variables, todos list and a selectedTodo • Bootstrap todo list • Create a template todo-list-component.html • Display a list of bootstrapped todos. Hint: use directives option in AppComponent config metadata to make it aware about ToDoListComponent. directives: [TodoListComponent]
  • 39. Templates continued.. <li *ngFor="let todo of todos" (click)="selectTodo(todo)"> {{todo}} </li> What is *ngFor and (click) in above code snippet ?
  • 40. Templates continued.. Template Syntax • Html • Interpolations {{selectedTodo}}, {{2+2}} • Template Expressions [property]="expression" • Template Statements: responds to an even raised by a binding target for ex (event)="statement" • Binding Syntax: binding data value to and from the data model.
  • 41. Template Syntax continued.. Data Direction Syntax Binding Type One-way from data source to view target {{expression}} [target] = "expression" bind-target = "expression" Interpolation Property Attribute Class Style One-way from view target to data source (target) = "statement" on-target = "statement" Event Two-way [(target)] = "expression" bindon-target = "expression" Two-way Binding types other than interpolation have a target name to the left of the equal sign, either surrounded by punctuation ([], ()) or preceded by a prefix (bind-, on-, bindon-).
  • 42. Templates syntax continued.. Template Syntax • Built-in directives – ngClass – ngStyle – *ngIf – *ngSwitch – *ngFor example *ngFor="let hero of heroes"
  • 43. Architecture Overview 4. Metadata • Metadata tell angular how to process a class. • TodoListComponent was just a class until we tell angular about it. • We tell angular that TodoListComponent is a component by attaching some metadata to it. • We attached metadata using a decorator @Component
  • 44. Metadata continued.. Here are a few of the possible @Component configuration options: • selector • templateUrl • directives • providers: what the hell is that now?
  • 45. Architecture Overview 4. Data Binding • You already have some idea about it now.
  • 46. Exercises • Create a model class Todo with following fields – Title of string type – Priority of integer type • Create a FormComponent – It will have a list of todos – A todo object to hold currently editing todo item – A method to which add the todo item in the list – Add a template which renders form. See screenshot on next slide for reference. Hint: use ngModel to bind form elements to component variables. For eg [(ngModel)] = “currentTodo.title”
  • 48. Architecture Overview 5. Services • Service is a broad category encompassing any value, function, or feature that our application needs. • A class with a narrow, well-defined purpose. It should do something specific and do it well. For example logging service, tax calculator. • There is nothing specifically Angular about services. Yet services are fundamental to any Angular application.
  • 49. Services continued.. Here's an example of a service class that logs to the browser console.
  • 50. Architecture Overview 5. Dependency Injection • Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. • Angular can tell which services a component needs by looking at the types of its constructor parameters. For example
  • 51. Dependency Injection continued.. How it works: An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. This is what we mean by dependency injection.
  • 53. Exercises ● Create a TodoService which maintains a list of todo items. ● It will have a method to add a new Todo to the list. ● Inject TodoService in TodoListComponent and TodoFormComponent. ● TodoListComponent will just render the list as a unordered list. (ul > li) ● This list should be sorted by priority (high priority task first) . ● TodoFormComponent will be responsible for rendering the todo form and it will use service method to add todos in the list. Hint: use the following syntax to inject services while bootstraping. bootstrap(AppComponent, [BackendService, HeroService, Logger]);
  • 54. Routing and Navigation ● The Angular Component Router enables navigation from one view to the next as users perform application tasks. ● Angular router is handling browser url change, forward and backward button clicks and link navigations. ● We can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link.
  • 55. Routing and Navigation Steps to configure the router ● Set the <base href="/"> in index.html ● Import ROUTER_DIRECTIVES in app component. ● Configure application routes, bootstrap application with an array of routes using the provideRouter function.
  • 57. Routing and Navigation ● Register our router with bootstrap method, or inject it in bootstrap just like we do with services.
  • 58. Routing and Navigation ● Add the Router Links and Router Outlet in applications AppComponent.
  • 59. Routing and Navigation ● Add the Router Links and Router Outlet in applications AppComponent.
  • 60. Resources • http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with- meteor • http://developer.telerik.com/featured/will-angular-2-be-a-success-you-bet/ • https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html • https://angular.io/docs/ts/latest/guide/architecture.html • https://angular.io/docs/ts/latest/quickstart.html • https://angular.io/docs/ts/latest/guide/template-syntax.html • https://angular.io/docs/ts/latest/guide/router.html