Apa perbedaan antara komponen dan modul Sudut

Saya sudah menonton video dan membaca artikel tetapi artikel khusus ini membuat saya sangat bingung, di awal artikel itu tertulis

Aplikasi dalam Angular mengikuti struktur modular. Aplikasi Angular akan berisi banyak modul, masing-masing didedikasikan untuk tujuan tunggal. Biasanya modul adalah kelompok kode yang kohesif yang terintegrasi dengan modul lain untuk menjalankan aplikasi Angular Anda.

Modul mengekspor beberapa kelas, fungsi, dan nilai dari kodenya. Komponen adalah blok dasar Angular dan beberapa komponen akan membentuk aplikasi Anda.

Modul dapat menjadi perpustakaan untuk modul lain. Sebagai contoh, perpustakaan angular2 / inti yang merupakan modul perpustakaan Angular primer akan diimpor oleh komponen lain.

Apakah mereka persyaratan yang dapat ditukar? Apakah komponen modul? Tapi tidak sebaliknya?

Tampilan kontrol komponen (html). Mereka juga berkomunikasi dengan komponen dan layanan lain untuk menghadirkan fungsionalitas ke aplikasi Anda.

Modul terdiri dari satu atau lebih komponen. Mereka tidak mengontrol html apa pun. Modul Anda menyatakan komponen mana yang dapat digunakan oleh komponen yang termasuk dalam modul lain , kelas mana yang akan diinjeksi oleh injector dependensi dan komponen mana yang akan di-bootstrap. Modul memungkinkan Anda mengelola komponen untuk menghadirkan modularitas ke aplikasi Anda.

Yah, sudah terlambat untuk mengirim jawaban, tapi saya merasa akan mudah untuk memahami siapa yang pemula dengan Angular. Berikut ini adalah salah satu contoh yang saya berikan selama presentasi saya.

Pertimbangkan Aplikasi sudut Anda sebagai bangunan. Sebuah bangunan dapat memiliki Nsejumlah apartemen di dalamnya. Apartemen dianggap sebagai modul. Apartemen kemudian dapat memiliki Njumlah kamar yang sesuai dengan blok bangunan komponen bernama aplikasi Angular.

Sekarang setiap apartemen (Modul) `akan memiliki kamar (Komponen), lift (Layanan) untuk memungkinkan pergerakan yang lebih besar masuk dan keluar apartemen, kabel (Pipa) untuk memindahkan informasi di sekitar dan membuatnya berguna di apartemen.

Anda juga akan memiliki tempat-tempat seperti kolam renang, lapangan tenis yang digunakan bersama oleh semua penghuni gedung. Jadi ini dapat dianggap sebagai komponen di dalam SharedModule.

Pada dasarnya perbedaannya adalah sebagai berikut,

Ikuti slide saya untuk memahami blok bangunan aplikasi Angular

Ini sesi saya Building Blocks of Angular for beginners

Penjelasan Sederhana:

Modul itu seperti wadah besar yang berisi satu atau banyak wadah kecil yang disebut Komponen, Layanan, Pipa

Komponen A berisi:

• Template HTML atau kode HTML

• Kode (TypeScript)

• Layanan: Ini adalah kode yang dapat digunakan kembali yang dibagikan oleh Komponen sehingga penulisan ulang kode tidak diperlukan

• Pipa: Dibutuhkan data sebagai input dan mengubahnya menjadi output yang diinginkan

.

Komponen Sudut

Komponen adalah salah satu blok bangunan dasar aplikasi Angular. Aplikasi dapat memiliki lebih dari satu komponen. Dalam aplikasi normal, komponen berisi file kelas halaman tampilan HTML, file kelas yang mengontrol perilaku halaman HTML dan file CSS / scss untuk menata tampilan HTML Anda. Komponen dapat dibuat menggunakan @Componentdekorator yang merupakan bagian dari @angular/coremodul.

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

dan untuk membuat komponen

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

Untuk membuat aplikasi komponen atau sudut di sini adalah tutorial

Modul Sudut

Sebuah modul sudut diatur blok bangunan dasar sudut seperti komponen , arahan , layanan dll Aplikasi dapat memiliki lebih dari satu modul.

Modul dapat dibuat menggunakan @NgModuledekorator.

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

Modul dalam Angular 2 adalah sesuatu yang dibuat dari komponen, arahan, layanan, dll. Satu atau banyak modul bergabung untuk membuat Aplikasi. Modul memecah aplikasi menjadi potongan-potongan kode logis. Setiap modul melakukan satu tugas.

Komponen dalam Angular 2 adalah kelas di mana Anda menulis logika Anda untuk halaman yang ingin Anda tampilkan. Komponen mengontrol tampilan (html). Komponen berkomunikasi dengan komponen dan layanan lain.

Sebuah gambar bernilai ribuan kata!

Konsep Angular sangat sederhana. Itu mengusulkan untuk "membangun" aplikasi dengan "batu bata" -> modul.

Konsep ini memungkinkan untuk menyusun kode dengan lebih baik dan memfasilitasi penggunaan kembali dan berbagi.

Hati-hati untuk tidak membingungkan modul Sudut dengan modul ES2015 / TypeScript.

Mengenai modul Angular, ini adalah mekanisme untuk:

1- komponen grup (tetapi juga layanan, arahan, pipa dll ...)

2- menentukan ketergantungan mereka

3 - menentukan visibilitas mereka.

Modul Angular hanya didefinisikan dengan kelas (biasanya kosong) dan dekorator NgModule.

Komponen adalah the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).

Modul basically group the related components, services togethersehingga Anda dapat memiliki potongan fungsionalitas yang kemudian dapat berjalan secara independen. Misalnya, aplikasi dapat memiliki modul untuk fitur, untuk mengelompokkan komponen untuk fitur tertentu dari aplikasi Anda, seperti dasbor, yang dapat Anda ambil dan gunakan di dalam aplikasi lain.