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

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

זו הרשימה

1. components
2. services
3. pips
4. directives
5. pages
6. mock
7. images
8. icons
9. fonts

components

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

services

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

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

למידע נוסף ניתן לקרוא כאן:

אנגולר Rxjs – BehaviorSubject in Service file

pips

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

מה ש-pipe עושה זה, לקחת מידע של משתנה, לשנות אותו ולהחזיר אותו חזרה ממש לפני שהוא מצטרף ל-html. הפונקציות האלו לא משתפות את המידע לכל מי שמשתמש בהם כמו סרויס אלא הם "חדשות" כל פעם שיש פניה אליהם, במילים אחרות, כל פניה מקבלת scope חדש.

למידע נוסף לגבי pipes ניתן לקרוא כאן:

Custom pipe in angular

שימוש יעיל ב async pipe – אנגולר

directives

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

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

directive משנה את ה-HTML , כמו: ngIf, ngFor… הם לא משנים את הערך עצמו אלא מבצעים שינוי ב-HTML על פי המידע שהפונקציה קבלה.

למידע נוסף ניתן לקרוא כאן:

pages

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

mock

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

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

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

images, icons, fonts

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