Sự khác biệt giữa một thành phần Angular và mô-đun

Tôi đã xem video và đọc các bài báo nhưng bài viết cụ thể này làm tôi rất bối rối, khi bắt đầu bài viết, nó nói

Các ứng dụng trong Angular theo cấu trúc mô-đun. Các ứng dụng Angular sẽ chứa nhiều mô-đun, mỗi mô-đun dành riêng cho một mục đích duy nhất. Thông thường mô-đun là một nhóm mã gắn kết được tích hợp với các mô-đun khác để chạy các ứng dụng Angular của bạn.

Một mô-đun xuất một số lớp, chức năng và giá trị từ mã của nó. Thành phần là một khối cơ bản của Angular và nhiều thành phần sẽ tạo nên ứng dụng của bạn.

Một mô-đun có thể là một thư viện cho một mô-đun khác. Ví dụ, thư viện angular2 / core là mô-đun thư viện Angular chính sẽ được nhập bởi một thành phần khác.

Họ có thể trao đổi các điều khoản? Là một thành phần một mô-đun? Nhưng không phải ngược lại?

Các thành phần kiểm soát khung nhìn (html). Họ cũng giao tiếp với các thành phần và dịch vụ khác để mang lại chức năng cho ứng dụng của bạn.

Các mô-đun bao gồm một hoặc nhiều thành phần. Họ không kiểm soát bất kỳ html nào. Các mô-đun của bạn khai báo các thành phần nào có thể được sử dụng bởi các thành phần thuộc các mô-đun khác , các lớp nào sẽ được tiêm bởi bộ tiêm phụ thuộc và thành phần nào được khởi động. Các mô-đun cho phép bạn quản lý các thành phần của mình để mang lại tính mô-đun cho ứng dụng của bạn.

Chà, đã quá muộn để đăng câu trả lời, nhưng tôi cảm thấy sẽ dễ hiểu những người mới bắt đầu với Angular. Sau đây là một trong những ví dụ mà tôi đưa ra trong bài trình bày của mình.

Hãy xem xét ứng dụng góc cạnh của bạn như một tòa nhà. Một tòa nhà có thể có Nsố lượng căn hộ trong đó. Một căn hộ được coi là một mô-đun. Một Căn hộ sau đó có thể có Nsố lượng phòng tương ứng với các khối xây dựng của ứng dụng Angular có tên là các thành phần.

Bây giờ mỗi căn hộ (Mô-đun) `sẽ có phòng (Linh kiện), thang máy (Dịch vụ) để cho phép di chuyển lớn hơn vào và ra khỏi căn hộ, dây (Ống) để di chuyển thông tin xung quanh và làm cho nó hữu ích trong căn hộ.

Bạn cũng sẽ có những nơi như hồ bơi, sân tennis đang được chia sẻ bởi tất cả cư dân tòa nhà. Vì vậy, đây có thể được coi là các thành phần bên trong SharedModule.

Về cơ bản, sự khác biệt là như sau,

Theo dõi các slide của tôi để hiểu các khối xây dựng của ứng dụng Angular

Đây là phiên của tôi trên Building Blocks of Angular for beginners

Giải thích đơn giản nhất:

Mô-đun giống như một thùng chứa lớn chứa một hoặc nhiều thùng chứa nhỏ gọi là Thành phần, Dịch vụ, Đường ống

Một thành phần có chứa:

• Mẫu HTML hoặc mã HTML

• Mã (TypeScript)

• Dịch vụ: Đây là mã có thể tái sử dụng được chia sẻ bởi các Thành phần để không cần viết lại mã

• Ống: Nó lấy dữ liệu làm đầu vào và biến đổi nó thành đầu ra mong muốn

.

Thành phần góc

Một thành phần là một trong những khối xây dựng cơ bản của ứng dụng Angular. Một ứng dụng có thể có nhiều hơn một thành phần. Trong một ứng dụng thông thường, một thành phần chứa tệp lớp trang xem HTML, tệp lớp điều khiển hành vi của trang HTML và tệp CSS / scss để định kiểu chế độ xem HTML của bạn. Một thành phần có thể được tạo bằng cách sử dụng @Componenttrang trí là một phần của @angular/coremô-đun.

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

và để tạo ra một thành phần

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

Để tạo một thành phần hoặc ứng dụng góc ở đây là hướng dẫn

Mô-đun góc

Một mô-đun góc được thiết lập các khối xây dựng cơ bản góc cạnh như thành phần , chỉ thị , dịch vụ , vv Một ứng dụng có thể có nhiều hơn một mô-đun.

Một mô-đun có thể được tạo ra bằng cách sử dụng @NgModuletrang trí.

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

Một mô-đun trong Angular 2 là một cái gì đó được tạo ra từ các thành phần, chỉ thị, dịch vụ, vv Một hoặc nhiều mô-đun kết hợp để tạo ra một Ứng dụng. Mô-đun chia ứng dụng thành các đoạn mã hợp lý. Mỗi mô-đun thực hiện một nhiệm vụ duy nhất.

Các thành phần trong Angular 2 là các lớp nơi bạn viết logic cho trang bạn muốn hiển thị. Các thành phần kiểm soát chế độ xem (html). Các thành phần giao tiếp với các thành phần và dịch vụ khác.

Một bưc tranh đang gia ngan lơi noi !

Khái niệm về Angular rất đơn giản. Nó đề xuất "xây dựng" một ứng dụng với "brick" -> mô-đun.

Khái niệm này cho phép cấu trúc mã tốt hơn và tạo điều kiện tái sử dụng và chia sẻ.

Cẩn thận không nhầm lẫn các mô-đun Angular với các mô-đun ES2015 / TypeScript.

Về mô-đun Angular, nó là một cơ chế cho:

1- thành phần nhóm (nhưng cũng có dịch vụ, chỉ thị, đường ống, v.v ...)

2- xác định sự phụ thuộc của họ

3- xác định tầm nhìn của họ.

Một mô-đun Angular được định nghĩa đơn giản với một lớp (thường là trống) và bộ trang trí NgModule.

Thành phần là 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).

Các mô-đun basically group the related components, services togetherđể bạn có thể có các khối chức năng mà sau đó có thể chạy độc lập. Ví dụ: một ứng dụng có thể có các mô-đun cho các tính năng, để nhóm các thành phần cho một tính năng cụ thể của ứng dụng của bạn, chẳng hạn như bảng điều khiển, bạn chỉ cần lấy và sử dụng bên trong một ứng dụng khác.