Analisis ringkas tentang apa itu ngModule dalam Angular

Apakah itu ngModule? Artikel ini akan memberi anda pemahaman ringkas tentang sintaks angular dan memperkenalkan ngModule dalam Angular saya harap ia akan membantu anda!

Sebagai tutorial Angular10, pada pemahaman saya, berbanding VUE, sudut lebih termodulat, yang menjadikan struktur kod kelihatan lebih jelas. Jadi dalam bahagian ini, kami akan memperkenalkan secara ringkas sintaks sudut dan pemahaman ngModule. [Cadangan tutorial berkaitan: "tutorial sudut"]

Pertama sekali, apakah modul sudut (ngModule)?

Pemahaman saya: Sebenarnya , ia adalah Tiada apa yang istimewa tentang kelas biasa yang dihiasi dengan @NgModule.

Maka persoalannya, apakah itu @NgModule?

Pertama, mari kita lihat kod lalai dalam src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// @NgModule(元数据)
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } // 模块名AppModule

@NgModule mendapat objek metadata, yang akan memberitahu Angular bagaimana untuk menyusun dan Melancarkan aplikasi ini. (Metadata lebih daripada item konfigurasi di atas, tetapi mari kita bincangkan perkara ini dahulu)

susunan pengisytiharan

Perkataan itu sendiri bermaksud "pengumuman, pengumuman" , berikut ialah kebergantungan modul ini. Termasuk beberapa komponen, arahan dan talian paip yang modul mungkin bergantung padanya. Peraturan import:

• Untuk menggunakannya, ia mesti diimport terlebih dahulu.
• Komponen, arahan atau paip hanya boleh diimport (diisytiharkan) oleh satu modul
• Komponen dalam pengisytiharan hanya boleh digunakan dalam modul semasa secara lalai jika ia akan digunakan oleh yang lain modul, mereka mesti dieksport Keluar

tatasusunan import

Susun atur import hanya akan muncul dalam penghias @NgModule A modul mahu berfungsi dengan betul kecuali untuk kebergantungan sendiri (pengisytiharan ) dan mungkin juga memerlukan kebergantungan dieksport oleh modul lain. Selagi ia merupakan modul sudut, ia boleh diimport ke dalam tatasusunan import, seperti modul tersuai (seperti AppRoutingModule), pihak ketiga atau ng terbina dalam (@angular/**)

tatasusunan penyedia

Menyediakan satu siri perkhidmatan

susunan bootstrap

Setiap komponen dalam tatasusunan ialah digunakan sebagai pokok komponen Root (komponen akar), semasa proses permulaan, komponen di dalamnya akan dihuraikan satu persatu dan dimasukkan ke dalam DOM pelayar.

Tetapi biasanya, hanya terdapat satu AppComponent di dalam.

Apakah rupa komponen sudut?

Mula-mula lihat komponen apl, kod lalai src/app/app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {// 组件名AppComponent
  title = 'hero';
}

Seperti yang anda lihat, ia masih operasi biasa: Perkenalkan–>Konfigurasi–>Eksport

pemilih:

Seperti namanya, ia adalah pemilih, pilihan yang boleh dipilih melalui JS asli Ia hanya pelayan (konfigurasi yang diperlukan).

templateUrl:

URL fail templat komponen Sudut. Jika ia disediakan, jangan gunakan template untuk menyediakan templat sebaris (pilih salah satu daripada pilihan templateUrl dan template, konfigurasi yang diperlukan).

styleUrls:

Tidak sukar untuk melihat bahawa ia adalah konfigurasi (konfigurasi pilihan) yang memperkenalkan satu atau lebih laluan gaya

Jika komponen agak mudah, kami tidak perlu mengekstrak halaman dan gaya secara berasingan Item konfigurasi @Component boleh digunakan terus dalam bentuk sebaris:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `,
  styles: [`h1 { color: red }`]
})
export class AppComponent { // 组件名AppComponent
  title = &#39;Tour of Heroes&#39;;
  myHero = &#39;Windstorm&#39;;
}

Setakat ini, kami telah membincangkan secara ringkas tentang modul Apl lalai Bagi fail app-routing.module.ts di dalam, kami akan membincangkannya kemudian.

Idea umum aplikasi sudut sepatutnya seperti ini:

Sebagai contoh, jika aplikasi sudut ialah sebuah syarikat , kemudian AppModule Ini adalah syarikat. AppComponent ialah kilang syarikat ini, dan sebuah syarikat boleh mempunyai banyak kilang. Unsur-unsur dalam tatasusunan penyahjelasan adalah bahagian kilang, seperti bengkel pengeluaran, sistem pengurusan kakitangan, dsb. Susunan import adalah seperti bantuan asing yang dijemput oleh kilang, dan ia agak profesional. Susunan penyedia adalah seperti jabatan logistik yang menyediakan pelbagai perkhidmatan.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas tentang apa itu ngModule dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!