Angular: プロジェクトのファイル


前提


ドキュメント


ワークスペースの内容: ワークスペースだけ作成のとき

ng new ワークスペース名 --create-application=false  --defaults
.editorconfig
.git/
.gitignore
README.md
angular.json
node_modules/
package-lock.json
package.json
tsconfig.json
tslint.json

プロジェクト・ルートの内容: 新規プロジェクト作成のとき

ng generate application --enableIvy=true プロジェクト

projects/プロジェクト/にすぐ動くウェルカムアプリができる。

projects/プロジェクト/
├── browserslist
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── tslint.json

特に、src/以下のファイルを編集する。


アプリのブートの流れ

  1. エントリーポイント
    • src/main.ts
  2. ルートモジュール
    • AppModule(src/app/app.module.ts)
  3. ルートコンポーネント
    • AppComponent(src/app/app.component.ts)
  4. その他コンポーネント、ユーザの操作

エントリーポイント: src/main.ts

// (中略)
platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log(`アプリブート成功`)) // 追加: ブラウザのコンソール表示
  .catch(err => console.error(err))

ルートモジュールAppModule: src/app/app.module.ts

// 初期状態
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ルートコンポーネントAppComponent: src/app/app.component.ts

テンプレートやスタイルと連携してページを表現する。

// 初期状態
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'プロジェクト名'; // プロパティ
}

コンポーネントを構成するファイル

ルートコンポーネントAppComponentなら、


コンポーネント以外に編集するもの


src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>プロジェクト</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>