Angular入門！ プロジェクト構成ををご紹介します

こんにちは、昼間です。
 
今回は、Angularの自動作成したプロジェクトの各構成について説明していきます。

プロジェクト構成

Angularでのプロジェクトの生成については、以下のブログを参照してください。
Angular入門！ 環境構築からプロジェクト実行までの手順をご紹介します
 
早速下記に生成されたプロジェクトの構成を記載します。

フォルダの説明

下記に各フォルダとファイルの簡単な説明をしていきます。

karma.conf.js

ユニットテストのテストランナー Karma の設定ファイル｡ユニットテストの設定はここに記述します｡

package.json

npm の設定ファイル｡このプロジェクトで利用するライブラリ情報を管理します｡

README.md

このプロジェクトの説明ファイル｡作成するアプリについての説明を記述します｡

tsconfig.json

TypeScript を JavaScript にトランスパイルための設定情報ファイル｡

e2e/

End To End テスト関連のディレクトリ

node_modules/

このプロジェクトで利用する npm ライブラリの配置先｡

src/

このプロジェクトで作成するアプリ本体を格納するディレクトリ｡実装していくコードはここに配置します｡

ファイルの説明

続いて、作成するアプリ本体であるsrc/配下の説明をしていきます。

favicon.ico

favicon｡ブックマーク時のアイコン｡

index.html

アプリのトップページ｡

main.ts

スタートアップファイル｡アプリを起動するためのスタートアップコードを記述します｡

styles.css

スタイルシート｡グローバルで適用させたい CSS はここに記述します｡

test.ts

ユニットテストの設定ファイル｡

assets/

画像ファイルや npm 以外で導入する JavaScript ライブラリ等を配置します｡

environments/

本番(Product)環境とか開発(Development)環境とか､環境設定情報を記述したファイルを配置します｡

app/

Angular アプリ関連のコード一式

app/component.ts

ルートコンポーネント

app/component.spec.ts

コンポーネントのテストスクリプト

app/module.ts

ルートモジュール

最後に

今回でAngularについての基本的な説明は終了となります。
 
次回からは、Angularの便利なライブラリについてご紹介していきたいと思います。
 
 
 
 
《関連記事》

• 噂のNode.jsをはじめてみよう！ WindowsにNode.jsをインストールして環境構築
• Angular入門！ 環境構築からプロジェクト実行までの手順をご紹介します