Downloaded 17 times
![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/75/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-11-2048.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/75/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-12-2048.jpg)
![Two Way Binding Two-way data binding: <input type=“text” [(ngModel)]=“player.name” />](https://image.slidesharecdn.com/angularjs2-160623232442/75/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-37-2048.jpg)
![DOM Binding <button [disabled]="isUnchanged">Save</button>](https://image.slidesharecdn.com/angularjs2-160623232442/75/Launch-Yourself-into-The-AngularJS-2-And-TypeScript-Space-38-2048.jpg)
Uploaded byColdFusionConference
Launch Yourself into The AngularJS 2 And TypeScript Space
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.
Launch Yourself into The AngularJS 2 And TypeScript Space
- 1. Launch Yourself Intothe Angular 2 and TypeScript Space Kurt Wiersma @kwiersma
- 2. About Me Software DevelopmentLeader/Manager From Minneapolis, MN Over 15 years of development Favs: Python, Typescript, C#
- 3. Agenda TypeScript Intro Mapping Conceptsfrom Angular 1 to 2 Bootstrapping and Module Loading Components, Services, and Routing Template Syntax
- 4.
- 5. Typescript Intro http://typescriptlang.org TypeScript letsyou 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 ValidTypeScript
- 7.
- 8.
- 9. Getting Started Install: npm install-g typescript Compile: tsc tsconfig.json Typings manages type definitions
- 10.
- 11. Angular 1 to2 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 to2 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
- 13.
- 14.
- 15. Angular CLI npm install-g angular-cli ng new my-ng2-project ng serve Watches, compiles, and serves ng generate component my-component
- 16.
- 17.
- 18.
- 19. Component Layout Navbar Component AppComponent Router Outlet (Draft Component, Fantasy Teams Component)
- 20.
- 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
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. Linking To ARoute
- 32.
- 34.
- 35. Template Syntax On waydata binding: <h1>{{ player.name }}</h1> Event binding: <a (click)=handleClick()>Details</a>
- 36.
- 37. Two Way Binding Two-waydata binding: <input type=“text” [(ngModel)]=“player.name” />
- 38.
- 39.
- 40. Resources angular.io Angular 2 StyleGuide 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
- 41.