コードを整理するためのAngularモジュールを作成する

このチュートリアルでは、コードを整理するためのAngularモジュールを作成する方法を説明します。機能モジュールは、コードを整理するためのNgModuleです。アプリの拡張に合わせて、特定の機能に関連するコードを整理できます。さらに、機能モジュールは、機能に明確な境界を適用するのに役立ちます。機能モジュールを使用すると、特定の機能または機能に関連するコードを他のコードから分離しておくことができます。

白黒機能モジュールとルートモジュールの違い

機能モジュールは、コアAngular APIの概念ではなく、組織のベストプラクティスです。機能モジュールは、ユーザーワークフロー、ルーティング、フォームなど、特定のアプリケーションのニーズに焦点を合わせた機能のまとまりのあるセットを提供します。ルートモジュール内ですべてを実行できますが、機能モジュールはアプリを焦点を絞った領域に分割するのに役立ちます。

Angularモジュール

Angularのモジュールは、アプリケーションを整理し、外部ライブラリの機能で拡張するための優れた方法です。Angularライブラリは、FormsModule、  HttpClientModule、 RouterModuleなどのNgModuleです。Material Design、  Ionic、  AngularFire2など、多くのサードパーティライブラリがNgModuleとして利用できます。Angular Modulesは、アプリケーションにサービスを追加することもできます。このようなサービスは、アプリケーションの準備のように、内部で開発される場合があります。

新しいAngularプロジェクトをインストールしてから、機能モジュールを使用してプロジェクトを整理しましょう。

ステップ1：Angularをインストールする

新しいAngularプロジェクトを作成しましょう。

 

ng new angmodules

Angular Routingを使用しますが、AngularCLIは不要なため提供していません。したがって、このデモでは1つのルートのみを作成します。次に、フォルダー内に移動し、エディターでプロジェクトを開きます。私はVSCodeを使用しています。

 

cd angmodules && code .

また、次のコマンドを使用してブートストラップを追加します。

npm install bootstrap --save

次に、 angular.json ファイル内にブートストラップファイルを追加し ます。

"styles": [
   "src/styles.css",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

これで、アプリケーションでBootstrapを使用できます。

ステップ2：新しいAngularモジュールを作成する

すでにアプリを持っていると仮定して、Angular CLIで作成し、ルートプロジェクトディレクトリで次のコマンドを入力して、AngularCLIを使用して機能モジュールを作成します。

ng g module student

app ディレクトリ 内にstudentというフォルダが作成さ れ、 student ディレクトリ内に student.module.tsという1つのファイルが表示されます 。

// student.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class StudentModule { }

つまり、学生に関連する機能やコンポーネントがある場合は、これまでのよう にapp.module.ts ファイル内に直接インポートされるのではなく 、このstudent.module.ts ファイルにインポートされます。

次のステップは、学生モジュールに関連する3つの角度コンポーネントを作成することです。だから私たちはそれをしましょう。

ステップ3：Angularコンポーネントを作成する

Studentモジュールに関連する次の3つの角度コンポーネントを作成します。

1. student.component.ts
2. student-list.component.ts
3. student-list-item.component.ts

したがって、次のコマンドを入力して、上記の角度成分を生成します。

ng g c student/student --spec=false
ng g c student/student-list --spec=false
ng g c student/student-list-item --spec=false

すべてのコンポーネントが アプリ>> student フォルダー内に作成されていることがわかります。これで、student.module.ts ファイルが表示されます。これは、3つのコンポーネントすべてがstudent.module.ts ファイル内に自動的にインポートされるためです。

// student.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentListItemComponent } from './student-list-item/student-list-item.component';
import { StudentComponent } from './student/student.component';

@NgModule({
  declarations: [StudentComponent, StudentListComponent, StudentListItemComponent],
  imports: [
    CommonModule
  ]
})
export class StudentModule { }

app.module.ts ファイル内に student.module.ts ファイルをインポートし ます。

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { StudentModule } from './student/student.module';

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

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

これで、新しいモジュールをAngularアプリケーションに登録しました。次に、Angular Developmentサーバーを起動して、エラーがないかどうかを確認します。

ng serve

ステップ4：学生向けのモデルとサービスを作成する

次のコマンドを使用してサービスを作成できます。

ng g s student/student --spec=false

このようなファイルが作成されます。

// student.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  constructor() { }
}

