【Angular2】Angular2——Hello World!

9369 ワード

前言
例の父としてHello Worldは言語学習ごとの最初の例ですが、今日はES 5仕様を使ったHello WorldとTypescriptを使ったHello Worldの違いを比較してみましょう.
ES5
ESフルネームECMAScriptは、実際には文法と意味の標準であるスクリプトです.実際にJavaScriptはECMAScript,DOM,BOMの3つで構成されています.
ES 5は多くの人が使ったことがあると信じており、ほとんどのブラウザはES 5をサポートしており、ES 6(ES 2015)が出てくると、多くの新しい特性が加わり、ES 5にとって大きな飛躍となっています.しかし、ほとんどのブラウザがこのステップに従うわけではありません.ES 6をサポートしていないブラウザでES 6を実行するにはどうすればいいのでしょうか.
Typescript
TypeScriptはマイクロソフトが開発した自由でオープンソースのプログラミング言語です.JavaScriptのスーパーセットであり、本質的にこの言語にオプションの静的タイプとクラスベースのオブジェクト向けプログラミングが追加されています.
ES 6仕様に適合するtsコードをES 5仕様に適合するjsコードに変換することができます.つまり、ES 5のみをサポートするブラウザでより多くの特性を使用できるES 6コード仕様は、超クールではないでしょうか.
コード#コード#
ES5
index.html




    
    


    <app/>
    <script src="https://unpkg.com/zone.js@0.6.12/dist/zone.js"/>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"/>
    <script src="https://unpkg.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"/>
    <script src="https://unpkg.com/@angular/core@2.0.0-rc.4/bundles/core.umd.js"/>
    <script src="https://unpkg.com/@angular/common@2.0.0-rc.4/bundles/common.umd.js"/>
    <script src="https://unpkg.com/@angular/compiler@2.0.0-rc.4/bundles/compiler.umd.js"/>
    <script src="https://unpkg.com/@angular/platform-browser@2.0.0-rc.4/bundles/platform-browser.umd.js"/>
    <script src="https://unpkg.com/@angular/platform-browser-dynamic@2.0.0-rc.4/bundles/platform-browser-dynamic.umd.js"/>
    <script src="./app.js"/>

</code></pre> 
  <span style="font-size:18px;">app.js</span> 
  <pre><code>var App = ng.core.Component({
    selector: 'app',
    template: '<h1>Hello {{target}}!</h1>'
})
.Class({
    constructor: function () {
        this.target = 'world';
    }
});
ng.platformBrowserDynamic.bootstrap(App);</code></pre> 
  <h2><span style="font-size:18px;"><span style="color:#993399;">Typescript</span></span></h2> 
  <p><span style="font-size:18px;">index.html</span></p> 
  <pre><code>


    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- inject:css -->
    <!-- endinject -->


    <app>Loading...</app>
    <!-- inject:js -->
    <!-- endinject -->
    

</code></pre> 
  <span style="font-size:18px;">app.ts</span> 
  <pre><code>import {Component} from  '@angular/core'
import {bootstrap} from "@angular/platform-browser-dynamic";
@Component({
    selector: 'app',
    templateUrl: './app.html',
})
class App {
    target:string;
    constructor() {
        this.target = 'world';
    }
}
bootstrap(App);</code></pre> 
  <span style="font-size:18px;">app.html</span> 
  <pre><code><h1>Hello {{target}}!</h1></code></pre> 
  <span style="font-size:18px;">    app.js</span> 
  <pre><code>"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var browser_1 = require("angular2/platform/browser");
