Angular 2 JavaScript 環境設定
この章では、Angular 2 の実行環境を設定する方法を紹介します。
この章では JavaScript を使用して Angular アプリケーションを作成しますが、TypeScript や Dart を使用して Angular アプリケーションを作成することもできます。
この章で使用するファイル・ディレクトリ構造は次のとおりです：
設定ファイルを作成
ディレクトリを作成
$ mkdir angular-quickstart
$ cd angular-quickstart
必要なライブラリを読み込む
ここではパッケージ管理ツールとして npm を使用することをお勧めします。npm をまだインストールしていない場合や npm について詳しくない場合は、次のチュートリアルを参照してください：NPM の使い方。
package.json ファイルを作成します。コードは次のとおりです：
package.json ファイル：
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0"
}
}
npm 公式サイトのミラーは中国国内からのアクセスが遅いため、ここでは淘宝（タオバオ）の npm ミラーを使用します。インストール方法は次のとおりです：
$ npm install -g cnpm --registry=https://registry.npmmirror.com
実行後、cnpm コマンドを使用してモジュールをインストールできます：
$ cnpm install
実行が成功すると、angular-quickstart ディレクトリの下に node_modules ディレクトリが生成されます。ここにはこのサンプルで必要なモジュールが含まれています。
Angular コンポーネントを作成
コンポーネントは Angular アプリケーションを構成する基本かつ中核となる要素です。1つのコンポーネントが特定の機能をカプセル化し、コンポーネント同士が連携して完全なアプリケーションを組み立てます。
一般的に、コンポーネントはビューテンプレートを制御するための JavaScript クラスです。
次に、angular-quickstart に app ディレクトリを作成します：
$ mkdir app
$ cd app
そして、コンポーネントファイル app.component.js を追加します。内容は次のとおりです：
app.component.js ファイル：
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>私の最初のAngularアプリ</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
次に、上記のコードを分析してみましょう：
グローバルな Angular core 名前空間 ng.core 内の Component メソッドと Class メソッドをチェーンで呼び出すことで、AppComponent という名前の可視コンポーネントを作成します。
Component メソッドは2つのプロパティを含む設定オブジェクトを受け取ります。Class メソッドはコンポーネント自体を実装する場所であり、Class メソッド内でコンポーネントにプロパティとメソッドを追加します。これらは対応するビューと動作にバインドされます。
モジュール
Angular アプリケーションはモジュール化されています。ES5 には組み込みのモジュールシステムがないため、サードパーティのモジュールシステムを使用できます。そして、アプリ用に独立した名前空間 app を作成し、ファイルコードを IIFE（即時実行関数式）でラップできます：
(function(app) {
})(window.app || (window.app = {}));
グローバルな app 名前空間オブジェクトを IIFE に渡します。存在しない場合は空のオブジェクトで初期化します。
ほとんどのアプリケーションファイルは、app 名前空間に要素を追加することでコードをエクスポートします。app.component.js ファイルで AppComponent をエクスポートしました。
app.AppComponent =
Class定義オブジェクト
このサンプルでは、AppComponent クラスには空のコンストラクタ関数が1つだけあります：
.Class({
constructor: function() {}
});
実際に意味のあるアプリケーションを作成する場合は、プロパティとアプリケーションロジックを使用してこのオブジェクトを拡張できます。
Component定義オブジェクト
ng.core.Component() は、このクラス定義オブジェクトが Angular コンポーネントであることを Angular に伝えます。ng.core.Component() に渡される設定オブジェクトには、selector と template の2つのフィールドがあります。
ng.core.Component({
selector: 'my-app',
template: '<h1>私の最初のAngularアプリ</h1>'
})
selector は、ホスト HTML 要素に単純な CSS セレクター my-app を定義します。Angular がホスト HTML 内で my-app 要素を検出すると、AppComponent インスタンスを作成して表示します。
template プロパティにはコンポーネントのテンプレートが格納されます。
NgModuleを追加
Angular アプリケーションは Angular モジュールで構成され、そのモジュールには Angular アプリケーションに必要なコンポーネントやその他のすべてのものが含まれます。
次に、app/app.module.js ファイルを作成します。内容は次のとおりです：
app.module.js ファイル：
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
アプリを起動
app/main.js ファイルを追加します：
app/main.js ファイル：
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));
アプリを起動するには2つのものが必要です：
- Angular の platformBrowserDynamic().bootstrapModule 関数。
- 上記で説明したアプリケーションのルートモジュール AppModule。
次に index.html を作成します。コードは次のとおりです：
index.html ファイル：
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 サンプル - サンプル(example.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<script src='app/app.component.js'></script>
<script src='app/app.module.js'></script>
<script src='app/main.js'></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
index.html の分析
- 1、必要な JavaScript ライブラリを読み込みます；
- 2、自分たちの JavaScript ファイルを読み込みます（順序に注意）；
- 3、<body> タグ内に <my-app> タグを追加します。
実行プロセスは次のとおりです：Angular が main.js で bootstrapModule 関数を呼び出すと、AppModule のメタデータを読み取り、起動コンポーネント内で AppComponent と my-app セレクターを見つけ、my-app という名前の要素を特定し、そのタグの間にコンテンツを読み込みます。
スタイルを追加
styles.css ファイルのコードは次のとおりです：
styles.css ファイル：
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
ターミナルを開き、以下のコマンドを入力します：
$ npm start
http://localhost:3000/ にアクセスすると、ブラウザに次の結果が表示されます：
これで最初の Angular 2 アプリケーションの作成が完了です。この記事で使用したソースコードは以下の方法でダウンロードできます。node_modules は含まれません。
ソースコードのダウンロード
Cloud Studio で AngularJS2 を使用する
step1：Tencent Cloud 開発者プラットフォーム にアクセスして、アカウントを登録/ログインします。
step2：右側の実行環境メニューで "Node.js" を選択します。
step3：次に、Angular CLI をグローバルインストールします。
npm install -g @angular/cli
step4：新しいプロジェクトを作成するには、次のコマンドを実行して新しいプロジェクトとデフォルトのアプリケーションコードを生成します。
ng new my-app
Angular CLI が必要な NPM パッケージをインストールし、プロジェクトファイルを作成し、そのプロジェクト内にシンプルなデフォルトアプリケーションを生成します。これには多少時間がかかる場合があります。
step5：プロジェクトディレクトリに移動し、サーバーを起動します。
cd my-app
ng serve --open
ng serve コマンドは開発サーバーを起動し、ファイルの変更を監視して、ファイルが変更されたときにアプリケーションを再ビルドします。
現在 CODING では、Cloud Studio ワークスペースをベースにした「私が最も好きな Cloud Studio プラグイン投票コンテスト」を開催しています。イベント公式サイト: https://studio.qcloud.coding.net/campaign/favorite-plugins/index にアクセスして、イベントの詳細情報をご覧ください。
その他の拡張機能