Angular 2

Miško Hevery (@mhevery) Rado Kirov (@radokirov)

Angular 2 Syntax

Familiar vs

Simple

data binding

Angular 1: binding semantics

<component title="Literal"> <component title="expression"> <component title="{{interpolate}}">

Angular 2: binding semantics

<component title="Literal"> <component [title]="expression">

Angular 2: binding questions

● Is [property] a valid HTML?

● Why [property]=expression

not property={{expression}}?

● What about {{interpolation}}?

Is [property] a valid HTML?

The HTML syntax spec:

Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), ">" (U+003E), "/" (U+002F), and "=" (U+003D) characters, the control characters, and any characters that are not defined by Unicode. In the HTML syntax, attribute names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that are an ASCII caseinsensitive match for the attribute's name.

Why [property] not {{expression}}

<img src="user.png"> <img src="{{user.name}}.png"> <img ng-src="{{user.name}}.png">

Why [property] not {{expression}}

<button disabled="{{exp}}"> <button ng-disabled="exp">

Why [property] not {{expression}}

<pane title="{{title}}" selected="{{isSelected}}">

<pane escape-title="title" escape-selected="isSelected">

Why [property] not {{expression}}

● Web Components

○ Should act like existing browser elements ○ DOM API: properties, events, methods ○ HTML is serialized version of DOM

Why [property] not {{expression}}

● HTML Attributes => DOM properties

○ <input value="initial">

● Properties

○ provide current value var current = input.value;

○ can contain non string values ■ passing model values to child components ■ boolean attributes

Why [property] not {{expression}}

[property]="expression" binds to

DOM properties

What about {{interpolation}}?

<div title="My Text"> <div title="{{exp}}"> <div [title]="exp.toString()">

Angular 1 vs Angular 2

<div ng-bind="exp"> <div [text]="exp">

Angular 1 vs Angular 2

<div ng-bind-html="exp"> <div [inner-html]="exp">

Angular 1 vs Angular 2

<div ng-hide="exp"> <div [hidden]="exp">

Unneeded directives

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

event binding

Angular 1 expression or statement

<component select="user.name(current)">

Angular2 - Expression vs Statement



<component



expression



[select]="user.name(current)">



<component



statement



(select)="user.name(current)">

Angular2 - Expression vs Statement



Expressions



Statements



Syntax [prop]="exp" (event)="stmt" bind-prop="exp" on-event="stmt"



Driven by change detection



event



side-effects (assignments)



no



yes



null suppression



yes



throw error



count (;)



one



multiple

Unneeded directives

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-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup

ref binding

Angular 1 - Reference

<button ng-click="?.focus()"> <input type=text name=user>

Angular 1 - Reference

<button (click)="input.focus()"> <input #input type=text name=user>

Angular 1 - Typos

<div tytle="{{usor.name}}"> <button ngClick="ct1.c1ick()"> {{usor.name}} </button>

</div>

Angular 1 - Typos

<div tytle="{{usor.name}}"> <button ngClick="ct1.c1ick()"> {{usor.name}} </button>

</div>

summary

Angular2 - Summary



Short



Canonical



JavaScript



Property [prop]="exp" Binding



bind-prop="exp" e['prop'] = exp;



Event (event)="stmt" on-event="stmt" e.addEventListener(



Binding



'event', stmt);



Ref #x Binding



var-x



var x = e;



DOM API: properties, events, methods

Web Components

Angular 1 - Web Components

<button ng-click="v.play()"> <google-youtube

id="v" videoid="{{id}}" head="{{ {start:s, end:e} }}" ng-state="onState($event)">

Angular 1 - Web Components

var v = document.getElementById(…) v.videoid = id; v.head = {start: s, end: e}; v.addEventListener('state', …); v.play();

Angular 2 - Web Components

<button (click)="v.play()"> <google-youtube

#v [videoid]="id" [head]="{start:s, end:e}" (state)="onState($event)">

Microsyntax

Angular 1 - implicit templates

<ul> <li ng-repeat="item in items"> {{item}} <li>

<ul>

{{item in items}}

Angular 2 - explicit templates

<ul> <template foreach #item [in]="items"> <li>{{item}}<li> </template>

<ul>

Angular 2 - explicit templates

<ul> <li template="foreach; #item; in=items"> {{item}} </li>

<ul>

Angular 2 - explicit templates

<ul> <li template="foreach #item in items"> {{item}} </li>

<ul>

Angular 2 - explicit templates

<ul> <li *foreach="#item in items"> {{item}} </li>

<ul>

Simpler Predictable

Toolable

DEMO TIME

Thank you!

angular 2 - https://github.com/angular/angular slides - http://goo.gl/W4K6dv demo - https://github.com/rkirov/youtube-app