Building Better AngularJS 1.X Apps With TypeScript
1 like677 views
The document is a presentation by Kurt Wiersma on building AngularJS 1.x applications using TypeScript, highlighting its features, advantages, and tooling necessary for development. It discusses TypeScript as a typed superset of JavaScript that enhances code structure and error catching, suitable for large codebases and teams. Additionally, it provides practical information on managing libraries, compiling TypeScript, and resources for further learning.
![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]](https://image.slidesharecdn.com/angularjsandtypescript-160623232038/85/Building-Better-AngularJS-1-X-Apps-With-TypeScript-13-320.jpg)
Building Better AngularJS 1.X Apps With TypeScript
- 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
- 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
- 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]
- 15. AWESOME, INC PROJECT DATE CLIENT 4/1/2010 AngularJS A SUPER HEROIC FRAMEWORK
- 16. APP CONFIG & ROUTES Application.ts
- 17. CONTROLLERS
- 18. SERVICES
- 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