SlideShare a Scribd company logo
Building Better AngularJS
1.x Apps With TypeScript
KURT WIERSMA
@KWIERSMA
+
Who am I?
From Minneapolis, MN

Work for the American Academy of Neurology

Have been developing web apps for over 15 years

Favorites: Python/Django, AngularJS, TypeScript,
C#/MVC
Agenda
TypeScript intro and getting started

AngularJS basic knowledge assumed

How to combine two great tools

App config, routes, references.ts ordering

Controllers

Services

Authentication with API’s

Authorization and routes
AWESOME, INC
PROJECT
DATE CLIENT
8/1/2015
TypeScript
A RISING STAR
http://typescriptlang.org

TypeScript lets you write JavaScript the way you
really want to.

TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript.

Any browser. Any host. Any OS. Open Source.

AngularJS 2 is implemented in TypeScript
JAVASCRIPT IS VALID TYPESCRIPT
TypeScript Syntax
Features
Classes

Modules

Interfaces

Generics

Arrow Functions

References

Type Definitions

Better “this” by default
Why would you want
types?
Structure for large code bases and/or teams

Catch errors early

Provide a structured API

Tooling can provide better code completion &
refactoring
What about existing
JavaScript Libraries?
DefinitelyTyped provides TS definitions for tons of
JS libraries

JQuery, Angular, Node, Ember, Backbone, ect.

http://definitelytyped.org

You can write you own definitions easily

TSD or Typings used to manage definitions
Custom Definitions
pusher.d.ts
Useage
Getting Started
Install: 

npm install -g typescript
Compile: 

tsc --sourcemap --out js/Application.js js/
_all.ts
Tooling
CLI: grunt with grunt-ts or gulp

TSD: managing definitions for JS libraries

tsd install angular --resolve --overwrite --save
IDEs: 

WebStorm / IntelliJ (Mac & Win) [$]

Visual Studio 2012+ (Win) [$]

Visual Studio Code (Mac & Win) [Free]

Eclipse (Mac & Win) [Free]

Editors: 

Sublime [$]

Atom [Free]
TYPSCRIPT COMPILE
GruntFile.JS
AWESOME, INC
PROJECT
DATE CLIENT
4/1/2010
AngularJS
A SUPER HEROIC FRAMEWORK
APP CONFIG & ROUTES
Application.ts
CONTROLLERS
SERVICES
AUTHENTICATION WITH API’S
AUTHORIZATION & ROUTES
Application.ts
Services.js
AngularJS Tools
Debugging

Batarang

ng-inspector

AngularUI & Bootstrap UI

Testing

Protractor

ng-describe
Resources
Using Visual Studio Code with Typescript and
AngularJS

John Papa’s AngularJS Style Guide

Real World Example Apps

Angular In 20 Minutes

Expense Manager
QUESTIONS?
KURT WIERSMA (KWIERSMA@MAC.COM)
@KWIERSMA
HTTP://GITHUB.COM/KWIERSMA

More Related Content

What's hot (20)

Building APIs with Node.js and Swagger
Building APIs with Node.js and Swagger
Jeremy Whitlock
 
Rest API with Swagger and NodeJS
Rest API with Swagger and NodeJS
Luigi Saetta
 
Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs
Nir Kaufman
 
Streamlining API with Swagger.io
Streamlining API with Swagger.io
Victor Augusteo
 
Writer APIs in Java faster with Swagger Inflector
Writer APIs in Java faster with Swagger Inflector
Tony Tam
 
Introducing swagger
Introducing swagger
Amr Ali
 
OpenAPI development with Python
OpenAPI development with Python
Takuro Wada
 
Understanding how to use Swagger and its tools
Understanding how to use Swagger and its tools
Swagger API
 
Mobile automation using selenium cucumber & appium
Mobile automation using selenium cucumber & appium
Selenium Cucumber
 
Swagger for-your-api
Swagger for-your-api
Tony Tam
 
React Native.pptx (2)
React Native.pptx (2)
Emilio Rodriguez Martinez
 
J-Spring 2018 - Angular for Java developers
J-Spring 2018 - Angular for Java developers
Bert Jan Schrijver
 
OpenValue meetup July 2018 - Angular for Java developers
OpenValue meetup July 2018 - Angular for Java developers
Bert Jan Schrijver
 
Code Nomads meetup June 2018 - Angular for Java developers
Code Nomads meetup June 2018 - Angular for Java developers
Bert Jan Schrijver
 
Design Driven API Development
Design Driven API Development
Sokichi Fujita
 
