Angular チュートリアル => Angularを使い始める

備考

Angular （一般に「 Angular 2+ 」または「 Angular 2 」と呼ばれます）は、GoogleのAngularチームと個人や企業のコミュニティが率いるTypeScriptベースのオープンソースのフロントエンドWebフレームワークです。複雑なWebアプリケーションを構築しながら開発者のワークフローの一部を管理します。 Angularは、 AngularJSを構築した同じチームの完全な書き換えです。 ¹

このフレームワークはいくつかのライブラリで構成されており、その中にはコア（例えば角@ /コア）とオプションのもの（ @角/アニメーション）があります。

Angularizedマークアップを使用してHTML テンプレートを作成し、これらのテンプレートを管理するためのコンポーネントクラスを作成し、 サービスでアプリケーションロジックを追加し、 モジュールでボクシングコンポーネントとサービスを追加することによって、Angularアプリケーションを作成します。

その後、 ルートモジュールを ブートストラップすることでアプリケーションを起動します。アプリケーションのコンテンツをブラウザに表示し、提供した手順に従ってユーザーの操作に応答します。

おそらく、Angularアプリケーションを開発する上で最も基本的な部分はコンポーネントです。コンポーネントは、HTMLテンプレートと画面の一部を制御するコンポーネントクラスの組み合わせです。単純な文字列を表示するコンポーネントの例を次に示します。

src / app / app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
    name = 'Angular';
}

すべてのコンポーネントは、メタデータオブジェクトを@Componentデコレータ関数で始まります。メタデータオブジェクトは、HTMLテンプレートとコンポーネントクラスがどのように連携して動作するかを記述します。

selectorプロパティは、 index.htmlファイルのカスタム<my-app>タグ内にコンポーネントを表示するようにAngularに指示します。

index.html（ bodyタグ内）
<my-app>Loading AppComponent content here ...</my-app>

テンプレートプロパティは、 <h1>ヘッダー内にメッセージを定義します。メッセージは "Hello"で始まり、 {{name}}で終わります。これはAngular 補間バインディング式です。実行時に、Angularは{{name}}をコンポーネントのnameプロパティの値で置き換えます。補間バインディングは、このドキュメントで紹介する多くの角度機能の1つです。この例では、コンポーネントクラスのnameプロパティを'Angular'から'World' 、何が起こるかを確認します。

この例は、JavaScriptのスーパーセットであるTypeScriptで記述されています。 Angularでは、タイプによって、ツールを使用して開発者の生産性を容易にサポートできるため、TypeScriptが使用されます。さらに、 ほとんどすべてのサポートはTypeScript用であり、 プレーンJavaScriptを使用してアプリケーションを記述するのは難しいでしょう。しかし、JavaScriptで角コードを書くことは可能です。このガイドはどのように説明します。

Angularのアーキテクチャに関する詳細はこちらをご覧ください

バージョン

バージョン	発売日
5.0.0-beta.1（最新）	2017-07-27
4.3.2	2017-07-26
5.0.0-beta.0	2017-07-19
4.3.1	2017-07-19
4.3.0	2017-07-14
4.2.6	2017-07-08
4.2.5	2017-06-09
4.2.4	2017-06-21
4.2.3	2017-06-16
4.2.2	2017-06-12
4.2.1	2017-06-09
4.2.0	2017-06-08
4.2.0-rc.2	2017-06-01
4.2.0-rc.1	2017-05-26
4.2.0-rc.0	2017-05-19
4.1.3	2017-05-17
4.1.2	2017-05-10
4.1.1	2017-05-04
4.1.0	2017-04-26
4.1.0-rc.0	2017-04-21
4.0.3	2017-04-21
4.0.2	2017-04-11
4.0.1	2017-03-29
4.0.0	2017-03-23
4.0.0-rc.6	2017-03-23
4.0.0-rc.5	2017-03-17
4.0.0-rc.4	2017-03-17
2.4.10	2017-03-17
4.0.0-rc.3	2017-03-10
2.4.9	2017-03-02
4.0.0-rc.2	2017-03-02
4.0.0-rc.1	2017-02-24
2.4.8	2017-02-18
2.4.7	2017-02-09
2.4.6	2017-02-03
2.4.5	2017-01-25
2.4.4	2017-01-19
2.4.3	2017-01-11
2.4.2	2017-01-06
2.4.1	2016年12月21日
2.4.0	2016-12-20
2.3.1	2016年12月15日
2.3.0	2016-12-07
2.3.0-rc.0	2016-11-30
2.2.4	2016-11-30
2.2.3	2016-11-23
2.2.2	2016-11-22
2.2.1	2016-11-17
2.2.0	2016-11-14
2.2.0-rc.0	2016-11-02
2.1.2	2016-10-27
2.1.1	2016-10-20
2.1.0	2016-10-12
2.1.0-rc.0	2016-10-05
2.0.2	2016-10-05
2.0.1	2016-09-23
2.0.0	2016-09-14
2.0.0-rc.7	2016-09-13
2.0.0-rc.6	2016-08-31
2.0.0-rc.5	2016-08-09
2.0.0-rc.4	2016年6月30日
2.0.0-rc.3	2016年6月21日
2.0.0-rc.2	2016-06-15
2.0.0-rc.1	2016-05-03
2.0.0-rc.0	2016-05-02