次に、 studentフォルダー内にstudent.model.tsというファイルを1つ作成し、次のコードを追加します。

// student.model.ts

export class Student {
    id: Number;
    name: String;
    enrollno: Number;
    college: String;
    university: String;
}

これがモデルクラスのStudentです。この種のデータをフロントエンドに表示しています。

次に、 student.service.ts ファイル内に次のコードを記述し ます。

// student.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { Student } from './student.model';

@Injectable({
  providedIn: 'root'
})
export class StudentService {

    students: Student[] = [{
        id: 1,
        name: 'Krunal',
        enrollmentnumber: 110470116021,
        college: 'VVP Engineering College',
        university: 'GTU'
    },
    {
        id: 2,
        name: 'Rushabh',
        enrollmentnumber: 110470116023,
        college: 'VVP Engineering College',
        university: 'GTU'
    },
    {
        id: 3,
        name: 'Ankit',
        enrollmentnumber: 110470116022,
        college: 'VVP Engineering College',
        university: 'GTU'
    }];

    constructor() { }

    public getStudents(): any {
        const studentsObservable = new Observable(observer => {
            setTimeout(() => {
                observer.next(this.students);
            }, 1000);
        });

        return studentsObservable;
    }
}

したがって、このファイルでは、Observablesを返すgetStudents関数を定義しました。したがって、サブスクライバーがパブリッシャーからのデータを必要とする場合、サブスクライバーはこのstudentsObservableにサブスクライブし、パブリッシャーは値の公開を開始し、最終的にサブスクライバーはデータを取得します。Observablesに慣れていない場合は、このAngularObservablesチュートリアルとサンプルの記事を確認してください。

最後のステップは、学生サービスからのデータを表示するためにすべてのコンポーネントを準備することです。

ステップ5：ルーティングを構成します。

app.module.ts ファイル内に次のコードを追加し ます。

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { StudentModule } from './student/student.module';

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

const routes: Routes = [
    {
        path: '',
        component: StudentComponent
    }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StudentModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

RoutesとRouterModuleをインポートしてから、ルートの配列を作成し、Angularアプリケーションに登録しました。

app.component.html ファイル内の router-outlet を使用してコンポーネントを表示する必要があります。

<div class="container">
    <router-outlet></router-outlet>
</div>

したがって、これまでに行ったことは、ユーザーがhttp：// localhost：4200にアクセスすると、 student.component.html ビューが表示される ことです。したがって、次のステップは、表示するHTMLコードを追加することです。

ステップ6：データを表示します。

まず、  student.component.html ファイル内に次のコードを記述します。

<div>
    <app-student-list></app-student-list>
</div>

つまり、これは最も外側のコンポーネントであり、このコンポーネントの中には、student-list.component.html コンポーネントがあります。

次に、 student-list.component.ts ファイル内に次のコードを記述し ます。

// student-list.component.ts

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { Student } from '../student.model';

@Component({
  selector: 'app-student-list',
  templateUrl: './student-list.component.html',
  styleUrls: ['./student-list.component.css']
})
export class StudentListComponent implements OnInit {

    students: Student[] = [];

    constructor(private studentservice: StudentService) { }

    ngOnInit() {
        const studentObservable = this.studentservice.getStudents();
        studentObservable.subscribe((studentsData: Student[]) => {
            this.students = studentsData;
        });
    }
}

また、  student-list.component.html ファイル内に次のHTMLを記述します。

<div class="row">
    <div class="col-md-3 col-xs-6" *ngFor="let student of students">
        <app-student-list-item [student]="student"></app-student-list-item>
    </div>
</div>

したがって、親から子コンポーネントにデータを渡します。したがって、app-student-list-componentは、studentと呼ばれる1つの入力値を期待します。

次に、 student-list-item.component.tsファイル内に次のコードを記述します。

// student-list-item.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-student-list-item',
  templateUrl: './student-list-item.component.html',
  styleUrls: ['./student-list-item.component.css']
})
export class StudentListItemComponent implements OnInit {

