I. 概要
- Angular プロジェクト ディレクトリの紹介
- Angular プログラムの開始方法
2 つの Angular プロジェクト ディレクトリの紹介
2.1 プロジェクトディレクトリ
2.2 ディレクトリ構造の説明
ワークスペース構成ファイル
- node_modules : サードパーティの依存パッケージが保存されるディレクトリ
- src: アプリケーションのソースコードディレクトリ
- angular-cli.json: Angular コマンドライン ツールの構成ファイル。jquery などの他のサードパーティ パッケージを導入するために後で変更される可能性があります。
- package.json: これは標準の npm ツール構成ファイルで、アプリケーションで使用されるサードパーティの依存関係パッケージがリストされています。実際、新しいプロジェクトに取り組んでいたとき、サードパーティの依存関係パッケージをダウンロードするのに半日かかりました。ダウンロードが完了すると、node_modules ディレクトリに配置されます。このファイルは後で変更できます。
- README.md: ドキュメント
- tsconfig.app.json: TypeScript コンパイラー構成。このファイルは、サードパーティの依存関係が追加されると変更されます。
- tsconfig.json: このプロジェクトのコンパイルに使用されるルート ファイルとコンパイル オプションは、ファイル内で指定されます
- tsconfig.spec.json :ライブラリのテスト時に使用されるTypeScript構成
アプリケーションプロジェクトファイル(src)
- app ディレクトリ: アプリケーションのコンポーネントとモジュールが含まれており、書きたいコードはこのディレクトリにあります。
- アセットディレクトリ: 画像、CSS、JS などの静的リソースを保存するリソースディレクトリ。
- Index.html: アプリケーション全体のルート HTML。プログラムはこのページへのアクセスを開始します。
- main.ts: プロジェクト全体のエントリ ポイント。Angular はこのファイルを通じてプロジェクトを開始します。
- styles.less: 主にいくつかのグローバル スタイルを配置します。
コンポーネント構成ファイル (SRC/APP/ファイル)
- app/app.component.ts: アプリケーションのルートコンポーネントのロジックを定義します。
AppComponent - app/app.component.html: ルートコンポーネントに
AppComponent関連付けられた - app/app.component.css: ルートコンポーネントに
AppComponent関連付けられた - app/app.component.css: ルートコンポーネントのベースCSSスタイルシート
AppComponentを定義します - app/app.component.spec.ts: ルートコンポーネントの単体テストを
AppComponent定義します - app/app.module.ts:
AppModuleという名前の。これは、Angular にアプリケーションのアセンブル方法を指示します。 - app/app-routing.module.ts: Angular ルーティング モジュール
3 つの Angular プログラムを開始する方法
3.1 起動プロセスの概略図
3.3 起動プロセスの説明
1-Angular アプリケーションは、まず angular-cli.json 構成ファイルに移動して、起動時にロードされるページとスクリプトを見つけます。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"projectType": "application",
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "tsconfig.app.json",
},
}
}
説明: デフォルトでは、index.html と main.ts をロードします。
2- 次に、main.ts に移動して、宣言で指定されたメイン モジュールを見つけます。デフォルトのメイン モジュールは app.module です。
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
3- 次に、app.module に移動して、指定されたメインコンポーネントを見つけます。デフォルトのメインコンポーネントは app.component です。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
4- 次に、app.component に移動して、指定されたセレクター、テンプレート、スタイルなどを見つけます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'my-app';
}
5- 最後に、index.html のセレクターにコンポーネントをレンダリングします。
<!doctype html>
<html lang="en">
<body>
<app-root></app-root>
</body>
</html>