angular2_AngularJS の使用方法の簡単な紹介

ゼロから始めて、Typescript を使用して非常にシンプルな AngularJs 2 アプリケーションを構築しましょう。

まずデモを実行してください

この デモを実行してくださいまず、AngularJS2 アプリケーションを体験してみましょう。

以下はこのアプリケーションのファイル構造です

angular2-app
|_ app
| |_ app.component.ts
| |_ main.ts
|_ index.html
|_ license.md

要約すると、app ファイルの下にある、index.html ファイルと 2 つの Typescript ファイルです。

以下では、そのようなプログラムを段階的に構築します。

1. 開発環境の構成
2. Angular 初期化コンポーネントを作成します
3. メインのindex.htmlページを制御するように指示します
4. index.html ページを作成します

開発環境のセットアップ

フォルダーの作成

mkdir angular2-app
cd  angular2-app

TYPESCRIPT を構成する

Typesript をコンパイルするには、いくつかの特別な設定が必要です。
新しい tsconfig.json ファイルを作成し、プロジェクトのルート ディレクトリに配置し、構成を入力します

{
 "compilerOptions": {
  "target": "es5",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
 },
 "exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
 ]
}

この tsconfig.json については、後の付録で詳しく説明します

タイプスクリプトの入力

一部の Javascript 環境変数と構文を継承する Javascript ライブラリは数多くありますが、Typescript コンパイラーはこれらをネイティブにサポートできません。 そこで、これらの互換性の問題を解決するために、Typescript の型定義ファイル、つまり d.ts ファイル (つまり、typings.json) を使用します。

typings.json ファイルを作成し、プロジェクトのルート ディレクトリに配置します

{
 "ambientDependencies": {
  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
 }
}

同様に、付録にさらに詳しい説明があります

必要なライブラリを追加します

依存ライブラリを管理するには npm を使用することをお勧めします。
プロジェクトのルート ディレクトリ

に package.json ファイルを作成します。

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
  "start": "concurrent /"npm run tsc:w/" /"npm run lite/" ",  
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install" 
 },
 "license": "ISC",
 "dependencies": {
  "angular2": "2.0.0-beta.7",
  "systemjs": "0.19.22",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15"
 },
 "devDependencies": {
  "concurrently": "^2.0.0",
  "lite-server": "^2.1.0",
  "typescript": "^1.7.5",
  "typings":"^0.6.8"
 }
}

付録では、さらに詳しい説明があります

これらの依存関係パッケージをインストールするには、

を実行するだけです。

npm install

このようにして、開発環境のセットアップが完了しました。

最初の ANGULAR コンポーネント

コンポーネントは Angular の最も基本的な概念です。 コンポーネントにはビューが含まれています。ビューは、情報を表示したり、ユーザーとの対話を完了するために使用されるページです。 技術的に言えば、コンポーネントはテンプレート ビューを制御するクラスです。アプリケーションの開発では多くのコンポーネントが作成されます。 コンポーネントを作成するのはこれが初めての試みなので、できるだけ単純にするようにしました。

アプリケーションのソース コードのサブディレクトリを作成します

プログラムをプロジェクト ルート ディレクトリの app サブディレクトリに配置することに慣れているため、最初にアプリ フォルダーを作成します

mkdir app
cd  app

コンポーネントファイルの作成

app フォルダーの下に app.component.ts ファイルを作成し、次の内容を入力します

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

このファイルを詳しく見てみましょう。ファイルの最後の行でクラスを定義します。

コンポーネントクラス

このファイル レベルでは、何も行わない空のコンポーネント クラス AppComponent を作成します。 実際にアプリケーションを開発するときは、プロパティやメソッド ロジックを追加するなど、このクラスを拡張できます。 この AppComponent クラスが空である理由は、スターター プログラムでこのクラスを使用する必要がないためです。

モジュール

Angular アプリケーションはモジュール式です。 これらには、特定の機能を実行する多くのモジュール ファイルが含まれています。
ほとんどのプログラム ファイルはコンポーネントなどをエクスポートします。 app.component.ts ファイルは AppComponent

をエクスポートします

エクスポート クラス AppComponent { }
エクスポートはファイルをモジュールに変換します。 通常、ファイル名 (拡張子なし) はモジュールの名前です。 したがって、app.component は最初のモジュールの名前です。

一部のより複雑なアプリケーションには、AppComponent から継承するサブコンポーネントがあり、多くのファイルとモジュールが含まれます。ただし、クイック スタート プログラムにはそれほど多くのコンポーネントは必要なく、1 つのコンポーネントで十分です。

コンポーネントが他のコンポーネントに依存している場合、Typescript アプリケーションで他のモジュールを導入する必要がある場合、それらを直接インポートできます。 例:

「./app.component」から {AppComponent} をインポートします
Angular はモジュールの集合であるモジュールでもあります。 したがって、Angular の機能が必要な場合は、Angular も導入します。

コンポーネントの注釈

クラスにアノテーションを追加すると、クラスは Angular コンポーネントになります。 Angular はアノテーションを使用して、ビューを構築する方法と、コンポーネントがアプリケーションの残りの部分とどのように統合されるかを理解します。

コンポーネントのアノテーションを定義するには、Component メソッドを使用します。このメソッドを使用するには、angular2/core を導入する必要があります。

import {Component} from 'angular2/core';

Typescript では、クラスにアノテーションを追加します。アノテーションの方法は、@ をプレフィックスとして使用するだけです。

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.

selector参数是一个 css 选择器， 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。

记住这个 my-app 元素，我们会在 index.html 中用到

template控制这个组件的视图， 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件

初始化引导

在 app 文件夹下创建 main.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);
我们需要做两个东西来启动这个应用

Angular自带的 bootstrap 方法

我们刚刚写好的启动组件

把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。

附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件

现在万事俱备，只差东风啦！

添加 INDEX.HTML 文件

首先回到项目的根目录，在根目录中创建index.html

<html>
 <head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
   System.config({
    packages: {    
     app: {
      format: 'register',
      defaultExtension: 'js'
     }
    }
   });
   System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

 </head>

 <!-- 3. Display the application -->
 <body>
  <my-app>Loading...</my-app>
 </body>

</html>

HMTL中三个部分需要说明一下：

加载我们需要的 javascript库， 附录中会有详细的介绍

配置了 System 并让他import 引入 main 文件

添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！

我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。

SystemJs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。

当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent 的注解，找到 my-app 这个HTML元素， 并将template 渲染进去。

编译然后运行

只需要在终端中输入

npm start

程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.

最终的结构

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules …
|_ typings …
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json