var App = (function () {
    function App() {
        this.target = 'world';
    }
    App = __decorate([
        core_1.Component({
            selector: 'app',
            templateUrl: './app.html',
        }),
        __metadata('design:paramtypes', [])
    ], App);
    return App;
}());
browser_1.bootstrap(App);
</code></pre> 
  <span style="font-size:18px;">    index.html</span> 
  <pre><code>


    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Switching to Angular 2
    
    
    
    
    


    Loading...
    
    
    
    
    
    
    

    System.config({"defaultJSExtensions":true,"paths":{"bootstrap":"/dist/dev/bootstrap","markdown":"/node_modules/markdown/lib/markdown","immutable":"/node_modules/immutable/dist/immutable.js"},"map":{"rxjs":"/node_modules/rxjs","@angular":"/node_modules/@angular"},"packages":{"@angular/core":{"main":"index.js","defaultExtension":"js"},"@angular/compiler":{"main":"index.js","defaultExtension":"js"},"@angular/common":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser-dynamic":{"main":"index.js","defaultExtension":"js"},"@angular/router-deprecated":{"main":"index.js","defaultExtension":"js"},"@angular/http":{"main":"index.js","defaultExtension":"js"},"rxjs":{"defaultExtension":"js"}}});
    System.import("./app")
        .catch(function () {
            console.log("Report this error to https://github.com/mgechev/switching-to-angular2/issues", e);
    });

コード解釈
ES 5仕様のコードについては、わかりやすいと思いますが、app.jsではこのコンポーネントを定義しています.私たちのHTMLで(そんなに多くのJSプラグインを引用する必要があります.具体的な役割は自分で検索しましょう)直接引用すると、望ましい効果が得られます(Hello Worldを表示!).
しかし、Typescriptについては、説明する必要があります.
まずindex.htmlから始めましょう
Angular 2自体はJSファイルであるため、scriptタグを導入する必要があり、Angular/typeScript依存ファイルをいくつか導入する必要があります.
・es 6-shim(古いブラウザに対応するため)
・angular 2-polyfills(zone、promise、reflectionに特化したブラウザ間の基本的な標準化を提供する)
・SystemJS(モジュールローダ、モジュールの作成とモジュール間の依存の解決を支援し、複雑なモジュールのブラウザ側へのロードプロセスを容易にする)
・RxJS(ライブラリ用とJSでの反応式プログラミング)
つまり、出力後のindex.htmlに追加したラベルです.
次はapp.tsファイルです
モジュールのインポート
import文は、私たちのコードで使用するモジュールを定義します.ここでは、2つのモジュール、Component、Bootstrapをインポートします.@angular/coreモジュールからComponentモジュールをインポートし、@angular/coreこの部分は、プログラムがどこで私たちの依存を見つけることができるかを教えてくれます.モジュール@angular/platform-browser-dynamicからbootstrapモジュールもインポートします.
コンポーネントの作成
私たちAngularアプリケーションではHTMLタグを作成し、ブラウザは内蔵のタグ、例えば、などしか認識していませんが、新しいタグを認識させたいなら?次に、コンポーネントを作成します.
1つの基本コンポーネントは2つの部分に分かれています.
・Component注記
・コンポーネントのクラスの定義
注記はメタデータとしてコードに追加されます.Appクラスで@Componentを使用すると、Appクラスがコンポーネントとして装飾されます.たとえば、@Component構成のselectorプロパティをappに設定するだけで、ラベルでコンポーネントを使用します.ここでselectorプロパティは、対応するDOM要素がコンポーネントによって使用されることを示します.これにより、テンプレート内のラベルはこのコンポーネントクラスを使用してコンパイルされます.

@Component({
    selector:'app'
})

テンプレートの追加
@Componentのtemplateオプションでテンプレートを追加できます.

@Component({
    selector:'app',
    template:'
        
            Hello World!
        
        '
)}

または、@ComponentのtemplateUrlオプションを使用してテンプレートリンクを追加します(導入したテンプレート)

@Component({
    selector:'app',
    templateUrl:'./app.html'
)}

ブートアプリケーション
ファイルの最後の行「Bootstrap(App)」がアプリケーションを開始し、最初のパラメータはアプリケーションのメインコンポーネントがAppであることを示します.起動されると、index.htmlファイルでコンポーネントによってレンダリングされます.
アプリケーションのロード
アプリケーションを実行するには、次の2つのことが必要です.
1、HTMLファイルにインポートしたappファイルを教える
2、bodyでのコンポーネントの使用
出力されたindex.htmlファイルには、次の文があります.

System.import("./app")

この行は、システム.jsがapp.jsをプライマリ・エントリとしてロードすることを示します.(しかし、まだapp.jsはありません.私たちのファイルはapp.tsです.今、tsをjsに変換するために使います.非常に簡単なコードです.興味のあるパートナーは自分で探すことができます.)
効果
エラーがなければ、このプログラムを起動すると、ページにHello Worldが表示されます!と入力します.
まとめ
このブログは2つの異なる仕様の下で簡単なHello Worldプログラムの形式をまとめています.それは単純です.静的なページなので、コンポーネントのデータも固定されています.次のブログから、より多くの新しい特性を追加します.お楽しみに.

Python-仮想環境インストール

IOS開発mapkit学習ノート