    @Input() student: any;

    constructor() { }

    ngOnInit() {
    }

}

Student-list-item.component.html ファイル内にHTMLコードを追加し ます。

<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{ student.name }}</h5>
        <h6 class="card-subtitle">{{ student.enrollmentno }}</h6>
        <p class="card-text">{{ student.college }}</p>
        <p class="card-text">{{ student.university }}</p>
        <a class="btn btn-primary" href="#" >Go somewhere</a>
    </div>
</div>

ファイルを保存してhttp：// localhost：4200 /に移動すると、1秒後に次のように表示されます。

 

結論

そのため、student.module.tsというファイルを作成することで、プロジェクト全体をモジュールごとに受講者に提供しました。

学生に関連するすべての機能とコードはアプリ>>学生 フォルダーにあり、それらを尊重されたフォルダーのそれぞれに分離することで、必要な数のモジュールを作成できます。

機能モジュールは、スケーラブルなコードを整理するための最良の方法です。app.module.ts ファイル内にすべてのコンポーネントを登録する必要はありません 。機能に応じて1つのモジュールファイルを作成し、その中にコンポーネントを追加します。

最後に、  app.module.ts ファイル内にモジュールを追加できます。これで準備完了です。これは、プロジェクトを整理するための最良の方法の1つです。

このチュートリアルは以上です。 

リンク：https ：//appdividend.com/2022/02/16/angular-modules/

#angular 

What is GEEK

Buddha Community

コードを整理するためのAngularモジュールを作成する

このチュートリアルでは、コードを整理するためのAngularモジュールを作成する方法を説明します。機能モジュールは、コードを整理するためのNgModuleです。アプリの拡張に合わせて、特定の機能に関連するコードを整理できます。さらに、機能モジュールは、機能に明確な境界を適用するのに役立ちます。機能モジュールを使用すると、特定の機能または機能に関連するコードを他のコードから分離しておくことができます。

白黒機能モジュールとルートモジュールの違い

機能モジュールは、コアAngular APIの概念ではなく、組織のベストプラクティスです。機能モジュールは、ユーザーワークフロー、ルーティング、フォームなど、特定のアプリケーションのニーズに焦点を合わせた機能のまとまりのあるセットを提供します。ルートモジュール内ですべてを実行できますが、機能モジュールはアプリを焦点を絞った領域に分割するのに役立ちます。

Angularモジュール

Angularのモジュールは、アプリケーションを整理し、外部ライブラリの機能で拡張するための優れた方法です。Angularライブラリは、FormsModule、  HttpClientModule、 RouterModuleなどのNgModuleです。Material Design、  Ionic、  AngularFire2など、多くのサードパーティライブラリがNgModuleとして利用できます。Angular Modulesは、アプリケーションにサービスを追加することもできます。このようなサービスは、アプリケーションの準備のように、内部で開発される場合があります。

新しいAngularプロジェクトをインストールしてから、機能モジュールを使用してプロジェクトを整理しましょう。

ステップ1：Angularをインストールする

新しいAngularプロジェクトを作成しましょう。

 

ng new angmodules

Angular Routingを使用しますが、AngularCLIは不要なため提供していません。したがって、このデモでは1つのルートのみを作成します。次に、フォルダー内に移動し、エディターでプロジェクトを開きます。私はVSCodeを使用しています。

 

cd angmodules && code .

また、次のコマンドを使用してブートストラップを追加します。

