Angular2 @SC Toledo

Workshop sobre Angular2 impartido en el meetup de Software Craftsmanship Toledo.

Transcript

1. angular2 @SC Toledo Javier Gamarra / @nhpatt
2. https://youtu.be/WUfxPdwC_PQ (video) https://goo.gl/9MlWoc (slides) https://goo.gl/jwFKcA (repo)
3. who? • Javier Gamarra / @nhpatt • @cylicon_valley (07/05|19-21/05) / @agilespain (01-02/06) • @liferay • java/javascript
4. environment • Sublime | Atom | Visual Studio | Visual Studio Code | Webstorm • Typescript | ES6 | Dart • npm
5. how? • Lots of things to explain (2hr code & 2hr talk) • Commit per commit • Please ask me, any time • Or comment in the slides
6. Ask me! Pleeeease
7. background?
8. let’s code!
9. our first app Our first app in 5 minutes: • package.json • tsconfig.json • typings.json • app/app.component.ts • app/main.ts • index.html Or clone https://github.com/nhpatt/angular2- toledo/ And checkout 10bbef28d9e7ad06957c07533736cff5a59c0c6c https://github.com/nhpatt/angular2-toledo/commit/10bbef28d9e 7ad06957c07533736cff5a59c0c6c
10. our first app (1/3) Let’s copy them, starting with • package.json, • tsconfig.json • and typings.json to / folder And then do a npm install
11. our first app (2/3) Let’s copy app/app.component.ts & app/main.ts
12. our first app (3/3) And lastly, copy the index.html file in the root folder (/)
13. our first app? So let’s launch our app with npm start Everything works, right? Let’s see step by step what we have done...
14. interpolation? Let’s change the code of app.component.ts a bit: • Replace the template for: ‘<h1>{{name}}</h1>’ • And define a variable inside our Component: export class AppComponent { private name:String = "Hi!" }
15. interpolation? Change the content of the name String and see it reload live… • thanks lite-server!
16. interpolation? Several things acting in that example: • Interpolation with {{}} • private members of a class! • and with types :)
17. architecture
18. angular2 architecture & concepts
19. concepts • Components • Templates • Metadata • Data binding • Modules • Directive • Dependency Injection (DI)
20. component • A class • Attributes and methods • Supports a view
21. template • html code with strange tags • A hierarchy of components & views
22. metadata • The glue • In a decorator (similar to an annotation)
23. databinding • “A replacement to pushing manually values” • Interpollation is one way • Property bindings • Event bindings • Two way
24. databinding • Two way
25. modules • Optional! • reusability and separation of concerns • like namespaces • System modules (like http)
26. directive • A system component • Works with the view
27. services • A class with business logic
28. dependency injection • Decouple concepts, instantiation from use • Needs providers!
29. more concepts and other stuff • Forms • HTTP • Pipes
30. Interpolation & bindings (and TS)
31. example app: voting! Let’s change our app to list something more useful… a voting app (like reddit) We will show several options And users will be able to upvote or downvote them
32. objective We want to do sth like this:
33. interfaces 1/2 (TS) Let’s define a contract: interface Option { name: String; description: String; votes: Number; }
34. interfaces 2/2 (TS) Can be implemented implicitly: private option:Option = { name: 'toledo is awesome', description: 'evident', votes: 20 };
35. interfaces Define an interface and render it in the view Hint: {{option.name}}
36. classes (TS) Let’s swap our interface for a class And it works… But classes are more similar as other languages… constructor(name, desc, votes) {this.name = name;...}
37. classes (TS) We have default parameters (no more ||): constructor(name, desc, votes = 0) {} And we have brief constructors :) constructor(public name = ‘Toledo’, public votes = 0) {}
38. complex templates • Backticks (`) allows us to use multi line strings like: template: `<h1>{{repository.name}}</h1> <p> <h2>{{repository.watchers_count}}</h2>`
39. complex templates • template vs templateUrl • Path to an .html file which can use the context of the component
40. complex templates and classes • Test it! ◦ Replace your interface with a class ◦ Play with the default attributes ◦ Or the templateUrl
41. *ngFor • Let’s use arrays ◦ :Array<Option> || :Option[] ◦ *ngFor=”#option of options” • #variable -> local variable declarations • Don’t forget the * -> is creating a tag in the background
42. *ngFor • Define a list of Options and iterate through their values
43. *ngIf *ngIf=”boolean_condition” removes from the DOM
44. *ngIf • Hide some attribute depending on a condition
45. types in TS • boolean | number | string | arrays | enum | Any | Void enum OptionStatus { Abandoned, Active };
46. visibility in typescript • private/public (everything is public by default)
47. optional properties in TS • Optional properties (color?: string;)
48. inheritance • Interfaces can be implemented and extended • Classes can be extended
49. Angular event bindings: <button (click)="onClickMe($event)">Click me!</button> And in TS: onClickMe($event) { console.log($event); } • Target & execution context user input
50. user input • Add a button in each row and log the event
51. user input The source of the event can be anything: <input (keyup)="onKey($event)">
52. user input • Add a field to include new options in the array • Test it!
53. user input We can improve that code in several ways: • We could type the event • Or we could pass the value (way better!) With a local template identifier: <input #name (keyup)="onKey(name.value)">
54. user input • Test it!
55. react to events This won’t work (and sth similar did in Angular 1.x): <input #box> <p>{{box.value}}</p>
56. react to events • keyup.enter • several events • local template variables and scope
57. ok, let’s recap • We have a component • Using Typescript • Rendering a list with *ngFor and *ngIf • And displaying values stored in JS • And reacting to events
58. Modules
59. modules • Classes should be on their own package We should export them… And import them That’s it
60. modules • Test it!
61. one & two-way databinding
62. databindings • {{}} -> interpolation -> disabled={{component_variable}} • [] -> property binding -> [disabled]=”component_variable” • () -> event binding -> (click)=”component_method” • # -> variable declaration -> <input #name> • * -> structural directives -> <p *ngFor=”#repo of repositories”>
63. template expressions • Interpolation == property binding -> from the component to an element • <p [textContent]="user.name"></p> == <p>{{user.name}}</p> • disabled={{expression}} == [disabled]=”expression”
64. template expressions • template expressions are like JS -> textContent={{1 + 1 + getVal()}} • the template expressions are evaluated and then converted to string • Visible side effects are not allowed (assignments, new(), ‘;’, ++) • Global namespace is not allowed (Math, window.)
65. template expressions Should be: • Quick • Simple • Idempotent
66. attributes vs properties • Attributes initialize DOM properties and then they are done. • Property values can change; attribute values can't.
67. attributes vs properties • use <img [src] /> than src={{}} ng-src… & lots of directives in angular 1.x
68. elvis ?. -> elvis operator Null safe operator objeto?.propiedad?.valor
69. elvis Try it!
70. binding types • Interpolation • Property • Attribute * (aria, svg, table span do not have element properties, only [attr.]) • Class [class.x] • Style [style.x]
71. let’s use a class/style with a method • [class.x] • [style.font-size] =
72. example property databindings • <img [src] = "url"> • <app [repo]="repo"></app> • <div [ngClass] = "{selected: isSelected}"></div> • <button [style.color] = "isSpecial ? 'red' : 'green'"> • <div [class.special]="isSpecial">Special</div> • [disabled]="isUnchanged"
73. template statements (event)="statement" • Side effects • Supports “;” and assignments… • No new(), ++, +=, console.log or pipes
74. two-way databinding • ? • ...
75. two-way databinding • [()] ◦ <input [(ngModel)]="sth.another"> • Forms...
76. ok, let’s recap • Interpolation & property data binding • Event binding • Two way data binding Component oriented... but
77. new component • Component class (+ template) • Use the selector • And add it to the directives metadata of the parent class
78. new component • Test it!
79. inputs <component [variable]="value" /> @Inputs() variable:type
80. inputs • Test it!
81. outputs Remember the $event object... EventEmitter: @Output() sth = new EventEmitter<String>();
82. outputs • declare the output (@Output()) and create an EventEmitter (sth:EventEmitter<> = new EventEmitter<>()) • emit an event (sth.emit(object)) • And listen in the parent component (sth)=method(object)
83. outputs • log in the parent component a child selection...
84. inputs & outputs Inputs/ are not evaluated in constructor ngOnInit -> implement OnInit Several phases (ngOnChanges with map, ngOnDestroy…)
85. Dependency Injection
86. inversion of control Inversion of control is the key When we write new something() we add some coupling That something can’t be a child class because of new
87. inversion of control Dependency Injection is one way of implementing IoC Basically saying: constructor(@Injectable wheels) {...}
88. inversion of control There are other ways: • Passing a reference manually • Factory • Builder • ServiceLocator • ...
89. so what’s dependency injection…? • A coding pattern • a class receives its dependencies from external sources rather than creating them itself.
90. and why, again? • encapsulation • one reason to change • flexibility • testing
91. simplest example • Let’s create a “real” service class • Pass it in as an argument in providers metadata • And inject it in the constructor and imports. and maybe @Injectable()
92. dependency injection in angular • singletons* • optional dependencies • lot’s of config options
93. dependency injection in angular • provide(RaceService, {useClass: RaceService} ◦ with the dependencies • useExisting • useValue • useFactory: () => IS_PROD ? new RaceService() : new FakeRaceService() • DI tokens • multi: true • add to default injectors
94. http
95. http • Additional module to do query requests. • Uses Rx!!!
96. http • <script src="node_modules/angular2/bundles/http.dev.js"> • <script src="node_modules/rxjs/bundles/Rx.js"> • import 'rxjs/Rx'; (we add all operators) • inject HTTP_PROVIDERS • use http methods and imports
97. http • text() • json() • status headers (object of type Headers) • retry() • toPromise()
98. http let body = JSON.stringify({ name }); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.post(this.url, body, options) .map(res => <Entity> res.json().data) .catch(this.handleError)
99. http • Don’t return the response object • Handle errors (do operation)
100. http • Manual request • JSONP • fetch API
101. rx
102. rx Observer
103. rx Observer + Only emit when listening + OnFinished + OnError + Multiple Events + Operators + Combinations + Schedulers (java…)
104. rx • Creation: Observable.create, just, from • Operators: take, map, filter, reduce, merge...
105. rx
106. rx Observable.fromEvent($input, 'keyup') .map(function (e) { return e.target.value; // Project the text from the input }) .filter(function (text) { return text.length > 2; // Only if the text is longer than 2 characters }) .debounce(750 /* Pause for 750ms */ ) .distinctUntilChanged(); // Only if the value has changed
107. rx • Observable.fromEvent(this.el.nativeElement, 'keyup') • Emitter with Observables
108. rx Observable from button (Subject + click) or: • [ngFormControl]="element" • element = new Control() • element.valueChanges
109. rx 1. WikipediaService 2. Create an Observable of a field 3. Wait 1 second until search 4. Filter repeated results 5. Cancel previous requests
110. rx this.term.valueChanges .debounceTime(400) .distinctUntilChanged() .switchMap(term => this.wikipediaService.search(term));
111. pipes
112. pipes Transform data, typically in interpolation: <p>The hero's birthday is {{ birthday | date }}</p>
113. pipes • json pipe • slice (like python) -> slice:1:2 • Uppercase & lowercase • number:’.1-1’ -> integer digits, minfraction, maxfraction • Percent • currency • date with elements only
114. pipes • Are injectable • We can roll our own
115. pipes AsyncPipe works with • Promise • Observable And renders the result when it’s finished...
116. forms
117. forms • Controls -> field’s value, states & errors • Control, ControlGroups & Forms • Model driven (from JS) vs template driven (ngControl in template)
118. forms • ngControl tracks the state and changes the css classes • We can (follow me on this), assign ngControl to a field, and assign a local variable from this form.
119. controlling the state of the form We can control the full form state: • (ngSubmit)=”onSubmit()” #variableFormName=”ngForm” • [disabled]=”!variableFormName.form.valid”
120. controls • valid • errors • dirty • pristine • touched • untouched • value • status • valueChanges
121. template driven • we don’t want to submit in onclick (ngSubmit)=”action()” • we need a form alias to check #userForm="ngForm" • ngModel • we need ngControl="password" • #password="ngForm" • *ngIf="password.control?.dirty && password.control?.hasError('required')"
122. validators required minlength maxlength
123. +typescript
124. typescript • superset ES6 with types & decorators • Only 1 constructor • ${variable} in template strings
125. typescript • let/const (blocks & hoisting) • String templates • Arrow functions (implicit return, capture this) • for of • Maps & sets
126. typescript • short syntax for objects • Rest parameters (...restOfName) & spread • Destructuring (let { timeout, isCache } = httpOptions) • Promises & Async/Await
127. typescript • Accessors • Type inference • Function Types & Hybrid Types (interfaces with function types) • Static properties • Union types “North” | “East”
128. Final Words
129. so what’s missing? • Routing • Model driven forms • Testing • Minimization, bundling... • CLI • Animations
130. why? • Opinionated • Component Oriented • -> • ...
131. style guides • Johnpapa • imitation
132. angular seeds & bootstraps • angular2-webpack • angular2-seed • official angular2 material • ng-2 material
133. references • Becoming a ninja with Angular2 or ng-book2 • Typescript book or Typescript official guide • Cheatsheet • Angular 2 official guide • Awesome resources & more
134. questions?
135. feedback: https://goo.gl/47U1z6 nhpatt @(gmail | twitter)
136. angular2 @SC Toledo Javier Gamarra / @nhpatt