angle-cliを使用した角度のインストール

この例は、Angularの簡単な設定と簡単なサンプルプロジェクトの生成方法です。

前提条件：

Node.js 6.9.0以上。
npm v3またはそれ以上または糸。
タイプ v1以上。

ターミナルを開き、コマンドを1つずつ実行します。

npm install -g typingsまたはyarn global add typings

npm install -g @angular/cliまたはyarn global add @angular/cli

最初のコマンドは、インストールタイピングライブラリをグローバル（および追加typings PATHに実行可能ファイルを）。第二は、実行可能な追加、グローバル角度/ CLI @インストールng PATHに。

新しいプロジェクトをセットアップするには

新しいプロジェクトを設定するフォルダに移動します。

次のコマンドを実行します。

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

つまり、Angularで作成した簡単なサンプルプロジェクトがあります。これで、端末に表示されているリンクに移動し、そのリンクが何を実行しているかを見ることができます。

既存のプロジェクトに追加するには

現在のプロジェクトのルートに移動します。

次のコマンドを実行します。

ng init

これにより、プロジェクトに必要な足場が追加されます。ファイルは現在のディレクトリに作成されるので、空のディレクトリで実行してください。

ローカルでプロジェクトを実行する

ブラウザで実行中にアプリケーションを表示したり操作したりするには、プロジェクトのファイルをホストするローカル開発サーバーを起動する必要があります。

ng serve

サーバーが正常に開始された場合は、サーバーが実行されているアドレスが表示されます。通常これは：

http://localhost:4200

このローカル開発サーバーは、Hot Module Reloadingに接続されているので、html、typescript、またはcssを変更すると、ブラウザが自動的に再読み込みされます（ただし、必要に応じて無効にすることができます）。

コンポーネント、ディレクティブ、パイプおよびサービスの生成

ng generate <scaffold-type> <name> （または単にng g <scaffold-type> <name> ）コマンドを使用すると、Angularコンポーネントを自動的に生成できます。

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false

angle-cliが生成することができる足場には、いくつかのタイプが考えられます。

足場タイプ	使用法
モジュール	`ng g module my-new-module`
成分	`ng g component my-new-component`
指令	`ng g directive my-new-directive`
パイプ	`ng g pipe my-new-pipe`
サービス	`ng g service my-new-service`
クラス	`ng g class my-new-class`
インタフェース	`ng g interface my-new-interface`
列挙型	`ng g enum my-new-enum`

型名を最初の文字で置き換えることもできます。例えば：

ng gm my-new-moduleを使用して新しいng gm my-new-moduleを生成するか、またはng gc my-new-componentを使用してコンポーネントを作成します。

ビルディング/バンドル

すべてAngular Webアプリケーションの構築が完了し、Apache TomcatのようなWebサーバーにインストールしたい場合は、プロダクションフラグが設定されているかどうかにかかわらずbuildコマンドを実行するだけです。プロダクションはコードを最小化し、プロダクション設定を最適化します。

ng build

または

ng build --prod

次に、プロジェクトのルートディレクトリで/distフォルダを探します。そこにはビルドが含まれています。

小規模なプロダクションバンドルの利点をご希望の場合は、Ahead-of-Timeテンプレートコンパイルを使用して、最終ビルドからテンプレートコンパイラを削除することもできます。

ng build --prod --aot

ユニットテスト

Angularは組み込みの単位テストを提供し、angular-cliで作成されたすべてのアイテムは基本単位テストを生成します。ユニットテストはジャスミンを使って書かれ、カルマを通して実行されます。テストを開始するには、次のコマンドを実行します。

ng test

このコマンドは、プロジェクト内のすべてのテストを実行し、ソースファイルが変更されるたびに、アプリケーションのテストまたはコードであるかどうかにかかわらず、それらを再実行します。

詳細については、 angi-cli github pageをご覧ください。

角度のある "Hello World"プログラム

前提条件：

開発環境の設定

開始する前に、環境をセットアップする必要があります。

Node.jsとnpmがマシンにインストールされていない場合は、それらをインストールします。
ターミナル/コンソールウィンドウでnode -vとnpm -vを実行して、少なくともノード6.9.xとnpm 3.xxを実行していることを確認します。古いバージョンではエラーが発生しますが、新しいバージョンで問題ありません。
npm install -g @angular/cliを使用してAngular CLIをグローバルにインストールします。