Bagaimana untuk membina komponen dalam Angular? 3 kaedah diperkenalkan

Bagaimana untuk membina komponen dalam Angular? Artikel ini akan memperkenalkan kepada anda cara membuat projek dalam Angular dan tiga cara untuk mencipta komponen dalam Angular.

1. Apakah perbezaan antara angular dan angularjs?

• Perubahan penamaan, Angular2 dan kemudiannya akan dinamakan secara rasmi Angular, dan versi sebelum 2.0 dipanggil AngualrJS. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

• Cara untuk menggunakan 1.x ialah dengan memperkenalkan fail js AngularJS ke halaman web Selepas 2.0 , ia sama sekali berbeza Perbezaan antara keduanya adalah serupa dengan Java dan JavaScript.

2. Buat projek

1 >

npm install -g @angular/cli

2 Cipta projek

ng new angular-tour-of-heroes

Nota: Versi nod perlu melebihi 12, jika tidak, ia akan menggesa: "'ng' bukan perintah dalaman atau luaran, mahupun adakah ia program yang boleh dikendalikan atau fail Kumpulan ”

3. Jalankan projek

cd angular-tour-of-heroes
ng serve --open

3 :

1 Cipta fail baharu di bawah fail .src dan namakannya hello-world.component.ts

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

@Component({
    selector: 'hello-world组件',
    // templateUrl: './app.component.html',
    // styleUrls: ["./app.component.scss"]
    template: `<h1>{{text}}</h1>`

})
export class HellowordComponent {
    constructor() {}
    text = "第一个模板";
}

<.>

2 Tambah tag komponen

// 引入ng核心包和组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',//当前组件的引用名称
  template:
    ` 
 <hello-world></hello-world>//x新增组件标签

    `  ,
  // templateUrl: &#39;./app.component.html&#39;,//组件模板
  styles: [&#39;h1 { color:red}&#39;]
  // styleUrls: [&#39;./app.component.scss&#39;]//组件的样式文件

})
export class AppComponent {//组件名称

}

dalam .app.component.html atau app.component.ts 3 .app.module.ts Memperkenalkan komponen dan mengisytiharkan komponen

Keempat, cara kedua untuk mencipta komponen:

Gunakan cli Cipta komponen

Masukkan arahan:

ng generate component hello-world

5. Cara ketiga untuk mencipta komponen:

1 Muat Turun Fail Sudut dalam vscode

2. gambar berikut akan muncul

3 Klik Komponen Penjana dan masukkan nama komponen dan tekan Enter

4. Penjanaan Komponen

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

! !

Atas ialah kandungan terperinci Bagaimana untuk membina komponen dalam Angular? 3 kaedah diperkenalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!