Angular2v2
Download as PPTX, PDF1 like501 views
Angular 2 preview introduces components as the fundamental building block and embraces upcoming standards like Web Components. Key changes include defining components with annotations instead of controllers and services, using templates with new binding syntax instead of directives, and compiling to ES5 with TypeScript for static typing. Many Angular 1 directives are no longer needed in Angular 2 which aims to simplify the framework and improve performance. The new version is not yet stable and some features like the router were demonstrated but too unstable to show in detail.
![Templates Angular 2.0
Defined syntax
Readable by tools and humans
Set properties instead of attributes
33
<h1>Slides</h1>
<div *for="#slide of slides" class="slidePreview">
<a (click)="openSlide($index)">
<img [src]="slide" class="previewImage" />
</a>
</div>](https://image.slidesharecdn.com/97abbe0c-9302-4ba7-80aa-be9a27cb2e23-150601151406-lva1-app6891/85/Angular2v2-32-320.jpg)
![Templates – data-binding
Set properties, not attributes
<li [hidden]="recipe.isHidden">
vs
<li ng-hide="recipe.isHidden">
# of properties > # of attributes
[] for properties
myItem[‘myProp’] = something;
Right side = expression (always)
34](https://image.slidesharecdn.com/97abbe0c-9302-4ba7-80aa-be9a27cb2e23-150601151406-lva1-app6891/85/Angular2v2-33-320.jpg)
![Angular 2 - Expression vs statement
<my-component [select]="user.name(current)" />
<my-component (select)="user.name(current)" />
37
expression
statement](https://image.slidesharecdn.com/97abbe0c-9302-4ba7-80aa-be9a27cb2e23-150601151406-lva1-app6891/85/Angular2v2-36-320.jpg)
![Angular 2 - Expression vs statement
Expressions
[prop]=“value”
Driven by change detection
No side-effects
Null suppression
1 ‘;’
Statements
(event)=“handler”
Driven by event
All about side effects
Error on null
n ‘;’
38](https://image.slidesharecdn.com/97abbe0c-9302-4ba7-80aa-be9a27cb2e23-150601151406-lva1-app6891/85/Angular2v2-37-320.jpg)
![Directive
50
import {Directive} from 'annotations';
import {NgElement} from 'angular2/angular2';
@Directive({
selector: '[alert]',
bind: {
}
})
export class Alert {
text: string;
constructor(private el : NgElement) {
el.domElement.style.color = "red";
}
}](https://image.slidesharecdn.com/97abbe0c-9302-4ba7-80aa-be9a27cb2e23-150601151406-lva1-app6891/85/Angular2v2-49-320.jpg)
Angular2v2
- 3. Consultant & Trainer at Info Support Cloud, BI, Web, Mobile C#, JavaScript, SQL Early adopter, musician Yoeri Van Damme [email protected] @YoeriVD 3
- 4. 5
- 5. DO NOT USE IT
- 11. 12
- 13. Steps to build NG1 app 1. Create module 2. Declare ng-app 3. Add controller 4. Inject $scope and add items 5. Declare controller 6. Create template 14
- 14. Angular 1.x 15 module $scope views $filter $controller DDO Directive Provider Factory Service Constant Valueconfig run
- 15. 16
- 16. 17
- 17. Steps to build NG2 app 1. Create component 2. Create Template 3. Bootstrap 4. Transpile 18
- 18. Steps to build NG2 app 1. Create component 2. Create Template 3. Bootstrap 4. Transpile 19
- 19. Angular 2.0 20 module $scope views $filter $controller DDO Directive Provider Factory Service Injectables Constant Valueconfig run
- 21. Motivation Enable html development, not change it Embrace standards, not define Angular 1.x will be obsolete Simplify Improve – Performance – Learning curve 22
- 22. COMPONENTS 23
- 23. Components 1 of 2 kinds of directives: – ComponentDirective – DecoratorDirective 24
- 24. Component Built on TypeScript Marked by annotations – @Component – @View Nested Unidirectional Tree no more $apply()! 25
- 25. Annotations Metadata for component – @View – @Component – @Directive – @Parent – … 26
- 26. TYPESCRIPT 27
- 27. Why TypeScript? = ES6 today – Transpile with Traceur – Compile to ES5 Replace AtScript STATIC TYPES! 28
- 29. Demo: bootstrap an app
- 30. TEMPLATES 31
- 31. Templates – Angular 1.x Type of value depends on implementation Need for work-arounds – ng-src, ng-max, ng-min, ng-href,… 32 <h1>Slides</h1> <div ng-repeat="slide in slides" class="slidePreview"> <a ng-click="openSlide($index)"> <img ng-src="{{ slide }}" class="previewImage" /> </a> </div>
- 32. Templates Angular 2.0 Defined syntax Readable by tools and humans Set properties instead of attributes 33 <h1>Slides</h1> <div *for="#slide of slides" class="slidePreview"> <a (click)="openSlide($index)"> <img [src]="slide" class="previewImage" /> </a> </div>
- 33. Templates – data-binding Set properties, not attributes <li [hidden]="recipe.isHidden"> vs <li ng-hide="recipe.isHidden"> # of properties > # of attributes [] for properties myItem[‘myProp’] = something; Right side = expression (always) 34
- 34. Result A lot of directive are not needed anymore: – ng-bind ng-bind-html ng-bind-template ng-class ng-class-even ng-class-odd ng-style ng-disabled ng-readonly ng-selected ng-show ng-hide ng-src ng-srcset ng-href ng-value 35
- 35. Angular 1 - Expression vs statement <my-component select="user.name(current)" /> What is select? – Value assignment? – Property assignment (with side effects?)? – Event (function expression) ? Tools can’t tell, humans can’t tell. 36
- 36. Angular 2 - Expression vs statement <my-component [select]="user.name(current)" /> <my-component (select)="user.name(current)" /> 37 expression statement
- 37. Angular 2 - Expression vs statement Expressions [prop]=“value” Driven by change detection No side-effects Null suppression 1 ‘;’ Statements (event)=“handler” Driven by event All about side effects Error on null n ‘;’ 38
- 38. Result A lot of other directives are not needed anymore: – ng-blur ng-change ng-checked ng-copy ng-cut ng-paste ng-click ng-dblclick ng-open ng-submit ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseleave ng-mouseenter ng-mousemove ng-mouseover ng-mouseup 39
- 39. Did anyone count all those directives? The claims-based identity model 40
- 40. 41
- 41. Demo: creating a template
- 42. Templates String interpolation – Syntax same, but works differently 43
- 43. Why all the trouble for components?! 44
- 44. WebComponents is ‘native’! Enable html development, not change it Embrace standards, not define Only supported in Chrome Mocked in other browsers 45
- 45. Structure of a Webcomponent Visible DOM Implicit DOM – video control – Every input – … Custom events 46
- 46. Demo: shadow DOM
- 47. Angular 2 Views Compile only once Elements never passed directly to component controller Cacheable => webcomponents 48
- 48. THINGS WAY TOO UNSTABLE TO DEMO 49
- 49. Directive 50 import {Directive} from 'annotations'; import {NgElement} from 'angular2/angular2'; @Directive({ selector: '[alert]', bind: { } }) export class Alert { text: string; constructor(private el : NgElement) { el.domElement.style.color = "red"; } }
- 50. Forms The claims-based identity model 51
- 51. Dependency Injection Mature model Now with control of lifetime Childcontainer Binding dependencies … 52
- 52. New router ~ same as Angular 1.4+ Built by Rob Eisenberg – Durandal – Auralia 53
- 53. So what do we know? Angular2 is all about components Based on near-future standards – ES6 (TypeScript) – WebComponents Much much more simple 54
Editor's Notes
- #14: Bootstrap + create controller
- #25: Viewport: https://github.com/angular/angular/blob/master/modules/angular2/src/directives/if.js
- #31: Bootstrap + create controller
- #34: !foreach is ondertussen al compleet veranderd
- #52: http://angularjs.blogspot.be/2015/03/forms-in-angular-2.html