building better angularjs 1.x apps with typescript
TRANSCRIPT
![Page 1: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/1.jpg)
Building Better AngularJS 1.x Apps With TypeScript KURT WIERSMA @KWIERSMA
+
![Page 2: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/2.jpg)
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
![Page 3: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/3.jpg)
AgendaTypeScript 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
![Page 4: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/4.jpg)
AWESOME, INC
PROJECT
DATE CLIENT8/1/2015
TypeScriptA RISING STAR
![Page 5: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/5.jpg)
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
![Page 6: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/6.jpg)
JAVASCRIPT IS VALID TYPESCRIPT
![Page 7: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/7.jpg)
TypeScript Syntax
![Page 8: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/8.jpg)
FeaturesClasses
Modules
Interfaces
Generics
Arrow Functions
References
Type Definitions
Better “this” by default
![Page 9: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/9.jpg)
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
![Page 10: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/10.jpg)
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
![Page 11: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/11.jpg)
Custom Definitions
pusher.d.ts
Useage
![Page 12: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/12.jpg)
Getting Started
Install:
npm install -g typescript
Compile:
tsc --sourcemap --out js/Application.js js/_all.ts
![Page 13: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/13.jpg)
ToolingCLI: 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]
![Page 14: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/14.jpg)
TYPSCRIPT COMPILEGruntFile.JS
![Page 15: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/15.jpg)
AWESOME, INC
PROJECT
DATE CLIENT4/1/2010
AngularJSA SUPER HEROIC FRAMEWORK
![Page 16: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/16.jpg)
APP CONFIG & ROUTESApplication.ts
![Page 17: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/17.jpg)
CONTROLLERS
![Page 18: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/18.jpg)
SERVICES
![Page 19: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/19.jpg)
AUTHENTICATION WITH API’S
![Page 20: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/20.jpg)
AUTHORIZATION & ROUTESApplication.ts
Services.js
![Page 21: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/21.jpg)
AngularJS ToolsDebugging
Batarang
ng-inspector
AngularUI & Bootstrap UI
Testing
Protractor
ng-describe
![Page 22: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/22.jpg)
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
![Page 23: Building Better AngularJS 1.X Apps With TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030222/5884224f1a28ab485c8b5d77/html5/thumbnails/23.jpg)
QUESTIONS?KURT WIERSMA ([email protected]) @KWIERSMA HTTP://GITHUB.COM/KWIERSMA