Angular2 基本練習

angular-cliでプロジェクト作成した主要なファイルを説明

投稿日:2017年3月21日 更新日:

当セクションではangular-cliの「ng new」コマンドで自動作成されたプロジェクトのスケルトンの主要ファイルについて説明したいと思います。angular-cliでAngular2の開発環境を構築している事が前提となります。angular-cliがセットアップされていない場合は、『Angular2の開発環境を構築(angular-cli)』を参考にしてください。

説明の前に『ng new』コマンドを実行してプロジェクトのファイルを作成します。当セクションでは作業ディレクトリの「C:\ng2test」にsample3のプロジェクトを作成します。コマンドの説明は『Angular-cliのngコマンドの説明』で確認して下さい。

 

フォルダ説明

・distフォルダ

「ng build」コマンドで製品版ビルド結果が出力されるフォルダです。「ng build」コマンドの実行で当該フォルダが作成されます。JavaScriptやCSSなどのファイルをまとめた実行可能なプログラムが出力されます。出力結果をWebサーバーにデプロイして公開します。

・node_moduleフォルダ

npmでインストールされたモジュールが保存されるフォルダです。

・srcフォルダ

TypeScript、HTML、CSSなどのソースファイルが含まれています。

・src/appフォルダ

TypeScript、HTML、CSSなどのソースファイルが含まれています。アプリケーションモジュールとルートコンポーネントが作成されます。

・src/assetsフォルダ

 

・src/environmentsフォルダ

ビルドのオプションで使用される環境設定ファイルを選択します。angular-cli.jsonで環境設定ファイルが定義されています。

・e2eフォルダ

 

ファイル説明

・angular-cli.json

angular-cliの動作を定義するプロジェクトファイル定義。プロジェクト情報定義、アプリケーション情報定義、テスト情報定義、追加JS,CSSファイル定義などを行います。

・package.json

アプリケーションで使用するパッケージやスクリプトを定義するファイルです。

・tslint.json

tslintの解析ルールの定義ファイル。tslintとはTypeScriptのソースコードを静的に解析して構文チェックを行うことで、潜在的な問題を検出してくれるコード品質管理ツールです。

・karma.conf.js

Karmaを使った単体テストに必要な設定ファイル。Karmaとはブラウザ上で単体テストを行う単体テストツールです。

・protractor.conf.js

Protractorのための設定ファイル。Protractorとは、WEBサイトのエンド・トゥー・エンド(E2E)テスト・フレームワークです。

・src/favicon.ico

ファビコンのファイルです。

・src/index.html

アプリケーションの既定のHTMLファイルです。ベースディレクトリ(ルートディレクトリ)やルートコンポーネントが定義されています。また、ビルド結果で出力されるindex.htmlの元ファイルになります。

・src/main.ts

アプリケーションのエントリポイントを示すファイルです(angular-cli.jsonファイルで定義されています)。ソースの中の処理では、実行環境によって製品版モードを有効にして、ブートストラップモジュールをsrc/app/appModule.tsファイルで定義されるAppModuleに定義しています。実行環境はビルドオプションによりangular-cli.jsonで定義されたsrc/environmentsフォルダ中のenvironment.tsとenvironment.prod.tsファイルのenvironmentクラスによって切替がお行われます。

・src/polyfills.ts

Polyfillを実現するためのライブラリを定義します。Polyfillとはレガシーブラウザであってもモダンブラウザと同等の機能を提供する方法のことです。src/main.tsにインポートされています。

・src/styles.css

アプリケーション全体で定義するCSSを記述するファイルです。

・src/tsconfig.json

TypeScriptコンパイラの設定ファイルです。

・src/app/app.module.ts

アプリケーションモジュールとして定義されます。src/main.tsによってブートストラップモジュールに指定されます。

・src/app/app.component.ts

アプリケーションのルートコンポーネントとして定義されます。src/app/app.module.tsによってアプリケーションモジュールのブートストラップモジュールに指定されます。

・src/app/app.component.html

app.component.tsのComponentデコレーターで定義されるルートコンポーネントのHTMLテンプレートファイルです。

・src/app/app.component.css

app.component.tsのComponentデコレーターで定義されるルートコンポーネントのCSS定義ファイルです。

 

 

スポンサーリンク

スポンサーリンク

-Angular2, 基本練習

執筆者:

関連記事

当サイトの環境環境

当サイトの投稿記事の開発環境は以下のように構成されています。 ・OS:Windows7(x64) ・WEBサーバ:IIS(Internet Information Service) ・Node.js ...

Angular2の開発環境を構築(angular-cli)

Angular2の開発環境をangular-cliで構築して、テストプロジェクト作成して実行テストまでを行います。 当サイトはangular-cliでAngular2を開発します。angular-cl ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...

SystemJSを使ったWEBフロントエンド開発

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...

(webpack2)TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...