בניית קומפוננטות – Components

תוכנית אנגולר חדשה מגיעה עם קובץ של הקומפוננטה הבסיסית של אנגולר שהיא קומפוננטת app.

נניח שאני רוצה ליצור עמוד שמציג רשימה של קורסים, אפשר ללכת לעמוד ה-app ולשים בו את רשימת הקורסים שלי.

בקובץ הבא השתמשתי ברכיב card של Bootstrap על מנת ליצור את תצוגת הקורס הראשון.

קובץ app.component.html

<div class="container mt-5">
  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/350x250" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">Course Name</h5>
      <p class="card-text">Some quick example text for a course description.
        Adding some value for anyone who consider taking this course.</p>
      <a href="#" class="btn btn-primary">Sign Up</a>
    </div>
  </div>
</div>

בדוגמא פה שמתי במקום תמונה שומר מקום של תמונה מכתובת באינטרנט. כדי להוסיף תמונה שנמצאת בפרויקט אנחנו צריכים להוסיף קבצים סטטיים.

הוספת static files

בתוך תיקיית src יש לנו תיקייה בשם assets, כל קובץ שנמצא בתוך התיקייה הזאת זמין לתוכנית האנגולר כולה. אלו יכולות להיות תמונות, קבצי JS, CSS וכו'.

אחרי שמוסיפים את התמונות לתיקייה אפשר להכניס אותן לקוד.

<img src="assets/course1.png" class="card-img-top">

ככה זה נראה:

אם יש צורך בעיצוב נוסף שרוצים להוסיף, אפשר להוסיף אותו לקובץ app.component.css, שנמצא בתיקיית הקומפוננטה, לעיצוב לקומפוננטה עצמה. אפשר להוסיף עיצוב גלובלי שיחול על כל האפליקציה בהוספת הקוד לקובץ styles.css שנמצא בתיקיית src.

אם אנחנו רוצים להוסיף עוד קורסים לרשימה, נצטרך לשכפל את קוד ה-HTML ולשנות את המידע שיש בו לקורס החדש.

זאת לא הגישה של אנגולר.

אם נרצה להוסיף קורס, לשנות מרכיבים, לשנות עיצוב וכו' נצטרך לעבור על כל הקוד ולשנות אותו. במקום לעשות את זה ניצור קומפוננטה שמכילה את הקוד ונמחזר את השימוש בה.

מהי קומפוננטה?

אפליקציית אנגולר מורכבת מקומפוננטות שונות. הן המרכיב העיקרי של תוכנית אנגולר.

כל קומפוננטה אחראית על משימה אחת, על רכיב אחד שמבצע פעולה אחת שאנחנו רואים על המסך. הדף שלנו יכול להיות מורכב מקומפוננטות שונות.

קומפוננטה אורזת בתוכה את קוד ה-HTML שמרכיב את התצוגה על המסך, את קוד ה-CSS שנותן עיצוב מותאם ואת קובץ ה-TS שמכיל את קוד הפעולה של הקומפוננטה.

בקומפוננטה אפשר להשתמש כמה פעמים בתוכנית אחת, למשל אם ניצור קומפוננטה לכרטיס שמציג קורס, נוכל להשתמש בו עבור כמה קורסים שנרצה. בכל קומפוננטה נוכל לבצע התאמה של כותרת, טקסט, תמונה וקישור בכפתור לפי הקורס שבו אנחנו נמצאים.

קומפוננטת ה-app היא הקומפוננטה הראשית שתחזיק את הבסיס לשאר הקומפוננטות שלנו.

יצירת קומפוננטה

ניצור קומפוננטה עבור רכיב ה-card שלנו. את תיקיית הקומפוננטה עם הקבצים ניצור דרך שורת הפקודה.

ng generate component component_name
או בקיצור
ng g c component_name

כדי לשמור על הסדר בתוכנית, אני יוצרת תיקיית components בתוך תיקיית app. כרגע אין לנו עוד דברים נוספים, אבל בהמשך הסדר יעזור למצוא את מה שרוצים.

ng g c components/card

את הקוד של הכרטיס אני מעבירה מקובץ HTML של תיקיית app לקובץ HTML של תיקיית card.

לקומפוננטת card נקרא מתוך קומפוננטת app. אנחנו קוראים לקומפוננטת app קומפוננטת ההורה parent ולקומפוננטת ה-card קומפוננטת הילד child.

כדי להשתמש בקומפוננטת card נכניס את הקוד הבא לקובץ ה-HTML של קומפוננטת app.

קובץ app.component.html.

<app-card></app-card>

את השם של הקומפוננטה להצגה אפשר למצוא בקובץ ה-TS של הקומפוננטה תחת הגדרת selector.

שימוש חוזר בקומפוננטות

יש לנו קומפוננטה שמחזיקה את הקוד של הכרטיס.

קובץ card.component.html

<div class="card" style="width: 18rem;">
  <img src="assets/course1.png" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Course Name</h5>
    <p class="card-text">Some quick example text for a course description.
      Adding some value for anyone who consider taking this course.</p>
    <a href="#" class="btn btn-primary">Sign Up</a>
  </div>
</div>

בקומפוננטת האב, אני יכולה לקרוא לה כמה פעמים שאני רוצה.

קובץ app.component.html.

<div class="container mt-5">
  <div class="d-flex justify-content-evenly">
    <div>
      <app-card></app-card>
    </div>
    <div>
      <app-card></app-card>
    </div>
    <div>
      <app-card></app-card>
    </div>
  </div>
</div>

עכשיו רק צריך להבין איך מעבירים לכל קומפוננטה מידע על קורס שונה.