SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
using AngularJS with
TypeScript
by david pichsenmeister
TypeScript
● TypeScript is a typed superset of
JavaScript that compiles to plain
JavaScript (ECMAScript3-compatible).
● TypeScript adds optional types, classes,
modules and generics
● (only) compile-time type checking
TypeScript
you can
● use existing JavaScript code
● incorporate popular JavaScript libraries
● call it from other JavaScript code
TypeScript
● can be installed as a node.js package
npm install -g typescript

● compiled with TypeScript compiler
tsc helloworld.ts

● reference files with
/// <reference path='path/to/file.ts' />
DefinitelyTyped
● repository for high-quality TypeScript
type definitions
● type definitions for all common
frameworks and libraries
● has its own package manager for
definitions (tsd)
TSD - TypeScript Definition
Manager
● install via npm
npm install -g tsd

● install definitions
tsd query angular --resolve --action
install
CODE
https://github.com/3x14159265/angularTs
reference all files
/// <reference path='typings/jquery/jquery.d.ts' />
/// <reference path='typings/angularjs/angular.d.ts' />
/// <reference path='typings/angularjs/angular-route.d.ts' />
//##### models #####
/// <reference path='models/ScaffoldModel.ts' />
//##### services #####
/// <reference path='services/ScaffoldService.ts' />
//##### directives #####
/// <reference path='directives/ScaffoldDirective.ts' />
//##### controllers #####
/// <reference path='controllers/ScaffoldCtrl.ts' />
/// <reference path='app.ts' />
app.ts
/// <reference path='_all.ts' />
module app {
'use strict'
var myapp: ng.IModule = angular.module( 'app', ['ngRoute'])
myapp.controller( 'ctrl', ScaffoldCtrl.prototype.injection())
myapp.service( 'service', ScaffoldService.prototype.injection())
myapp.directive( 'directive' , ScaffoldDirective.prototype.injection())
myapp.config([ '$routeProvider' , function( $routeProvider: ng.route.
IRouteProvider ) {
$routeProvider.when( '/home', {templateUrl: 'partials/home.
html'}).
otherwise({redirectTo: '/home'})
}])
}
model

/// <reference path='../_all.ts' />
module app {
'use strict'
export class ScaffoldModel {
constructor(){}
}
}
controller
/// <reference path='../_all.ts' />
module app {
'use strict'
export class ScaffoldCtrl {
public injection(): Array<any> {
return [
ScaffoldCtrl
]
}
constructor() {}
}
}
service
/// <reference path='../_all.ts' />
module app {
'use strict'
export class ScaffoldService {
public injection(): Array<any> {
return [
ScaffoldService
]
}
constructor() {}
}
}
directive 1/2
/// <reference path='../_all.ts' />
module app {
'use strict'
export class ScaffoldDirective implements ng.IDirective {
public injection(): Array<any> {
return [
() => { return new ScaffoldDirective() }
]
}
directive 2/2
public templateUrl: string
public restrict: string
constructor() {
this.templateUrl = 'partials/templates/directive.html'
this.restrict = 'E'
}
public link ($scope: ng.IScope, element: JQuery, attributes:
ng.IAttributes): void {
element.text(
"i'm a directive")
}
}
}
resources
http://www.typescriptlang.org/
http://angularjs.org/
http://nodejs.org/
https://github.com/borisyankov/DefinitelyTyped
http://definitelytyped.github.io/tsd/
https://github.com/3x14159265/angularTs
thanks!
feel free to add me on:

.../3x14159265

Contenu connexe

En vedette

warp engine - an open source realtime push engine
warp engine - an open source realtime push enginewarp engine - an open source realtime push engine
warp engine - an open source realtime push engineDavid Pichsenmeister
 
Building Better AngularJS 1.X Apps With TypeScript
Building Better AngularJS 1.X Apps With TypeScriptBuilding Better AngularJS 1.X Apps With TypeScript
Building Better AngularJS 1.X Apps With TypeScriptColdFusionConference
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins Udaya Kumar
 
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsDavid Amend
 
Will Chatbots kill apps? - Vienna Valley #7
Will Chatbots kill apps? - Vienna Valley #7Will Chatbots kill apps? - Vienna Valley #7
Will Chatbots kill apps? - Vienna Valley #7David Pichsenmeister
 

En vedette (11)

warp engine - an open source realtime push engine
warp engine - an open source realtime push enginewarp engine - an open source realtime push engine
warp engine - an open source realtime push engine
 
Bot Trends 2016
Bot Trends 2016Bot Trends 2016
Bot Trends 2016
 
Bot Trends 2017
Bot Trends 2017Bot Trends 2017
Bot Trends 2017
 
Building Better AngularJS 1.X Apps With TypeScript
Building Better AngularJS 1.X Apps With TypeScriptBuilding Better AngularJS 1.X Apps With TypeScript
Building Better AngularJS 1.X Apps With TypeScript
 
Using TypeScript with Angular
Using TypeScript with AngularUsing TypeScript with Angular
Using TypeScript with Angular
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
 
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
Will Chatbots kill apps? - Vienna Valley #7
Will Chatbots kill apps? - Vienna Valley #7Will Chatbots kill apps? - Vienna Valley #7
Will Chatbots kill apps? - Vienna Valley #7
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 

Plus de David Pichsenmeister

Bots as Marketing Channels for Events
Bots as Marketing Channels for EventsBots as Marketing Channels for Events
Bots as Marketing Channels for EventsDavid Pichsenmeister
 
The art of building successful products
The art of building successful productsThe art of building successful products
The art of building successful productsDavid Pichsenmeister
 
Vue.js SSR with Nuxt.js and Firebase
Vue.js SSR with Nuxt.js and Firebase Vue.js SSR with Nuxt.js and Firebase
Vue.js SSR with Nuxt.js and Firebase David Pichsenmeister
 
Work at oratio - Tools for distributed teams
Work at oratio - Tools for distributed teamsWork at oratio - Tools for distributed teams
Work at oratio - Tools for distributed teamsDavid Pichsenmeister
 
Chatbots - Canonical Interfaces as new Communication Channels
Chatbots - Canonical Interfaces as new Communication ChannelsChatbots - Canonical Interfaces as new Communication Channels
Chatbots - Canonical Interfaces as new Communication ChannelsDavid Pichsenmeister
 

Plus de David Pichsenmeister (7)

Bots as Marketing Channels for Events
Bots as Marketing Channels for EventsBots as Marketing Channels for Events
Bots as Marketing Channels for Events
 
The art of building successful products
The art of building successful productsThe art of building successful products
The art of building successful products
 
Basics of Product Strategy
Basics of Product StrategyBasics of Product Strategy
Basics of Product Strategy
 
Vue.js SSR with Nuxt.js and Firebase
Vue.js SSR with Nuxt.js and Firebase Vue.js SSR with Nuxt.js and Firebase
Vue.js SSR with Nuxt.js and Firebase
 
Work at oratio - Tools for distributed teams
Work at oratio - Tools for distributed teamsWork at oratio - Tools for distributed teams
Work at oratio - Tools for distributed teams
 
How to build a great bot
How to build a great botHow to build a great bot
How to build a great bot
 
Chatbots - Canonical Interfaces as new Communication Channels
Chatbots - Canonical Interfaces as new Communication ChannelsChatbots - Canonical Interfaces as new Communication Channels
Chatbots - Canonical Interfaces as new Communication Channels
 

Dernier

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 

Dernier (20)

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 

using AngularJS with TypeScript