AMG Solution

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

feels

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

プロジェクト構成

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

my-cli
  |- karma.conf.js
  |- package.json
  |- README.md
  |- tsconfig.app.json
  |- tsconfig.json
  |- tsconfig.spec.json
  |- e2e/
  |- node_modules/
  |- src/
    |- favicon.ico
    |- index.html
    |- main.ts
    |- style.css
    |- polyfills.ts
    |- test.ts
    |- assets/
    |- environments/
    |- app/
      |- app.component.css
      |- app.component.html
      |- app.component.ts
      |- app.component.spec.ts
      |- app.module.ts

フォルダの説明

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

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の便利なライブラリについてご紹介していきたいと思います。
 
 
 
 
《関連記事》

feels recruit

HIRUMA'S BLOG

昼間の記事

昼間の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

feelsでSFA・CRM
はじめました。
LOADING