Komponen Sudut: Panduan Komprehensif untuk Pemula

Membina aplikasi satu halaman adalah satu seni dan terdapat banyak rangka kerja yang mengagumkan untuk dipilih. Angular ialah salah satu rangka kerja yang paling intuitif dan digunakan secara meluas untuk membina aplikasi web dan mudah alih. Hari ini, Angular 10 telah dikeluarkan, dan ia dilengkapi dengan banyak ciri yang mengagumkan. Sebelum anda menggali lebih dalam, bagaimanapun, anda perlu menguasai komponen.

Perkara pertama: menyediakan tanggungan

Sebelum mencuba Angular, anda perlu memastikan anda telah berjaya memasang kebergantungan berikut:

• Node.js
• CLI sudut

Anda boleh memasang Angular CLI secara global menggunakan NPM.

npm install -g @angular/cli

Kini anda boleh memulakan projek Angular anda dalam beberapa cara berbeza:

• Buat secara manual
• Menggunakan Angular CLI
• Klon dan jalankan projek daripada GitHub

Begini cara membuat projek baharu menggunakan Angular CLI:

ng new my-project-name
cd my-project-name

Itu sahaja! Kini perjalanan Angular anda telah bermula. Dalam artikel ini, kami akan membina kalkulator mudah untuk menambah dua nombor menggunakan Angular.

Apakah komponen sudut?

Dalam Angular kami menggunakan arahan. Terdapat tiga jenis arahan: arahan struktur, arahan atribut dan arahan komponen. Dalam beberapa bahagian seterusnya, kita akan menyelami segala-galanya tentang komponen.

Menjelang akhir tutorial ini, anda akan dapat membina komponen dalam Angular. Lebih-lebih lagi, anda akan memahami setiap langkah.

Komponen akan tersedia dalam mana-mana projek Angular dari hari pertama. Dalam satu cara, anda boleh menganggap mana-mana projek Angular sebagai pokok yang terdiri daripada banyak komponen yang bersambung. Setiap komponen mempunyai fungsi tertentu dan templat yang menjadikannya. Satu templat boleh digunakan semula dalam berbilang komponen. Koleksi komponen membentuk aplikasi Sudut, yang akhirnya dilihat dalam penyemak imbas.

Sesuatu komponen adalah seperti kelas yang merangkumi kelakuan sesuatu elemen dan pandangannya. Gelagat termasuk data yang dimuatkan atau diberikan dan cara pengguna berinteraksi dengannya, dan pandangannya ialah templat yang menentukan cara data itu dipersembahkan.

Bina Komponen Kalkulator

Mari kita memahami komponen dengan mencipta komponen Sudut untuk menambah dua nombor. Kami tidak akan membuat komponen langkah demi langkah dalam tutorial ini, tetapi anda boleh mendapatkan kod lengkap untuk aplikasi ini dalam repositori GitHub kami.

Gunakan penghias Component untuk menentukan komponen

Component 装饰器用于在 Angular 中定义组件。定义组件的元数据如下：

@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class Calculator{
  
}

在上面的定义中，selector 告诉应用程序该组件需要用于应用程序 HTML 的哪些元素。 templateUrl 告诉应用程序可以呈现什么。上面装饰器中的其他所有内容都是可选的。

什么是选择器？

selector 是 Angular 中的一个重要属性。它帮助应用程序确定组件的放置位置。选择器始终是一个字符串。选择器可以通过三种不同的方式定义，每种方式都有独特的用例：

• selector: 'calculator' 当组件将被指定为 HTML 中的 <calculator> 元素时可以使用。
• selector: '.calculator' 如果组件要用作 CSS 元素，则可以使用  在 HTML 中。
• selector: '[calculator]' 当组件应该用作属性时可以使用，它看起来像 .

选择器可以简单也可以复杂，但黄金法则是使选择器尽可能简单。

什么是模板？

templateUrl 用于标识组件将使用的模板。模板的路径应该是相对的。对于与组件源代码位于同一文件夹中的模板，您可以使用 templateUrl: './calculator.html'  或 templateUrl: 'calculator.html'。

您还可以选择使用 template 选项将 templateUrl 选项替换为内联模板。这在简单组件中很有用，其中 TypeScript 代码和 HTML 不必位于不同的文件中。

这种做法对最终的应用没有任何影响。为什么？无论采用哪种方法，都会生成单个捆绑包。

什么是 styleUrl？

组件从来都不是简单的；它总是充满多种风格。 styleUrl 属性的作用是帮助您包含特定于组件的 CSS。就像模板一样，您可以通过 styles 属性使用内联样式。但如果代码具有大量样式，则需要将其分离到不同的文件中。

请注意，styleUrlComponent penghias digunakan untuk menentukan komponen dalam Angular. Metadata yang mentakrifkan komponen adalah seperti berikut:

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class Calculator{}

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class Calculator{}

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

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

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

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class Calculator implements OnInit {
                                     
  constructor() {}

  ngOnInit(): void {
    console.log('Component - On Init');
  }

}

<div class="row">
    <div class="col-12">
    	<input [(ngModel)]="number1" type="number" name="" placeholder="number">
	</div>
</div>
<div class="row">
	<div class="col-12">
		<input [(ngModel)]="number2" type="number" name="" placeholder="number">
	</div>
</div>
<button (click)="add()" class="button">
    Add 
</button>
<div class="result">
    <span>
		Result : {{result}}
	</span>
</div>

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

@Component({
  selector: 'calc',
  templateUrl: 'calc.component.html',
  styleUrls: ['calc.component.css']
})
export class CalcComponent {
  public number1 : number;
  public number2 : number;
  public result : number;

  public add(){
      this.result = this.number1 + this.number2
  }
}