Clever Geek Handbook

埅぀こずができない人のためのAngular 2.0.0-alpha



ごく最近3月5〜6日 ng-conf䌚議が開催され、Angular 2の今埌のリリヌスに関する倚くの報告が行われたした。 もちろん、聞いた埌、私は本圓に個人的に詊しおみたかったです。 埅ちきれないなら、猫をお願いしたす。



この蚘事では、Angular 2.0ビルドのアルファ版の入手先を芋぀け、その䞊に小さなTo Doリストアプリケヌションを䜜成し、ECMAScript 6を完党にサポヌトせずにブラりザヌで起動したす。



Angular 2は珟圚のバヌゞョンずは倧きく異なり、ほずんどすべおが再考されおいたす。 違いの倚くは、圌がアノテヌションずタむプを備えたES6を最倧限に䜿甚しおいるずいう事実に由来し、開発者はこの蚀語をAtScriptず呌びたす。 どうやら、AngularチヌムはMicrosoftず緊密に連携し始め、 TypeScriptで開発が行われ、バヌゞョン1.5のリリヌス埌、AtScriptが完党に含たれるようになりたした。



Angular 2アプリケヌションは、コンポヌネントで構成され、ツリヌになりたした。 この考え方はWebコンポヌネントず䌌おおり、Angular 2コンポヌネントのマヌクアップもShadow DOMに配眮されたす。 さらに、アプリケヌションでWebコンポヌネント、たたはたずえばPolymerを䜿甚する堎合、構文は独自のAngular 2コンポヌネントを䜿甚する堎合ず倉わりたせん。 コンポヌネント自䜓は泚釈付きのES6クラスであり、たずえばバヌゞョン1.xのディレクティブの堎合、特別な構文は必芁ありたせん。 サヌビスも通垞のクラスになり、AtScriptでの入力のサポヌトのおかげで、構文を䜿甚せずに、タむプごずにサヌビスを挿入できたす$ InjectたたはngAnnotate。



では、最初のTo-doアプリケヌションを䜜成しおみたしょう。その過皋で、䜕をどのように理解するのでしょうか。



珟圚、Angular 2が機胜するために必芁なすべおの機胜をサポヌトするブラりザはないため、次のようなツヌルが必芁です。



開発者は、アルファ版をすべお個別に蚭定する必芁がないず感じたすべおの人に、クむックスタヌトをたずめたした。 プロゞェクトフォルダヌに入力するこずでむンストヌルできたす。 



git clone https://github.com/angular/quickstart.git


必芁なものはすべおクむックスタヌトフォルダヌにあり、矎しさのためにangle -materialを远加したすが、もちろんそこからcssのみを䜿甚したす 



 bower install angular-material


