אנגולר – סביבת עבודה וקבצים בסיסיים במערכת

ישנן סביבות עבודה שונות לעבודה עם אנגולר, במסגרת מדריך זה, אנו נעסוק בסביבת העבודה של stackblitz.com. זהו אתר המאפשר פיתוח אנגולר אונליין, שמירת הפרוייקטים, שיתוף והורדה.

1. יש להיכנס לאתר https://stackblitz.com
2. לבחור באפשרות יצירת פרוייקט Angular. מבחירה זו יווצר פרוייקט חדש, מוכן לעבודה מיידית באנגולר ללא כל הורדה נוספת.
3. בראש העמוד מימין ישנה אפשרות כניסה לרשומים. מומלץ להיכנס עם שם משתמש, שם ישמרו כל הפרוייקטים שלך בעתיד.
4. בראש העמוד משמאל ישנה אפשרות של שמירה. מומלץ לקרוא שם משמעותי לפרוייקט.
5. יווצר שורת url בראש המסך, והוא הכתובת אליו ניגשים בפעם הבאה לפרוייקט. (למשתמשים רשומים, כל הלינקים שמורים ברשימה מסודרת).
6. Fork– יצירת העתק של הפרוייקט. ניתן לראות שלאחר לחיצה על כפתור זה ישתנה קישור הפרוייקט בשורת כתובת ה- url וההעתק מקבל כתובת url חדשה.
7. Share– ניתן לשתף את הפרוייקט המוגמר, ואף לאפשר את עריכת הקוד למשתמש אחר.
8. לשים לב! אם יוצאים מהמערכת ואח"כ נכנסים שוב, אם זה לא מאותו מחשב/משתמש (תלוי בהגדרות), הפרוייקט יהיה נעול לשינוי. ולכן האפשרות היא לבצע fork על הפרויקט ולעבוד על ההיעתק, או לחילופין לבצע share כבר בהתחלה, כך שבפעם הבאה שנכנסים הקוד לא יהיה נעול. האפשרות המומלצת ביותר היא לשמור תחת משתמש רשום.

סביבת עבודה זו ידידותית, מומלצת וחינמית.

מקובל לחלק את הפרויקט ולקרוא שמות לקבצים בצורה הבאה:

מומלץ לעקוב צמוד לפרויקט פתוח מאותחל.

קבצים בסיסיים

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

ניתן לעקוף על חלק זה ולהגיע ישר לפרק של קומפוננט, ורק אח"כ לחזור לחלק זה.

שם של קובץ

שם של קובץ יהיה על פי רוב מורכב מנקודה באמצע השם לדוגמא: app.conponent.html  זהו שם של קובץ לכל דבר. לצורך נוחיות בלבד (ומקובל כך) יש נקודה באמצע שם הקובץ, ואינו מעיד כלל על היררכיה של קבצים/תיקיות. כשם שקובץ appComponent.html אינו בהכרח נמצא תחת תיקיית app, כך גם שם הקובץ app.component.html  אינו בהכרח תחת תיקיית app.

index.html

בכל מערכת ישנו קובץ index.html בודד, הוא הקובץ הראשון והיחיד שעולה למשתמש. הוא מכיל תגית אחת בלבד (לא חובה), ומקובל לכתוב בתוכו loading (לא חובה).

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

מהי התגית הזאת? זוהי תגית שיש ליצור אותה. מקובל לקרוא לה app-root או שם דומה שמכיל בתוכו תת מחרוזת של 'app'. יורחב על כך בהמשך.

לדוגמא:

<my-app>loading</my-app>

app.module.ts

אנגולר מחולק ל"חבילות" קוד. כל חבילה היא מודול. ניתן להשוות זאת ל-solution אחד שמורכב ממספר פרויקטים ובמשל זה מודול = פרויקט. לכל מודול יש להצהיר על הקומפוננטות המשתייכות לו. ההצהרה היא שם הקלאס הצמוד להגדרת הקומפוננט, לא שם ה-selector , לא שם התגית.

לדוגמא:

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

הסבר:

Imports – מכיל מערך של "חבילות" קוד, חלקן מיובאות מתוך האנגולר, וחלקן ממקורות אחרים.

BrowserModule – הגדרות לשימוש בדפדפן שכל מערכת העולה לאוויר ה-web צריכה את זה. אחד התפקידים של FormsModule הוא לתת אפשרות שימוש בפקודה [(NgMoulde)] שיורחב. ללא ייבוא FormsModule לא ניתן יהיה להשתמש בפקודה זו. וכאן זה המקום להוסיף עוד ועוד "חבילות" קוד של האנגולר לשימוש ברכיבים שונים, וכן להגדיר מודולים שונים.

Declarations – מכיל מערך של כל שמות הקלאסים של הרכיבים האנגולריים שיוגדרו במערכת. כל רכיב אנגולרי שנוסף (כגון (component, directive ,pipe יש צורך לעדכן במערך זה.

Bootstrap – יכיל את קומפוננט האב, במקרה הזה את AppComponent. (ולשואלים, אין כל קשר בין זה לבין קובץ css של bootstrap…)

על מנת שקובץ זה יכיר את קובץ הקומפוננט יש צורך לתת קישור. הקישור נרשם כך:

import { AppComponent } from './app.component';

כל קומפוננט נוסף שנמצא בקובץ נפרד ויש צורך ל-NgMoulde להכירו כפי שכבר צוין, יש לתת את הנתיב לאותו הקובץ import….

בנוסף, יש להוסיף בראש קובץ זה שלapp.moule.ts  את ההגדרות הבאות:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

אלה נועדו לתת אפשרות שימוש ב"חבילות" הקוד שהוגדרו בנ"ל, השייכות לאנגולר. 

main.ts

בקצרה ממש: יש קובץ בודד כזה בכל המערכת וקיימת בו שורת קוד חשובה מאוד של:

platformBrowserDynamic().bootstrapModule(AppModule)

חשוב!

בתוך הסוגריים רשום שם הקלאס של קומפוננט העל (AppModule), אותו קומפוננט שמתחיל מוכרח גם להופיע בקובץ index.html, כלומר, חובה להשתמש עם תגית זו בקובץ Index.html.