מדריך אנגולר בסיסי 101 – חלק 2 – הכרה של הפרויקט

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

package.json

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

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

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

ספרית SRC

זו ספריה שכל הפיתוח שלנו נמצא בה, כל קובץ שאנחנו רוצים להוסיף (או לשנות) לפרויקט יהיה שם.

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

favicon.ico

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

index.html

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

לרוב, הקובץ כבר מגיע מוכן ואין צורך לגעת בו.

styles.scss/css

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

ספרית environments

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

אחד עבור פיתוח ואחד עבור PROD.

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

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

ניתן ליצר עוד קבצים במידת הצורך.

ספרית assets

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

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

בתוך הספריה app נוסיף את הספריות הבאות:

1. components
2. services
3. pips
4. directives
5. pages

בתוך ספרית assets נוסיף:

1. mock
2. images
3. icons
4. fonts

שימו לב, אם אין שימוש בקבצים שקשורים לאחת מהספריות הנ"ל, אין צורך להקים אותה.

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

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

פוסטים קשורים:

מדריך אנגולר בסיסי 101 – חלק 1 – התקנה מדריך אנגולר בסיסי 101 – חלק 4 – מתחילים לבנות מדריך אנגולר בסיסי 101 – חלק 3 – תפקיד הספריות החדשות שיצרנו ריבוי מודולים באנגולר