Launch Yourself into The AngularJS 2 And TypeScript Space
0 likes521 views
The document is a presentation by Kurt Wiersma on Angular 2 and TypeScript, covering various topics including TypeScript basics, Angular architecture, and transitioning from Angular 1 to 2. It highlights TypeScript's features, Angular CLI usage, and component life cycle. Additionally, it provides resources for further learning and practical examples of template syntax and data binding.
![Angular 1 to 2
Angular 1.x Angular 2.x
ES5 TypeScript
Controllers Components
Filters Pipes
ng-app bootstrap
ng-class [ngClass]
ng-click (click)
ng-if *ngIf](https://image.slidesharecdn.com/angularjs2-160623232442/85/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-11-320.jpg)
![Angular 1 to 2
Angular 1.x Angular 2.x
ng-model [( ngModel )]
ng-repeat *ngFor
ng-show [hidden]
Promises Observables
https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-
reference.html](https://image.slidesharecdn.com/angularjs2-160623232442/85/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-12-320.jpg)
![Two Way Binding
Two-way data binding:
<input
type=“text” [(ngModel)]=“player.name” />](https://image.slidesharecdn.com/angularjs2-160623232442/85/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-37-320.jpg)
![DOM Binding
<button [disabled]="isUnchanged">Save</button>](https://image.slidesharecdn.com/angularjs2-160623232442/85/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-38-320.jpg)
Launch Yourself into The AngularJS 2 And TypeScript Space
- 1. Launch Yourself Into the Angular 2 and TypeScript Space Kurt Wiersma @kwiersma
- 2. About Me Software Development Leader/Manager From Minneapolis, MN Over 15 years of development Favs: Python, Typescript, C#
- 3. Agenda TypeScript Intro Mapping Concepts from Angular 1 to 2 Bootstrapping and Module Loading Components, Services, and Routing Template Syntax
- 4. TypeScript
- 5. Typescript Intro 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 Better “this” Imports Type Definitions
- 9. Getting Started Install: npm install -g typescript Compile: tsc tsconfig.json Typings manages type definitions
- 10. Mapping Concepts From Angular 1 to 2
- 11. Angular 1 to 2 Angular 1.x Angular 2.x ES5 TypeScript Controllers Components Filters Pipes ng-app bootstrap ng-class [ngClass] ng-click (click) ng-if *ngIf
- 12. Angular 1 to 2 Angular 1.x Angular 2.x ng-model [( ngModel )] ng-repeat *ngFor ng-show [hidden] Promises Observables https://angular.io/docs/ts/latest/cookbook/a1-a2-quick- reference.html
- 14. Getting Started
- 15. Angular CLI npm install -g angular-cli ng new my-ng2-project ng serve Watches, compiles, and serves ng generate component my-component
- 17. Components
- 19. Component Layout Navbar Component App Component Router Outlet (Draft Component, Fantasy Teams Component)
- 22. Component Lifecycle 1. OnChanges - runs first and when a data bound input property value changes 2. OnInit - after the first OnChanges 3. DoCheck - during every Angular change detection cycle 4. AfterViewInit - after init of the component’s views and child views 5. OnDestroy - just before Angular destroys the component
- 26. Events
- 28. Routing
- 29. Routing Demo
- 30. Routing
- 31. Linking To A Route
- 32. Services
- 34. Template Syntax
- 35. Template Syntax On way data binding: <h1>{{ player.name }}</h1> Event binding: <a (click)=handleClick()>Details</a>
- 37. Two Way Binding Two-way data binding: <input type=“text” [(ngModel)]=“player.name” />
- 40. Resources angular.io Angular 2 Style Guide https://angular.io/docs/ts/latest/guide/style-guide.html Dan Walhin’s Starter App https://github.com/DanWahlin/Angular2-JumpStart John Papa’s Angular 2 Course https://app.pluralsight.com/library/courses/angular-2- first-look ng-book 2