אנגולר – קומפוננט

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

קומפוננט – על פי רוב, משמש כתגית html שמקושרת לאוביקט נתונים. לכל קומפוננט יש את התבנית של ה-html בה יופיע כאשר יקראו לתגית זו, וכן יש את הקלאס הצמוד שלו. אין קומפוננט ללא קלאס! כל קומפוננט, מכיל אובייקט נתונים.

כיצד יוצרים קומפוננט?

להלן מספר שלבים למתכנת המתחיל.

ישנן סביבות עבודה המאפשרות קיצורי דרך. ב-stackblitz למשל, לחצן ימני על התיקייה הרצויה ->  Generate Component פותח שדה טקסט יש להזין את שם הקומפוננט ואח"כ לחיצה על enter תיצור את הקומפוננט עם כל הרכיבים.

שלב ראשון

יש להוסיף תיקייה בשם הקומפוננט שתוגדר תחת תיקיית src.
יש להוסיף 3 קבצים מהסוגים הבאים: html, ts, css
לכל אחד מהם יש לתת את אותו השם, רק עם סיומת אחרת.

לדוגמא, קומפוננט בשם server:

• שם התיקייה server
• שם קובץ html הוא component.html
• שם קובץ ts הוא component.ts
• שם קובץ css הוא component.css

שלב שני

יש למלא תוכן התחלתי בקובץ ts. לדוגמא:

import { Component } from '@angular/core';
@Component({
  selector: 'my-server',
  templateUrl: './server.component.html',
  styleUrls: [ './server.component.css' ]
})
export class ServerComponent  {
}

הסבר:
@Component – הגדרה שמדובר ביצירת קומפוננט.
selector – מייצג הקומפוננט, במידה וזו תגית, זה יהיה שם התגית.
templateUrl – הנתיב בו נשמר ה-html, התבנית של הקומפוננט.
styleUrls – הנתיבים בהם נשמרים קבצי ה-css המתאימים לקומפוננט זה. מערך נתיבים לקבצי css.

server.component.html – לדוגמא:

<div class="title">This is the Server Component</div>

server.component.css – לדוגמא:

.title{
  color: yellow;
  font-size: 30px;
 }

שלב שלישי

יש להוסיף בקובץ moulde.ts שנמצא תחת תיקיית app במערך של declarations את שם הקלאס של הקומפוננט החדש שנוצר שיודגש כאן בשביל הדוגמא:

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ServerComponent],
  bootstrap:    [ AppComponent ]
})

יש להוסיף בראש הקובץ module.ts נתיב של מיקום הקובץ. יש לציין, שבהוספת נתיב לקובץ ts בקובץ זה, אין צורך לרשום שהקובץ הוא סיומת של ts, משמיטים את הסיומת.

לדוגמא:

import { ServerComponent } from './server/server.component';

שלב רביעי

כעת ניתן להוסיף שימוש בפועל של הקומפוננט. לדוגמא, בקובץ app.component.html יהיה הקוד הבא:

<p>
This is the app
</p>
<my-server></my-server>

כעת ניתן לראות פלט של הקומפוננט החדש שנוצר!

חשוב!

• ההגדרה export לקלאס נועדה לתת "הרשאה" לקבצים אחרים. (לא יורחב כעת(.
• ברגע שיש קריאה לתגית זו, נוצר אובייקט מסוג הקלאס של הקומפוננט.
• היות שיש כאן שימוש ב @Component שזה פיצ'ר של האנגולר, יש להוסיף בראש הקובץ ts את שורת הפקודה הבאה:

הרחבה

שימוש בפיצ'ר המתחיל עם @ של האנגולר, עלול לדרוש import מתאים. כאשר תיכתב התגית <my-app></my-app> יעלה התוכן של הקובץ app.component.html. בשלב זה, לא ניתן להכניס עוד נתונים בין תגית הפתיחה לסגירה. במידה ואכן יש צורך בכך, תורחב אפשרות זו בהמשך החומר.

לפי מה נקבעת שם התגית? לפי ה-selector.

– selector הערך השימושי ביותר הוא שם התגית. היות שב html אין הבדל בין אותיות גדולות לקטנות, לכן לא תהיה משמעות לשם myApp"" בצורה זו, זה ייקרא בדיוק כמו "myapp" ולכן על מנת להפריד בין מילים יש להשתמש עם קו מפריד my-app"".

ישנו ענין קצת עמוק יותר ב-selector, לאחר תירגול ועבודה קל יותר להבין. ובקצרה, ה-selector יכול להיות גם שם של קלאס וייראה כך selector:'.my-app' עם נקודת קידומת כמו selector ב css עבור קלאס של css. על מנת להשתמש בתגית זו, אפשר להשתמש כך:

<div class="my-app"></div>

ניתן להגדיר סלקטורים שונים כמו ב css.

לסיכום

קומפוננט מורכב משלושה חלקים:

1. קובץ html שזו התבנית של הקומפוננט.
2. קובץ ts המכיל קלאס עם שדות נתונים, שם התגית, והגדרת הקשר ל-html ולקבצי ה-css.
3. קובץ css מותאם לקומפוננט זה.

styles

ניתן להגדיר לקומפוננט במקום styleUrls הגדרה של styles ולפרט בו במקום קלאסים או הגדרות שונות של css. לא ניתן להגדיר עבור אותו קומפוננט גם styleUrls וגם styles.

template

ניתן לתת את ה-template (מבנה ה-html) בקובץ עצמו, ולא נתיב לקובץ התבנית. במקרה זה לא ניתן להגדיר עבור אותו קומפוננט גם template וגם .templateUrl. לדוגמא:

@Component({
  selector: 'my-app',
  template: `<h1>Hello!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})

הערה חשובה

ישנו סוג של גרש שקוראים לו "גרש הפוך". הוא לא הגרש הרגיל. ניתן לראות שהגרש בהגדרת ה-selector הוא גרש רגיל, ואילו הגרש שנמצא בהגדרת ה-template הוא גרש מוטה יותר. גרש אחר.

כאשר כותבים קוד בקובץ js לא ניתן לעבור שורה ללא סיום של פקודה או התחלה של סוגריים וכד'. לא ניתן לשבור string באמצע ללא תו מקשר. במקרה זה, יש צורך לשבור את ה-string לשורות נפרדות לפי התגיות (בשביל הנוחות). כל תגית תתחיל בשורה חדשה. לשם כך, ניתן להשתמש בגרש ההפוך ולשבור שורות בצורה חופשית בדיוק כמו בקובץ html ללא צורך בתו מקשר.

בקובץ מסוג html, אין בעיה שכל תגית תהיה בשורה נפרדת, כי כן ניתן לכתוב כל תגית בשורה נפרדת או אפילו באמצע תגית "לשבור" שורה. אך כאן מדובר בקובץ ts!

כנ"ל בהגדרת קלאסים של css, בהגדרה של styles. יש צורך להפריד כל הגדרת style ולהתחיל כל הגדרה בשורה נפרדת (לנוחיות). ולכן, על מנת לאפשר "שבירת שורות" ללא סימון נוסף מקשר בין שורה לשורה,  יש לעטוף את כל ה-string בגרש הפוך.