npm install bootstrap --save

次に、 angular.json ファイル内にブートストラップファイルを追加し ます。

"styles": [
   "src/styles.css",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

これで、アプリケーションでBootstrapを使用できます。

ステップ2：新しいAngularモジュールを作成する

すでにアプリを持っていると仮定して、Angular CLIで作成し、ルートプロジェクトディレクトリで次のコマンドを入力して、AngularCLIを使用して機能モジュールを作成します。

ng g module student

app ディレクトリ 内にstudentというフォルダが作成さ れ、 student ディレクトリ内に student.module.tsという1つのファイルが表示されます 。

// student.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class StudentModule { }

つまり、学生に関連する機能やコンポーネントがある場合は、これまでのよう にapp.module.ts ファイル内に直接インポートされるのではなく 、このstudent.module.ts ファイルにインポートされます。

次のステップは、学生モジュールに関連する3つの角度コンポーネントを作成することです。だから私たちはそれをしましょう。

ステップ3：Angularコンポーネントを作成する

Studentモジュールに関連する次の3つの角度コンポーネントを作成します。

1. student.component.ts
2. student-list.component.ts
3. student-list-item.component.ts

したがって、次のコマンドを入力して、上記の角度成分を生成します。

ng g c student/student --spec=false
ng g c student/student-list --spec=false
ng g c student/student-list-item --spec=false

すべてのコンポーネントが アプリ>> student フォルダー内に作成されていることがわかります。これで、student.module.ts ファイルが表示されます。これは、3つのコンポーネントすべてがstudent.module.ts ファイル内に自動的にインポートされるためです。

// student.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentListItemComponent } from './student-list-item/student-list-item.component';
import { StudentComponent } from './student/student.component';

@NgModule({
  declarations: [StudentComponent, StudentListComponent, StudentListItemComponent],
  imports: [
    CommonModule
  ]
})
export class StudentModule { }

app.module.ts ファイル内に student.module.ts ファイルをインポートし ます。

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { StudentModule } from './student/student.module';

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

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

これで、新しいモジュールをAngularアプリケーションに登録しました。次に、Angular Developmentサーバーを起動して、エラーがないかどうかを確認します。

ng serve

ステップ4：学生向けのモデルとサービスを作成する

次のコマンドを使用してサービスを作成できます。

ng g s student/student --spec=false

このようなファイルが作成されます。

// student.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  constructor() { }
}

次に、 studentフォルダー内にstudent.model.tsというファイルを1つ作成し、次のコードを追加します。

// student.model.ts

export class Student {
    id: Number;
    name: String;
    enrollno: Number;
    college: String;
    university: String;
}

これがモデルクラスのStudentです。この種のデータをフロントエンドに表示しています。

次に、 student.service.ts ファイル内に次のコードを記述し ます。

// student.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { Student } from './student.model';

@Injectable({
  providedIn: 'root'
})
export class StudentService {

    students: Student[] = [{
        id: 1,
        name: 'Krunal',
        enrollmentnumber: 110470116021,
        college: 'VVP Engineering College',
        university: 'GTU'
    },
    {
        id: 2,
        name: 'Rushabh',
        enrollmentnumber: 110470116023,
        college: 'VVP Engineering College',
        university: 'GTU'
    },
    {
        id: 3,
        name: 'Ankit',
        enrollmentnumber: 110470116022,
        college: 'VVP Engineering College',
        university: 'GTU'
    }];

    constructor() { }

    public getStudents(): any {
        const studentsObservable = new Observable(observer => {
            setTimeout(() => {
                observer.next(this.students);
            }, 1000);
        });

        return studentsObservable;
    }
}

したがって、このファイルでは、Observablesを返すgetStudents関数を定義しました。したがって、サブスクライバーがパブリッシャーからのデータを必要とする場合、サブスクライバーはこのstudentsObservableにサブスクライブし、パブリッシャーは値の公開を開始し、最終的にサブスクライバーはデータを取得します。Observablesに慣れていない場合は、このAngularObservablesチュートリアルとサンプルの記事を確認してください。

