AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

Google开发团队亲自介绍Angular 2

发布者 angular
发布于 1432689833018  浏览 3531 关键词 前端, JavaScript, AngularJS, English 
分享到

第1页

Angular 2

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



第3页

Angular 2 Syntax



第4页

Familiar vs

Simple



第5页

data binding



第6页

Angular 1: binding semantics

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



第7页

Angular 2: binding semantics

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



第8页

Angular 2: binding questions

● Is [property] a valid HTML?

● Why [property]=expression

not property={{expression}}?

● What about {{interpolation}}?



第9页

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.



第10页

Why [property] not {{expression}}

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



第11页

Why [property] not {{expression}}

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



第12页

Why [property] not {{expression}}

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

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



第13页

Why [property] not {{expression}}

● Web Components

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



第14页

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



第15页

Why [property] not {{expression}}

[property]="expression" binds to

DOM properties



第16页

What about {{interpolation}}?

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



第17页

Angular 1 vs Angular 2

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



第18页

Angular 1 vs Angular 2

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



第19页

Angular 1 vs Angular 2

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



第20页

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



第21页

event binding



第22页

Angular 1 expression or statement

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



第23页

Angular2 - Expression vs Statement



<component



expression



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



<component



statement



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



第24页

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



第25页

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



第26页

ref binding



第27页

Angular 1 - Reference

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



第28页

Angular 1 - Reference

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



第29页

Angular 1 - Typos

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

</div>



第30页

Angular 1 - Typos

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

</div>



第31页

summary



第32页

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



第33页

Web Components



第34页

Angular 1 - Web Components

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

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



第35页

Angular 1 - Web Components

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



第36页

Angular 2 - Web Components

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

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



第37页

Microsyntax



第38页

Angular 1 - implicit templates

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

<ul>

{{item in items}}



第39页

Angular 2 - explicit templates

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

<ul>



第40页

Angular 2 - explicit templates

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

<ul>



第41页

Angular 2 - explicit templates

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

<ul>



第42页

Angular 2 - explicit templates

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

<ul>



第43页

Simpler Predictable

Toolable



第44页

DEMO TIME



第45页

Thank you!

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



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。