Angular 学習ノート 1: プロジェクトの構築とモジュールの作成

1. はじめに

Angular は 3 つの主要なフレームワークの 1 つであり、最も古くから人気のあるフレームワークです。これは、HTML、CSS、TypeScript を使用して書かれた重量級のフレームワークであり、大規模なアプリケーション開発向けに設計されています。Angular を使用して開発されたクライアントアプリケーションは高度にモジュール化されています。Angular には cli ツールが用意されており、cli ツールが提供するコマンドラインを使用してコンポーネントとモジュールを作成できます。Angular は状態管理に非常に優れており、コンポーネント間でデータを簡単に共有できます。

2. 角度のあるアーキテクチャ

(1) モジュール

Angular アプリケーションはモジュールで構成されます。ここでのモジュールは ngModel で、Angular でコード構造を整理する方法です。Angular アプリケーションには、ルートモジュールと呼ばれる ngModel が少なくとも 1 つあります。ルートモジュールは、Angular アプリケーションの起動時に使用されます。Angular では、ESModel と ngModel が同時に使用されます。ESModel はファイルに基づいており、ngModel は複数のファイルで構成できます。ngModel は NgModel によって装飾されたクラスです。

(2) 構成要素

コンポーネントはユーザーインターフェイスを記述するために使用され、コンポーネントクラス (インターフェイスロジック)、コンポーネントテンプレート (HTML)、およびコンポーネントスタイル (スタイル: cssless scss) の 3 つの部分で構成されます。
Angular には、プロジェクトの開始に使用されるルートコンポーネントが少なくとも 1 つあります。コンポーネントクラスは、コンポーネントデコレータで装飾されたクラスです。コンポーネントは ngModel に属している必要があり、ngModel はコンポーネントのコンパイル時のコンテキストを提供します。同じコンポーネントが 2 つのモジュールに属することはできません。他のモジュールがこのコンポーネントを使用したい場合は、現在のモジュールをインポートする必要があります。

(3) サービス

サービスは、複数のコンポーネント間で共有できるデータまたはロジックを配置するために使用されます。サービスは、コードをコンポーネントクラスから分離するために使用されます。サービスは、Injectable デコレータで装飾されたクラスです。
Angular のサービスはシングルトンとして設計されており、これがコンポーネント間でデータを共有するための基礎でもあります。サービスはクラスです。サービスクラスを使用する場合、前のロジックによれば、そのクラスを使用するにはそのクラスのインスタンスオブジェクトを
作成する必要があります。ただし、サービスとコンポーネントは高度に分離されており、サービスのパラメータは異なる場合があります。new Service()変更されたため、サービスクラスを使用する場合、newキーワードを使用してサービスクラスのインスタンスを作成することはできません。
実際、Angular の組み込み依存関係注入システムは、サービスインスタンスオブジェクトを自動的に作成します。
コンポーネントでサービスを使用するには、コンストラクターで仮パラメーターを渡し、型を通じてどのサービスを導入する必要があるかを Angular に伝えるだけです。

import {
    
     AppService } from "./AppService"

export class AppComponent {
    
    
  constructor (
  	private appService: AppService
  ) {
    
    }
}

private意味：

appService は現在のコンポーネントのプロパティとして使用されます。
appService はコンポーネントクラスでのみ使用でき、コンポーネントテンプレートでは使用できません。

3. AngularCLI を使用して Angular プロジェクトを作成する

クリックして AngularCLI 公式 Web サイトに移動します

(1) 作成する

インストールコマンド:cnpm i @angular/cli
プロジェクトを作成します:ng new angular-base --minimal --inline-template false
新しいNGのサフィックスリスト

