Angularのチュートリアルです
目次
はじめに
公式のチュートリアルをベースにやってみましょう。
インストールと準備
Angular が必要とする node.js のバージョンの特定
Angularを利用するにはNodeのアクティブLTS版、またはメンテナンスLTS版が必要なので、揃えます。
Angular の最新版をインストール
node.js と npm がインストールされたら、次はAngularを効果的に開発するためのツールを提供するAngular CLIをインストールします。
次のコマンドを実行します。
npm install -g @angular/cli
統合開発環境(IDE)のインストール
VSCodeが推奨されているようです。
また、Angular Language ServiceのExtensionsも入れておくと良いようです。
サンプルプロジェクトのダウンロード
- first-app-lesson-00.zipをダウンロードして、展開します。
展開したディレクトリで、VSCodeを立ち上げます。
依存関係のインストール
npm install
デフォルトアプリケーションのビルドとサーブ
ng serve
確認
以下にアクセスして動作を確かめます。
http://localhost:4200
Default
プロジェクト内のファイルを確認
src ディレクトリ
index.htmlはアプリケーショントップレベルの HTML テンプレートです。style.cssはアプリケーショントップレベルのスタイルシートです。main.tsはアプリケーションの実行を開始する場所です。favicon.icoはどのウェブサイトにあるようなアプリケーションのアイコンです。
srcディレクトリの直下を / とします。
/app ディレクトリ
-
app.component.tsは app-root コンポーネントを記述するためのソースファイルです。 これは、アプリケーションのトップレベルの Angular コンポーネントです。コンポーネントは、Angular アプリケーションの基本的な構成要素です。 コンポーネントの記述には、コンポーネントのコード、HTML テンプレート、スタイルが含まれており、このファイルに記述することも、別のファイルに記述することもできます。
このアプリケーションでは、スタイルは別のファイルに、コンポーネントのコードと HTML テンプレートはこのファイルに入っています。 -
app.component.cssはこのコンポーネントのスタイルシートです。 -
今後、このディレクトリに新しいコンポーネントが追加されます。
/assets ディレクトリ
- アプリケーションで使用する画像を含む画像ディレクトリ
その他、Angularアプリケーションのビルドや実行のために必要なサポートファイル
.angularは Angular アプリケーションをビルドするために必要なファイルがあります。.e2eはアプリケーションのテストに使用されるファイルがあります。.node_modulesはアプリケーションが使用する node.js のパッケージがあります。angular.jsonはアプリケーションビルドツールのために Angular アプリケーションを記述します。package.jsonは完成したアプリケーションを実行するために npm (node パッケージマネージャー) によって使用されます。tsconfig.*は TypeScript コンパイラに対するアプリケーションの設定を記述するファイルです。
Hello World
index.html を編集
- first-app/src/index.html を開いて、
<title>を編集します。<title>Homes</title>
app.component.ts を編集
-
app.component.tsの@Component定義で, template 行を次のコードに置き換えます。template: `<h1>Hello world!</h1>`,
-
app.component.tsのAppComponentクラス定義で、title 行を次のコードに置き換えます。title = 'homes';
確認
- ブラウザを確認するとタイトルが
Homesに、bodyがHello Worldに書き換わっているのが分かります。localhost:4200