用 [Angular] Angular CLI 创建的项目结构进行查看
首先
本文记录的是基于 Angular v4.x.x 的内容，但目前的 Angular 版本是 v6.x.x（截至2018年8月7日），所以文章中的内容已经过时了。
请查阅 Angular 日本语文档以获取有关项目文件的最新信息。
本文的主要内容
由于之前没有写很多关于Angular的文章，所以我决定逐渐增加一些文章，也兼作备忘录。首先，在介绍部分，我会解释一下使用Angular CLI生成的项目结构。
虽然以下说明相当冗长，或者说是关于目录和文件的描述，所以这篇文章有点无聊。不过我认为了解在Angular中创建应用程序的结构是很有必要的。
如果在后文中对目录中的内容进行解释，将该项用彩色标记。
首先，Angular 是什么。
在进入项目结构的说明之前，首先要从Angular是什么开始解释。
Angular 是由 Google 提供的 JavaScript 框架，以组件化的方式构建。这里所说的组件指的是构成页面的 UI 元素，包括逻辑、视图和样式的定义。
使用Angular，我们将通过组合这个组件来构建应用程序。
组件基本上是独立的部件，组件的样式只适用于所定义的组件。换句话说，它不会与其他组件定义的样式发生冲突。
TypeScript 被推荐作为开发语言。原版教程也是用 TypeScript 进行讲解的，所以如果没有特别的厌恶理由的话，最好选择用 TypeScript 进行开发。
从下面的项目配置开始，解释由Angular CLI生成的项目结构｡
在哪个环境下实施了这个文章。
-
- Windows10 Home 64bit
-
- node v8.2.1
-
- npm v4.0.5
-
- angular/cli v1.2.6
- Angular v4.3.2
项目目录
用Angular CLI创建的项目目录结构如下：
首先从项目目录下的文件和文件夹开始解释。
$ ng new my-app
$ cd my-app
$ ls -l
total 281
drwxr-xr-x 1 hogehoge 197121 0 9月 24 16:03 e2e/
-rw-r--r-- 1 hogehoge 197121 924 9月 24 16:03 karma.conf.js
drwxr-xr-x 1 hogehoge 197121 0 9月 24 16:06 node_modules/
-rw-r--r-- 1 hogehoge 197121 1311 9月 24 16:03 package.json
-rw-r--r-- 1 hogehoge 197121 722 9月 24 16:03 protractor.conf.js
-rw-r--r-- 1 hogehoge 197121 1075 9月 24 16:03 README.md
drwxr-xr-x 1 hogehoge 197121 0 9月 24 16:03 src/
-rw-r--r-- 1 hogehoge 197121 363 9月 24 16:03 tsconfig.json
-rw-r--r-- 1 hogehoge 197121 3040 9月 24 16:03 tslint.json
e2e/
End To End テスト関連のディレクトリ｡
karma.conf.js
ユニットテストのテストランナー Karma の設定ファイル｡ユニットテストの設定はここに記述する｡
node_modules/
このプロジェクトで利用する npm ライブラリの配置先｡
npm install を -g をつけないで実行すると､このディレクトリ配下にインストールされる｡
package.json
npm の設定ファイル｡このプロジェクトで利用するライブラリ情報を管理する｡
npm install で –save や –save-dev をつけて実行した場合､このファイルに自動で情報が追記される｡
逆にこのファイルに記載されてさえいれば､ npm install を引数無しで実行した場合にプロジェクトに必要なライブラリがインストールされる｡
protractor.conf.js
E2E テストのテストランナー Protractor の設定ファイル｡
E2E テストの設定はここに記述する｡
README.md
このプロジェクトの説明ファイル｡
具体的には作成するアプリについての説明を記述する｡
src/
このプロジェクトで作成するアプリ本体を格納するディレクトリ｡
実装していくコードはここに配置していく｡
tsconfig.json
TypeScript を JavaScript にトランスパイルための設定情報ファイル｡
(Angular は基本的に TypeScript で実装していく)
tslint.json
TSLint の設定情報｡
src/下的文件
我已经查看了项目下的结构，接下来要确认的是要创建的应用主体，即 src/ 目录下。
$ cd src/
$ ls -l
total 30
drwxr-xr-x 1 hogehoge 197121 0 9月 24 16:03 app/
drwxr-xr-x 1 hogehoge 197121 0 9月 24 16:03 assets/
drwxr-xr-x 1 hogehoge 197121 0 9月 24 16:03 environments/
-rw-r--r-- 1 hogehoge 197121 5430 9月 24 16:03 favicon.ico
-rw-r--r-- 1 hogehoge 197121 292 9月 24 16:03 index.html
-rw-r--r-- 1 hogehoge 197121 336 9月 24 16:03 main.ts
-rw-r--r-- 1 hogehoge 197121 2480 9月 24 16:03 polyfills.ts
-rw-r--r-- 1 hogehoge 197121 80 9月 24 16:03 styles.css
-rw-r--r-- 1 hogehoge 197121 1085 9月 24 16:03 test.ts
-rw-r--r-- 1 hogehoge 197121 211 9月 24 16:03 tsconfig.app.json
-rw-r--r-- 1 hogehoge 197121 304 9月 24 16:03 tsconfig.spec.json
-rw-r--r-- 1 hogehoge 197121 104 9月 24 16:03 typings.d.ts
app/
Angular アプリのコード一式
assets/
画像ファイルや npm 以外で導入する JavaScript ライブラリ等を配置する｡
environments/
本番(Product)環境とか開発(Development)環境とか､環境設定情報を記述したファイルを配置する｡
favicon.ico
favicon｡ブックマーク時のアイコン｡
index.html
アプリのトップページ｡
ここで読み込まれた Angular モジュールを元にアプリが構成されていく｡
main.ts
スタートアップファイル｡
アプリを起動するためのスタートアップコードを記述する｡
polyfills.ts
polyfill の設定情報を管理する｡
Angular が提供する機能に対応できていないブラウザにアプリを適応させたい場合､ここを編集する｡
例えば Angular アプリを IE11 に対応させたい場合など｡
styles.css
スタイルシート｡
グローバルで適用させたい CSS はここに記述する｡
test.ts
ユニットテストの設定ファイル｡
tsconfig.app.json
TypeScript を JavaScript にトランスパイルための設定情報ファイル｡
アプリ用｡
tsconfig.spec.json
TypeScript を JavaScript にトランスパイルための設定情報ファイル｡
テストコード用｡
typings.d.ts
TypeScript の型定義情報を管理する｡
源代码/app/ 目录下
请查看 src/app/ 目录下放置 Angular 应用程序的全部代码。
$ cd app/
$ ls -l
total 10
-rw-r--r-- 1 hogehoge 197121 0 9月 24 16:03 app.component.css
-rw-r--r-- 1 hogehoge 197121 1785 9月 24 16:03 app.component.html
-rw-r--r-- 1 hogehoge 197121 991 9月 24 16:03 app.component.spec.ts
-rw-r--r-- 1 hogehoge 197121 207 9月 24 16:03 app.component.ts
-rw-r--r-- 1 hogehoge 197121 314 9月 24 16:03 app.module.ts
app.component.css
app.component という Angular コンポーネントの css テンプレートを記述する｡
app.component.html
app.component という Angular コンポーネントの html テンプレートを記述する｡
app.component.spec.ts
app.component という Angular コンポーネントのユニットテストを記述する｡
app.component.ts
app.component という Angular コンポーネントの実装コードを記述する｡
app.module.ts
この Angular プロジェクトで作成するアプリの ルートモジュールを記述する｡
结束
由于已经查看了项目的结构，包括各个目录和文件，下一步将查看创建应用程序所需的文件内容。
具体来说，
-
- src/
index.html
main.ts
src/app/
app.component.css
app.component.html
app.component.ts
app.module.ts
我会继续观察。 (I will continue to observe.)