サフィックス	略語	意味	データの種類	デフォルト値
–skip-git		git リポジトリの初期化をスキップする	ブール値	間違い
–最小限		単体テストを行わずに必要最低限のプロジェクトを作成する	ブール値	間違い
–スキップインストール		モジュールのインストールをスキップする	ブール値	間違い
–インラインテンプレート	-t	最小状態ではhtmlファイルとtsファイルが一つのファイルになっていますが、このコマンドによりtsファイルからhtmlファイルを抽出することができます。	ブール値
–インラインスタイル	-s	クラスファイルからスタイルファイルを抽出する	ブール値
–プレフィックス	-p	angular-cliで作成したコンポーネントのプレフィックスを変更する	弦	アプリ

(2) 建設プロジェクト

プロジェクトを初期化した後、プロジェクトを実行するコマンドが package.json 内で初期化されます。つまり、ngserve
ここに画像の説明を挿入します
ngserve にはいくつかのサフィックス名が付いています。

サフィックス	意味
-開ける	アプリケーションが構築されたら、ブラウザで開きます
–hmr	ホットアップデートを有効にする
–oprt	アプリケーションの実行ポートを変更する

(3) プロジェクトビルド時の初期化ファイル解析

main.ts

// Angular应用程序的启动在不同平台上是不一样的
// 在浏览器中启动需要引入platformBrowserDynamic，该方法返回平台实例对象
import {
    
     platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 引入根模块 用于启动应用程序
import {
    
     AppModule } from './app/app.module';

// 启动应用程序
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(err => console.error(err));

アプリ/app.module.ts

// ngModule是Angular的模块装饰器
import {
    
     NgModule } from '@angular/core';
// BrowserModule是浏览器解析的模块
// CommonModule提供各种服务和指令，比如NgIf、NgFor等,它是一个通用模块，可以在任何平台上使用
// BrowserModule导入了CommonModule，又重新导出了CommonModule，所以在浏览器中使用CommonModule时，只需要导入BrowserModule
import {
    
     BrowserModule } from '@angular/platform-browser';
// 引入根组件
import {
    
     AppComponent } from './app.component';

// 使用@ngModule装饰器来定义一个模块，
// @ngModule装饰器接受一个元数据对象
@NgModule({
    
    
    // 声明当前模块拥有哪些组件
  declarations: [
    AppComponent
  ],
    // 声明当前模块依赖哪些模块
  imports: [
    BrowserModule
  ],
    // 声明当前模块拥有哪些服务，这些服务只能在当前组件中使用
  providers: [],
    // 可引导组件，Angular会在引导过程中把它加载到DOM中
  bootstrap: [AppComponent]
})

export class AppModule {
    
     }

app/app.component.ts

import {
    
     Component } from '@angular/core';

@Component({
    
    
  // 指定组件的使用方法
    // app-root => <app-root></app-root>
    // [app-root] => <div app-root></div>
    // .app-root => <div class="app-root"></div>
  selector: 'app-root',
  // 当前组件对应模版
  // tempalte/templateUrl
  templateUrl: './app.component.html',
  // 组件样式文件
  // styles/styleUrls
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
    
  title = 'angular-base';
}

4.index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularBase</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></app-root>
</body>
</html>

4. 共有モジュール

共有モジュールは、Angular アプリケーションのモジュールレベルで共有する必要があるコンポーネントまたはロジックです。

共有モジュールng g m sharedg を作成 -> m を生成 -> モジュール
共有モジュールコンポーネントng g c shared/components/Layoutc->componentを作成し
てパスを追加する利点は、コンポーネントがモジュールに自動的に導入されることです。
共有ファイルのエクスポート: モジュールに依存するモジュールが共有コンポーネントを使用できるように、共有コンポーネントをモジュール内でエクスポートする必要があります。

ルートコンポーネントで共有モジュールを使用する

app.module.ts にモジュールを導入し、モジュールを宣言します

import {
      
       SharedModule } from './shared/shared.module';
//--------------------------------------------------------------
// ngModule内：
imports: [BrowserModule, SharedModule],

マークアップフォームを使用して app.component.html で app-layout を使用する

<div>app-root</div>
<app-layout></app-layout>