Tweakers Developers Summit 2019 - Angular for backend developers
Tweakers Developers Summit 2019 - Angular for backend developers
Bert Jan Schrijver
 
Gdg makurdi
Gdg makurdi
Nishu Goel
 
Introducing Swagger
Introducing Swagger
Tony Tam
 
Swagger APIs for Humans and Robots (Gluecon)
Swagger APIs for Humans and Robots (Gluecon)
Tony Tam
 
Swagger
Swagger
NexThoughts Technologies
 
Building APIs with Node.js and Swagger
Building APIs with Node.js and Swagger
Jeremy Whitlock
 
Rest API with Swagger and NodeJS
Rest API with Swagger and NodeJS
Luigi Saetta
 
Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs
Nir Kaufman
 
Streamlining API with Swagger.io
Streamlining API with Swagger.io
Victor Augusteo
 
Writer APIs in Java faster with Swagger Inflector
Writer APIs in Java faster with Swagger Inflector
Tony Tam
 
Introducing swagger
Introducing swagger
Amr Ali
 
OpenAPI development with Python
OpenAPI development with Python
Takuro Wada
 
Understanding how to use Swagger and its tools
Understanding how to use Swagger and its tools
Swagger API
 
Mobile automation using selenium cucumber & appium
Mobile automation using selenium cucumber & appium
Selenium Cucumber
 
Swagger for-your-api
Swagger for-your-api
Tony Tam
 
J-Spring 2018 - Angular for Java developers
J-Spring 2018 - Angular for Java developers
Bert Jan Schrijver
 
OpenValue meetup July 2018 - Angular for Java developers
OpenValue meetup July 2018 - Angular for Java developers
Bert Jan Schrijver
 
Code Nomads meetup June 2018 - Angular for Java developers
Code Nomads meetup June 2018 - Angular for Java developers
Bert Jan Schrijver
 
Design Driven API Development
Design Driven API Development
Sokichi Fujita
 
Tweakers Developers Summit 2019 - Angular for backend developers
Tweakers Developers Summit 2019 - Angular for backend developers
Bert Jan Schrijver
 
Introducing Swagger
Introducing Swagger
Tony Tam
 
Swagger APIs for Humans and Robots (Gluecon)
Swagger APIs for Humans and Robots (Gluecon)
Tony Tam
 

Similar to Building Better AngularJS 1.X Apps With TypeScript (20)

quantum_leap_angularjs_tools_redefining_development_in_2023.pptx
quantum_leap_angularjs_tools_redefining_development_in_2023.pptx
sarah david
 
angular.pptx
angular.pptx
ChandraPrakash287820
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
sarah david
 
Integrating TypeScript with popular frameworks like React or Angular.pdf
Integrating TypeScript with popular frameworks like React or Angular.pdf
MobMaxime
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
sarah david
 
How TypeScript App Development is Important.pdf
How TypeScript App Development is Important.pdf
WDP Technologies
 
Angular Roadmap For Beginner PDF By ScholarHat.pdf
Angular Roadmap For Beginner PDF By ScholarHat.pdf
Scholarhat
 
Angular Vs React Vs Vue.pptx
Angular Vs React Vs Vue.pptx
Albiorix Technology
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
sarah david
 
Benefits of AngularJS Development for Your Business - APPNWEB Technologies
Benefits of AngularJS Development for Your Business - APPNWEB Technologies
APPNWEB Technologies
 
Reasons to Use Typescript for Your Next Project Over Javascript.pdf
Reasons to Use Typescript for Your Next Project Over Javascript.pdf
MobMaxime
 
User Testing in the Invisible World of APIs
User Testing in the Invisible World of APIs
Pronovix
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Building REST APIs that don't suck for modern day SPAs
Building REST APIs that don't suck for modern day SPAs
Abati Adewale
 
The UX of DX: User Testing in the Invisible World of APIs
The UX of DX: User Testing in the Invisible World of APIs
Pronovix
 
Difference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdf
Your Team in India
 
AngularJS
AngularJS
NexThoughts Technologies
 
AngularJS
AngularJS
Hiten Pratap Singh
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pptx
quantum_leap_angularjs_tools_redefining_development_in_2023.pptx
sarah david
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
sarah david
 
Integrating TypeScript with popular frameworks like React or Angular.pdf
Integrating TypeScript with popular frameworks like React or Angular.pdf
MobMaxime
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
sarah david
 
How TypeScript App Development is Important.pdf
How TypeScript App Development is Important.pdf
WDP Technologies
 
Angular Roadmap For Beginner PDF By ScholarHat.pdf
Angular Roadmap For Beginner PDF By ScholarHat.pdf
Scholarhat
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
sarah david
 