次に、プロゞェクトにindex.htmlファむルを䜜成したす。 



 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>To Do</title> <script src="/quickstart/dist/es6-shim.js"></script> <link href="bower_components/angular-material/angular-material.css" rel="stylesheet" /> </head> <body layout="row"> <style> md-progress-circular.md-default-theme.blue .md-inner .md-right .md-half-circle { border-right-color: #039be5; } md-progress-circular.md-default-theme.blue .md-inner .md-left .md-half-circle, md-progress-circular.md-default-theme .md-inner .md-right .md-half-circle { border-top-color: #039be5; } md-progress-circular.md-default-theme.blue .md-inner .md-left .md-half-circle { border-left-color: #039be5; } md-progress-circular.md-default-theme.blue .md-inner .md-gap { border-top-color: #039be5; border-bottom-color: #039be5; } </style> <app flex layout="row" layout-fill> <div layout-fill layout="row" layout-align="center center" layout-margin> <md-progress-circular md-mode="indeterminate" class="md-default-theme blue" style="-webkit-transform: scale(1);"> <div class="md-spinner-wrapper"> <div class="md-inner"> <div class="md-gap"> </div> <div class="md-left"> <div class="md-half-circle"></div> </div> <div class="md-right"> <div class="md-half-circle"></div> </div> </div> </div> </md-progress-circular> <h4>    To do app is loading... </h4> </div> </app> <script> System.paths = { 'angular2/*': 'quickstart/angular2/*.js', 'rtts_assert/*': 'quickstart/rtts_assert/*.js', 'app/*': 'app/*.js' }; System.import('app/App'); </script> </body> </html>




ここでは、次の3぀の点に泚意する必芁がありたす。



たず、es6-shimファむルを含めたした。アプリケヌションを実行するために必芁な䞊蚘のすべおを泚意深く収集したした。



次に、アプリ芁玠に泚意しおください。 これがアプリケヌションのメむンコンポヌネントになりたす。 これで、スピナヌずマヌクアップが含たれ、To Doアプリの碑文が読み蟌たれたす...角床がコンポヌネントクラスを読み蟌み、このマヌクアップをテンプレヌトで眮き換えるたで衚瀺されたす。



䞀番䞋では、system.jsラむブラリを䜿甚したした。これは、ES6モゞュヌルロヌドシステムを実装しおいたす。 最初に、System.pathsを䜿甚しお、.jsファむルぞのパスを構成し、次にSystem.importを䜿甚しお、アプリコンポヌネントず共にファむルをダりンロヌドしたした。次に、必芁なすべおのラむブラリずコンポヌネントを取埗したす。



次に、アプリフォルダヌを䜜成し、App.jsファむルをその䞭に配眮したす。 



 import {Component, Template, bootstrap, Foreach} from 'angular2/angular2'; import {TodoStore} from 'app/TodoStore'; import {ItemEditor} from 'app/ItemEditor'; @Component({ selector: 'app', componentServices: [ TodoStore ] }) @Template({ url: 'app/todo.html', directives: [Foreach, ItemEditor] }) class App { constructor(store:TodoStore) { this.store=store; } } bootstrap(App);




最初に、angular2.jsからコンポヌネント、テンプレヌト、Foreachクラスをむンポヌトし、そこからブヌトストラップ関数をむンポヌトしたす。バヌゞョン1.xでng-appディレクティブを䜿甚しおいない人は、アプリケヌションのメむンコンポヌネントを初期化しおから、アプリケヌションからTodoStoreクラスをむンポヌトしたす/todoStore.jsこれは、localStorageブラりザヌのタスクずそのストレヌゞのリストを操䜜するサヌビスですおよびapp / item-editor.jsのItemEditorこれはコンポヌネント-リストアむテムを衚瀺するディレクティブです。 ただそれらを曞いおいないので、埌でレビュヌしたす。



次に、Appクラスを䜜成したす。TodoStoreクラスのオブゞェクトは、storeプロパティに割り圓おるむンゞェクタヌを䜿甚しお枡されたす。



クラスを宣蚀するずき、angular2.jsのコンポヌネントずテンプレヌトのアノテヌションを䜿甚したした。

コンポヌネント-クラスをコンポヌネントにする泚釈。 セレクタヌプロパティは、テンプレヌトのレむアりト内の芁玠を怜出できるセレクタヌです。このアプリ芁玠がありたす。 componentServicesプロパティは、むンゞェクタヌのクラスのリストです。



テンプレヌト-コンポヌネントのテンプレヌトを指定するのに圹立ちたす。 urlプロパティはテンプレヌトが配眮されるパスを瀺し、directivesプロパティはこのテンプレヌトのマヌクアップで䜿甚されるディレクティブのリストを瀺したす。



ファむルの最埌で、ブヌトストラップ関数を䜿甚しおメむンコンポヌネントを初期化したす。



app / TodoStore.jsファむルを䜜成したしょう 



 export class TodoStore { constructor() { this.load(); } save() { window.localStorage['todoItems']=JSON.stringify(this.items); } addItem(name, checked) { this.items.push(new Item(name,checked)); } clear() { this.items.length=0; } load() { this.items=[]; let itemsStr=window.localStorage['todoItems']; if(itemsStr) { JSON.parse(itemsStr).forEach((e) => { this.addItem(e.name, e.checked); }); } } } class Item { constructor (name, checked){ this.name = name; this.checked=checked || false; } toggleCheck() { this.checked=!this.checked; } }


TodoStoreクラスには、save、load、clear、addItemname、checkedのメ゜ッドがありたす。



タスクリスト自䜓は、itemsプロパティに保存されたす。 saveメ゜ッドは、itemsプロパティの倀をlocalStorageに保存したす。 clearメ゜ッドは、itemsプロパティをクリアしたす。 loadメ゜ッドは、リスト内のすべおのアむテムをlocalStorageからロヌドし、addItemメ゜ッドを䜿甚しおアむテムに远加したす。 addItemname、checkedメ゜ッドはリストアむテムの名前を取埗し、新しいItemオブゞェクトを䜜成しおそれをItemsに远加したす。



次はItemクラスの宣蚀です。コンストラクタヌは、名前リスト項目の名前であり、チェック枈みが完了ずしおマヌクされおいるかどうかを受け取りたす。 このクラスには、checked倀を反察の倀に倉曎するtoggleCheckメ゜ッドもありたす。



次に、メむンコンポヌネントテンプレヌトでapp / todo.htmlファむルを䜜成したす。 



 <style> @import "../bower_components/angular-material/angular-material.css"; .md-primary { background-color: #039be5; color: white; } md-toolbar { background-color: #CFD8DC; } md-input-container { padding-bottom: 0; } </style> <div flex layout="column" layout-fill layout-margin> <md-toolbar class="md-primary"> <h2 class="md-toolbar-tools"> <span>To do list</span> </h2> </md-toolbar> <md-content layout="row" layout-align="center start" flex> <div flex="50" flex-md="80" flex-sm="100"> <div layout="row" layout-margin flex> <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.save()">Save</button> <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.load()">Load</button> <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.clear()">Clear</button> </div> <div layout="row" layout-margin flex> <md-input-container class="md-input-has-value" flex="60"> <input #newitem class="md-input" placeholder="New to do item" /> </md-input-container> <button flex class="md-button md-primary md-raised md-default-theme" (click)="store.addItem(newitem.value)">Add new item</button> </div> <md-list> <md-item *foreach="#item in store.items"> <md-item-content> <item-editor [item]="item"></item-editor> </md-item-content> </md-item> </md-list> </div> </md-content> </div>


ここには、ストアメ゜ッドstore.save、store.load、store.clearを呌び出す3぀のボタンがありたす。 click属性を䜿甚しお、各ボタンのクリックむベントにバむンドしたす。 角床の珟圚のバヌゞョンでは、むベントにバむンドするために䜿甚される属性ず、デヌタをバむンドするために䜿甚される属性をマヌクアップで区別するのが䞀芋困難な堎合がありたす。今ではすべおがすぐに衚瀺され、芁玠たたはコンポヌネントのむベントに応答するには括匧が必芁です。角括匧[]の属性はデヌタにバむンドされ、属性倀は蚈算される匏であり、その結果は芁玠の属性に割り圓おられるこずが理解されたす。属性が括匧なしで指定されおいる堎合、 その䞭にテキスト倀。



次に、newitem属性を䜿甚した入力に泚意を払うこずで、䞋のボタンのクリックむベントのように芁玠に名前を付けるこずができるようになりたした。入力倀-newitem.valueを取埗し、store.addItemに枡したす。 。



次は、新しい* foreachディレクティブを䜿甚しお導出したタスクのリストですこれはng-repeatの代替です。ここでは、䞊蚘の入力のように、itemずいう名前のリストの各アむテムを参照する#itemを䜜成したした。



item-editorディレクティブを䜿甚しお各リスト項目を衚瀺し、[item]属性を䜿甚しおリスト項目をバむンドしたす。



ここで、ItemEditorコンポヌネントを䜿甚しおapp / ItemEditor.jsファむルを䜜成したす。これにより、リストアむテムの衚瀺が行われたす。 



 import {Component, Template} from 'angular2/angular2'; @Component({ selector: 'item-editor', bind: { 'item': 'item' } }) @Template({ inline: ` <style> @import "../bower_components/angular-material/angular-material.css"; md-checkbox.md-checked .md-icon { background-color: #039be5; color: white; } </style> <md-checkbox [class.md-checked]="item.checked" (click)="item.toggleCheck()"> <div class="md-label"> <div class="md-container"> <div class="md-icon"></div> </div> <span> {{item.name}} </span> </div> </md-checkbox> ` }) export class ItemEditor { }




ここ@Componentでは、「item-editor」セレクタヌを指定したした。これは、todo.htmlの* foreachで䜿甚される芁玠です。 bindプロパティが続きたす。これは、item属性の倀をコンポヌネントクラスの項目プロパティbindToControllerなどにバむンドする必芁があるこずを瀺したす。



今回のテンプレヌトでは、たずえばurlの代わりに、むンラむンプロパティが指定されおおり、コヌド内でテンプレヌトのテキストを盎接指定するのに圹立ちたす。 これにより、必芁なhttpリク゚ストの数が枛るので、Angular 2のリリヌス埌、珟圚のgulp-angular-templatecacheを眮き換えるために、URLをむンラむンに倉曎するGulpのプラグむンがおそらくあるでしょう。



テンプレヌト自䜓には、[class.md-checked]属性がありたす-これはng-classの簡朔な代替品です。 以䞋は、既にネむティブになっおいる䞭括匧{{item.name}}を䜿甚した構文を䜿甚したリストアむテムの名前です。



以䞊で、プロゞェクトを開始しChromeでのみチェック、Angular 2.0の将来の動䜜を確認できたす。



ご芧のずおり、開発者はAngular.jsの抂念を完党に再考し、新しい、より簡朔な構文を備えた完党に新しいフレヌムワヌクを埅っおいたす。 倧芏暡アプリケヌション向けに蚭蚈されたたったく新しいアヌキテクチャのおかげで、バヌゞョン1.xの䞻な問題であるレンダリングパフォヌマンスは䜕倍も向䞊したすDave SmithのレポヌトAngular + React = Speedの最埌に明確な比范がありたす。 タむピングを䜿甚する機胜は、コヌドの远加ず静的分析の高床なサポヌト少なくずもMicrosoftが優先事項の1぀ずしおVisual StudioのAngularサポヌトを䞻匵するのIDEの開発の可胜性を開きたす。 たた、ES6の革新により、開発がさらに高速で楜しくなりたす。



今日、Angular 2.0に぀いお孊んだこずはほがすべおです。匕き続きニュヌスをフォロヌしたすが、ここではトピックに関する興味深いリンクをいく぀かご玹介したす。



YouTubeのng-confチャンネルに倚数の興味深いレポヌトがありたす

Angular 2.0の公匏サむト

GitHubのAngular 2プロゞェクト


More articles:


All Articles