Writing an AngularJS application with TypeScript takes a lot of pain out development process and how helps in learning the AngularJS API and best practices. In this session I will show the best practices for building an AngularJS app with TypeScript and explain why the two are a great combination. Some of items we will cover include: authentication, authorization, controllers with ControllerAs, services, minification, and routing. We will also talk about how to use the TypeScript tooling to make learning and working with the AngularJS API easier while automating the compilation process.

1. Building Better AngularJS
1.x Apps With TypeScript
KURT WIERSMA
@KWIERSMA
+

2. 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

3. 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

4. AWESOME, INC
PROJECT
DATE CLIENT
8/1/2015
TypeScript
A RISING STAR

5. 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

6. JAVASCRIPT IS VALID TYPESCRIPT

7. TypeScript Syntax

8. Features
Classes
Modules
Interfaces
Generics
Arrow Functions
References
Type Definitions
Better “this” by default

9. 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

10. 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

11. Custom Definitions
pusher.d.ts
Useage

12. Getting Started
Install:
npm install -g typescript
Compile:
tsc --sourcemap --out js/Application.js js/
_all.ts

13. 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]

14. TYPSCRIPT COMPILE
GruntFile.JS

15. AWESOME, INC
PROJECT
DATE CLIENT
4/1/2010
AngularJS
A SUPER HEROIC FRAMEWORK

16. APP CONFIG & ROUTES
Application.ts

17. CONTROLLERS

18. SERVICES

19. AUTHENTICATION WITH API’S

20. AUTHORIZATION & ROUTES
Application.ts
Services.js

21. AngularJS Tools
Debugging
Batarang
ng-inspector
AngularUI & Bootstrap UI
Testing
Protractor
ng-describe

22. 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

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