ความแตกต่างระหว่างองค์ประกอบเชิงมุมและโมดูลคืออะไร

ฉันได้ดูวิดีโอและอ่านบทความแล้ว แต่บทความนี้ทำให้ฉันสับสนมากในตอนเริ่มต้นของบทความที่กล่าว

แอพพลิเคชั่นใน Angular ติดตามโครงสร้างแบบแยกส่วน แอพพลิเคชั่นเชิงมุมจะมีโมดูลจำนวนมากโดยแต่ละแอพมีจุดประสงค์เดียว โดยทั่วไปโมดูลเป็นกลุ่มรหัสที่เหนียวแน่นซึ่งถูกรวมเข้ากับโมดูลอื่น ๆ เพื่อเรียกใช้แอพเชิงมุมของคุณ

โมดูลส่งออกบางคลาสฟังก์ชั่นและค่าจากรหัสของมัน Component เป็นบล็อกพื้นฐานของ Angular และส่วนประกอบหลายอย่างจะประกอบเป็นแอปพลิเคชันของคุณ

โมดูลสามารถเป็นห้องสมุดสำหรับโมดูลอื่น ตัวอย่างเช่นไลบรารี angular2 / core ซึ่งเป็นโมดูลไลบรารี Angular หลักจะถูกนำเข้าโดยส่วนประกอบอื่น

พวกเขาแลกเปลี่ยนข้อตกลง? เป็นส่วนประกอบของโมดูลหรือไม่? แต่ไม่ใช่ viceversa?

มุมมองการควบคุมคอมโพเนนต์ (html) พวกเขายังสื่อสารกับส่วนประกอบและบริการอื่น ๆ เพื่อนำไปใช้กับแอพของคุณ

โมดูลประกอบด้วยหนึ่งหรือมากกว่าหนึ่งองค์ประกอบ พวกเขาไม่ได้ควบคุม html ใด ๆ โมดูลของคุณประกาศส่วนประกอบที่สามารถใช้งานได้โดยส่วนประกอบที่อยู่ในโมดูลอื่น ๆซึ่งคลาสใดจะถูกฉีดโดยหัวฉีดพึ่งพาและส่วนประกอบใดที่ได้รับการบูต โมดูลอนุญาตให้คุณจัดการส่วนประกอบของคุณเพื่อนำโมดูลไปสู่แอพของคุณ

มันสายเกินไปที่จะโพสต์คำตอบ แต่ฉันรู้สึกว่ามันง่ายที่จะเข้าใจว่าใครเป็นผู้เริ่มต้นด้วย Angular ต่อไปนี้เป็นหนึ่งในตัวอย่างที่ฉันให้ในระหว่างการนำเสนอของฉัน

พิจารณาแอปพลิเคชันเชิงมุมของคุณเป็นอาคาร อาคารสามารถมีNจำนวนอพาร์ทเมนท์ได้ อพาร์ทเมนท์ถือเป็นโมดูล อพาร์ทเมนท์สามารถมีNจำนวนห้องที่สอดคล้องกับส่วนประกอบของแอปพลิเคชันเชิงมุมที่มีชื่อว่าส่วนประกอบ