最後のステップは、学生サービスからのデータを表示するためにすべてのコンポーネントを準備することです。

ステップ5：ルーティングを構成します。

app.module.ts ファイル内に次のコードを追加し ます。

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { StudentModule } from './student/student.module';

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

const routes: Routes = [
    {
        path: '',
        component: StudentComponent
    }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StudentModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

RoutesとRouterModuleをインポートしてから、ルートの配列を作成し、Angularアプリケーションに登録しました。

app.component.html ファイル内の router-outlet を使用してコンポーネントを表示する必要があります。

<div class="container">
    <router-outlet></router-outlet>
</div>

したがって、これまでに行ったことは、ユーザーがhttp：// localhost：4200にアクセスすると、 student.component.html ビューが表示される ことです。したがって、次のステップは、表示するHTMLコードを追加することです。

ステップ6：データを表示します。

まず、  student.component.html ファイル内に次のコードを記述します。

<div>
    <app-student-list></app-student-list>
</div>

つまり、これは最も外側のコンポーネントであり、このコンポーネントの中には、student-list.component.html コンポーネントがあります。

次に、 student-list.component.ts ファイル内に次のコードを記述し ます。

// student-list.component.ts

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { Student } from '../student.model';

@Component({
  selector: 'app-student-list',
  templateUrl: './student-list.component.html',
  styleUrls: ['./student-list.component.css']
})
export class StudentListComponent implements OnInit {

    students: Student[] = [];

    constructor(private studentservice: StudentService) { }

    ngOnInit() {
        const studentObservable = this.studentservice.getStudents();
        studentObservable.subscribe((studentsData: Student[]) => {
            this.students = studentsData;
        });
    }
}

また、  student-list.component.html ファイル内に次のHTMLを記述します。

<div class="row">
    <div class="col-md-3 col-xs-6" *ngFor="let student of students">
        <app-student-list-item [student]="student"></app-student-list-item>
    </div>
</div>

したがって、親から子コンポーネントにデータを渡します。したがって、app-student-list-componentは、studentと呼ばれる1つの入力値を期待します。

次に、 student-list-item.component.tsファイル内に次のコードを記述します。

// student-list-item.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-student-list-item',
  templateUrl: './student-list-item.component.html',
  styleUrls: ['./student-list-item.component.css']
})
export class StudentListItemComponent implements OnInit {

    @Input() student: any;

    constructor() { }

    ngOnInit() {
    }

}

Student-list-item.component.html ファイル内にHTMLコードを追加し ます。

<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{ student.name }}</h5>
        <h6 class="card-subtitle">{{ student.enrollmentno }}</h6>
        <p class="card-text">{{ student.college }}</p>
        <p class="card-text">{{ student.university }}</p>
        <a class="btn btn-primary" href="#" >Go somewhere</a>
    </div>
</div>

ファイルを保存してhttp：// localhost：4200 /に移動すると、1秒後に次のように表示されます。

 

結論

そのため、student.module.tsというファイルを作成することで、プロジェクト全体をモジュールごとに受講者に提供しました。

学生に関連するすべての機能とコードはアプリ>>学生 フォルダーにあり、それらを尊重されたフォルダーのそれぞれに分離することで、必要な数のモジュールを作成できます。

機能モジュールは、スケーラブルなコードを整理するための最良の方法です。app.module.ts ファイル内にすべてのコンポーネントを登録する必要はありません 。機能に応じて1つのモジュールファイルを作成し、その中にコンポーネントを追加します。

最後に、  app.module.ts ファイル内にモジュールを追加できます。これで準備完了です。これは、プロジェクトを整理するための最良の方法の1つです。

このチュートリアルは以上です。 

リンク：https ：//appdividend.com/2022/02/16/angular-modules/

#angular