Supporting an Old-Fashioned AngularJS App in a Modern TypeScript World
summary
Shows how to modernize a legacy AngularJS app by incrementally renaming .js to .ts, adding TypeScript + RxJS for type safety and reactive forms, and introducing a webpack build + HTML plugin or grunt/gulp tasks to compile and inject bundles. Includes a working example repo that fetches from the Drag Race API, uses class-based components, an angular1-async-filter async pipe to auto-unsubscribe, and demonstrates Angular Elements/web components for new features.
AI-written summary · about
chapters (39)
- 0:00Intro
- 1:20Supporting Angularjs Applications
- 4:38Roadmap
- 6:25Angularjs Style Guide
- 7:48Single Responsibility
- 8:57Build System
- 9:33Grunt
- 10:49gulp
- 11:36webpack
- 13:41compiled files
- 14:48converting to typescript
- 15:36types
- 16:39classes
- 18:04member shorthand
- 18:43interface shorthand
- 20:03generics
- 21:19template literals
- 22:00fat arrow functions
- 22:52Angularjs app conversion
- 26:36Typescript declaration
- 27:49Example setup
- 28:27Controller as syntax
- 29:19Summary
- 29:57Example Module
- 30:43ClassBased Approach
- 31:14Component Controllers
- 31:51OnInit
- 32:53Component
- 33:40RVAJS
- 34:43Imperative Programming
- 36:03Observables
- 37:24Subjects
- 37:50Operators
- 38:35Async Pipe
- 39:24Async Filter
- 40:08Web Components
- 40:52Angular Elements
- 41:18Modern Tools
- 41:44Key Concepts
related talks
01h 01mAngular War Stories
42mReal World AngularJS Recipes
42mHow Angular2 can improve your Angular1 apps today
29mHow we did everything wrong and got away with it (Angular success story)
57mBuilding Scalable, Maintainable Apps Using TypeScript and React
53mScaling large Angular apps
46mThe Amazing Angular 2
02h 47mAngular: The Renewal