ตอนนี้แต่ละอพาร์ทเมนต์ (โมดูล) `จะมีห้อง (ส่วนประกอบ), ลิฟท์ (บริการ) เพื่อให้สามารถเคลื่อนย้ายอพาร์ทเมนท์เข้าและออกขนาดใหญ่, สายไฟ (ท่อ) เพื่อย้ายข้อมูลไปรอบ ๆ และทำให้มีประโยชน์ในอพาร์ทเมนท์

คุณจะมีสถานที่เช่นสระว่ายน้ำสนามเทนนิสซึ่งผู้พักอาศัยในอาคารทุกคนใช้ร่วมกัน ดังนั้นสิ่งเหล่านี้จึงถือได้ว่าเป็นองค์ประกอบภายใน SharedModule

โดยทั่วไปความแตกต่างมีดังนี้

ทำตามสไลด์ของฉันเพื่อทำความเข้าใจโครงสร้างของแอปพลิเคชันเชิงมุม

นี่คือเซสชั่นของฉันใน Building Blocks of Angular for beginners

คำอธิบายที่ง่ายที่สุด:

โมดูลเป็นเหมือนภาชนะขนาดใหญ่ที่มีหนึ่งหรือหลายภาชนะเล็ก ๆ ที่เรียกว่า Component, Service, Pipe

ตัวแทนประกอบด้วย:

• เทมเพลต HTML หรือรหัส HTML

• รหัส (typescript)

• บริการ: เป็นรหัสที่ใช้ซ้ำได้ซึ่งใช้ร่วมกันโดยคอมโพเนนต์เพื่อให้ไม่ต้องเขียนโค้ดใหม่

• ท่อ: ใช้ข้อมูลเป็นอินพุตและแปลงเป็นเอาต์พุตที่ต้องการ

.

องค์ประกอบเชิงมุม

ส่วนประกอบเป็นหนึ่งในหน่วยการสร้างพื้นฐานของแอป Angular แอปสามารถมีมากกว่าหนึ่งองค์ประกอบ ในแอปปกติส่วนประกอบประกอบด้วยไฟล์คลาสของเพจมุมมอง HTML ไฟล์คลาสที่ควบคุมพฤติกรรมของเพจ HTML และไฟล์ CSS / scss เพื่อกำหนดสไตล์มุมมอง HTML ของคุณ ส่วนประกอบสามารถสร้างขึ้นโดยใช้@Componentมัณฑนากรที่เป็นส่วนหนึ่งของ@angular/coreโมดูล

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

และเพื่อสร้างองค์ประกอบ

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

ในการสร้างองค์ประกอบหรือแอพเชิงมุมที่นี่คือการสอน

โมดูลเชิงมุม

โมดูลเชิงมุมมีการตั้งค่าของมุมการก่อสร้างตึกพื้นฐานเช่นส่วนประกอบ , สั่ง , บริการอื่น ๆ แอปสามารถมีมากกว่าหนึ่งโมดูล

สามารถสร้างโมดูลโดยใช้@NgModuleมัณฑนากร

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

โมดูลใน Angular 2 เป็นสิ่งที่ทำจากส่วนประกอบคำสั่งบริการ ฯลฯ หนึ่งหรือหลายโมดูลรวมกันเพื่อสร้างแอปพลิเคชัน โมดูลการแยกแอปพลิเคชันออกเป็นส่วน ๆ ของโค้ด แต่ละโมดูลดำเนินงานเดียว

คอมโพเนนต์ใน Angular 2 เป็นคลาสที่คุณเขียนลอจิกสำหรับเพจที่คุณต้องการแสดง ส่วนประกอบควบคุมมุมมอง (html) ส่วนประกอบสื่อสารกับส่วนประกอบและบริการอื่น ๆ

ภาพที่มีค่าพันคำ !

แนวคิดของแองกูลาร์นั้นง่ายมาก มันเสนอให้ "สร้าง" แอพที่มี "Bricks" -> modules

แนวคิดนี้ทำให้สามารถจัดโครงสร้างโค้ดได้ดีขึ้นและช่วยให้นำมาใช้ซ้ำและแบ่งปันได้ง่ายขึ้น

ระวังอย่าให้โมดูล Angular สับสนกับโมดูล ES2015 / TypeScript

เกี่ยวกับโมดูล Angular มันเป็นกลไกสำหรับ:

1- กลุ่มส่วนประกอบ (แต่ยังรวมถึงบริการคำสั่งท่อ ฯลฯ ... )

2- กำหนดการอ้างอิงของพวกเขา

3- กำหนดวิสัยทัศน์ของพวกเขา

โมดูล Angular ถูกกำหนดด้วยคลาส (โดยปกติจะว่างเปล่า) และตัวประดับตกแต่ง NgModule

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)ชิ้นส่วน

โมดูลbasically group the related components, services togetherเพื่อให้คุณสามารถมีฟังก์ชันการทำงานซึ่งสามารถทำงานได้อย่างอิสระ ตัวอย่างเช่นแอพสามารถมีโมดูลสำหรับฟีเจอร์สำหรับการจัดกลุ่มส่วนประกอบสำหรับฟีเจอร์เฉพาะของแอพของคุณเช่นแดชบอร์ดซึ่งคุณสามารถคว้าและใช้ภายในแอพพลิเคชั่นอื่น