Benefits of AngularJS Development for Your Business - APPNWEB Technologies
Benefits of AngularJS Development for Your Business - APPNWEB Technologies
APPNWEB Technologies
 
Reasons to Use Typescript for Your Next Project Over Javascript.pdf
Reasons to Use Typescript for Your Next Project Over Javascript.pdf
MobMaxime
 
User Testing in the Invisible World of APIs
User Testing in the Invisible World of APIs
Pronovix
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Building REST APIs that don't suck for modern day SPAs
Building REST APIs that don't suck for modern day SPAs
Abati Adewale
 
The UX of DX: User Testing in the Invisible World of APIs
The UX of DX: User Testing in the Invisible World of APIs
Pronovix
 
Difference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdf
Your Team in India
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
Ad

More from ColdFusionConference (20)

Api manager preconference
Api manager preconference
ColdFusionConference
 
Cf ppt vsr
Cf ppt vsr
ColdFusionConference
 
Building better SQL Server Databases
Building better SQL Server Databases
ColdFusionConference
 
API Economy, Realizing the Business Value of APIs
API Economy, Realizing the Business Value of APIs
ColdFusionConference
 
Don't just pdf, Smart PDF
Don't just pdf, Smart PDF
ColdFusionConference
 
Crafting ColdFusion Applications like an Architect
Crafting ColdFusion Applications like an Architect
ColdFusionConference
 
Security And Access Control For APIS using CF API Manager
Security And Access Control For APIS using CF API Manager
ColdFusionConference
 
Monetizing Business Models: ColdFusion and APIS
Monetizing Business Models: ColdFusion and APIS
ColdFusionConference
 
Become a Security Rockstar with ColdFusion 2016
Become a Security Rockstar with ColdFusion 2016
ColdFusionConference
 
ColdFusion in Transit action
ColdFusion in Transit action
ColdFusionConference
 
Developer Insights for Application Upgrade to ColdFusion 2016
Developer Insights for Application Upgrade to ColdFusion 2016
ColdFusionConference
 
Where is cold fusion headed
Where is cold fusion headed
ColdFusionConference
 
ColdFusion Keynote: Building the Agile Web Since 1995
ColdFusion Keynote: Building the Agile Web Since 1995
ColdFusionConference
 
Instant ColdFusion with Vagrant
Instant ColdFusion with Vagrant
ColdFusionConference
 
Restful services with ColdFusion
Restful services with ColdFusion
ColdFusionConference
 
Super Fast Application development with Mura CMS
Super Fast Application development with Mura CMS
ColdFusionConference
 
Build your own secure and real-time dashboard for mobile and web
Build your own secure and real-time dashboard for mobile and web
ColdFusionConference
 
Why Everyone else writes bad code
Why Everyone else writes bad code
ColdFusionConference
 
Securing applications
Securing applications
ColdFusionConference
 
Testing automaton
Testing automaton
ColdFusionConference
 
Building better SQL Server Databases
Building better SQL Server Databases
ColdFusionConference
 
API Economy, Realizing the Business Value of APIs
API Economy, Realizing the Business Value of APIs
ColdFusionConference
 
Crafting ColdFusion Applications like an Architect
Crafting ColdFusion Applications like an Architect
ColdFusionConference
 
Security And Access Control For APIS using CF API Manager
Security And Access Control For APIS using CF API Manager
ColdFusionConference
 
Monetizing Business Models: ColdFusion and APIS
Monetizing Business Models: ColdFusion and APIS
ColdFusionConference
 
Become a Security Rockstar with ColdFusion 2016
Become a Security Rockstar with ColdFusion 2016
ColdFusionConference
 
Developer Insights for Application Upgrade to ColdFusion 2016
Developer Insights for Application Upgrade to ColdFusion 2016
ColdFusionConference
 
ColdFusion Keynote: Building the Agile Web Since 1995
ColdFusion Keynote: Building the Agile Web Since 1995
ColdFusionConference
 
Super Fast Application development with Mura CMS
Super Fast Application development with Mura CMS
ColdFusionConference
 
Build your own secure and real-time dashboard for mobile and web
Build your own secure and real-time dashboard for mobile and web
ColdFusionConference
 
Ad

Recently uploaded (20)

No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
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
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
Data Validation and System Interoperability
Data Validation and System Interoperability
Safe Software
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
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
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
Data Validation and System Interoperability
Data Validation and System Interoperability
Safe Software
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 

Building Better AngularJS 1.X Apps With TypeScript