PracticU

News Service

בלי כתוביותעם כתוביות
PracticU › קורס אנגולר 4 עם Angular - WebAPI › News Service
מילון מושגים:
שירות - תוכנה שרצה ברקע ומספקת פונקציונליות לרכיבים אחרים, לרוב ללא ממשק משתמש, ומופעלת אוטומטית עם המערכת.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
מודל - רכיב שמייצג את הנתונים ואת הלוגיקה העסקית באפליקציה. גם ייצוג מופשט של מערכת או תהליך.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.
תבנית - מבנה בסיסי מוכן שממנו יוצרים פריטים דומים, כמו תבנית עמוד או תבנית מסמך.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

News Service
ההרצאה מעבירה את רשימת החדשות מקוד קשיח ב-HTML לשירות (service) נפרד, ומכינה את הבסיס לפתרון בעיית ניתוב של מזהה חדשות שאינו קיים.
הבעיה
1. מזהה לא קיים: בכתובת של חדשה מספר 55 או 66 מוצג דף עם שגיאות, למרות שאין חדשות כאלה. החדשות הקיימות בקוד הקשיח הן שלוש בלבד.
מודל החדשה
1. מחלקה: נוצרת מחלקה SingleNews עם newsId, newsTitle, productId ו-newsBody. כך כל חדשה היא אובייקט עם מבנה קבוע.
השירות
1. רשימה: NewsService מכיל מערך newsList מטיפוס SingleNews, שמאותחל עם שלוש חדשות לדוגמה.
2. הזרקה: קומפוננטת החדשות מזריקה את השירות בקונסטרקטור, ומציגה את הרשימה בתבנית ngFor.
3. מוצר מקושר: לכל חדשה יש productId, שמשמש לחיבור לכפתור קנייה של מוצר ספציפי מתוך רשימת המוצרים.
פרטי חדשה
1. שליפה: מזהה החדשה נלקח מהכתובת, והחדשה נשלפת מהשירות בעזרת find.
2. כפתורים: כפתור הקנייה של המוצר המשויך מופעל רק כשה-productId שונה מ-0. כפתור החזרה מעביר לרשימת כל החדשות.
סיכום
בסיום ההרצאה החדשות מנוהלות בשירות ומוצגות לפי מזהה, והבסיס מוכן לבדיקה של מזהה לא קיים בניתוב.
השיעור הבא בקורס: Guard CanActivate

פרקי ההרצאה: News Service

  1. 00:00

    בעיית ניתוב חדשות שאינן קיימות

  2. 01:00

    יצירת מודל של חדשה בודדת

  3. 01:42

    יצירת מערך חדשות זמני בסרוויס

  4. 02:53

    מילוי רשימת החדשות באובייקטים

  5. 03:53

    רישום הסרוויס במודול והזרקתו לקומפוננטה

  6. 04:46

    לולאת ngFor להצגת החדשות

תמלול ההרצאה: News Service

הטקסט המלא של הדקות הראשונות בהרצאה «News Service» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:28

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

  3. 00:55

    אנחנו רוצים ש-news list רשימת החדשות תהיה לא ככה רשימה קבועה ב-HTML אלא יהיה לנו סרוויס כדי שיהיה לנו סרוויס אנחנו גם רוצים שיהיה לנו מודל או בייקט אחד של מה זה חדשות אז אני עושה פה ctrl v עושה v single news כאילו מה זה חדשה בודדת single news יהיה לנו פה news id יהיה לנו פה news text שזה למעשה title news title נקרא לזה

  4. 01:24

    ויהיה לנו product ID שזה המוצר המוזל ויהיה לנו פה ה-body שלו use body יופי הלאה עכשיו אני עושה סרוויס של חדשות אני אקרא לו new service עכשיו תיאורטית ה-new service הזה אמור היה לקחת דברים מהשרת אבל אני לא רוצה עכשיו להסתבך עם ליצור טבלה בשרת ליצור Web API Entity Framework אבל אני לא רוצה להסתבך וליצור טבלה בשרת אחרי זה Entity

  5. 01:52

    Framework בצד של השרת אחרי זה קונטרולר אחרי זה לעשות פה htp-get אני עכשיו לא רוצה להתעסק בזה אני פשוט יוצר מערך של חדשות כי כבר איך לעשות htp-get כבר עשינו בהרצאות קודמות כששלפנו רשימת מוצרים מהשרת אז אני עושה פה public news list שזה יהיה בעצם מערך מסוג single news מערך יופי עכשיו כדי להתחיל את המערך הזה אני יכול לעשות

  6. 02:18

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

  7. 02:38

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

  8. 03:00

    הוא הולך להיות מה שכתבנו פה hardcoded אנחנו מעתיקים אותו מכאן ואפשר למחוק אותו מכאן product id ו-news body product id אני לוחץ ctrl tab כל פעם 0 זה אומר שאין מוצר מוזל ו-news body זה אותו דבר רק אני אוסיף לו הרבה נקודות כי אין לי כוח לכתוב חדשות באמת וזה האובייקט הראשון שלו חדשות, השני שלי, הנה עכשיו

  9. 03:23

    הוא כבר רואה, אינטליסנס כבר רואה, אתם רואים? בגלל שזה לא עירי כללי, אלא עירי מסוג מסוים, הוא יודע איזה שדות צריכים להיות שמה.

  10. 03:31

    ניוס טייטל, מה הטייטל הבא שאני צריך? שה-it's sold out. פרודקט ID 0. קונטרול רווח מאוד נוח והרבה מאוד נקודות. ואחרון, חדשה מספר 3, טייטל, כותרת to-for-sale ומוצר 14. יופי, עשינו עכשיו סרוויס שמחזיר לי את רשימת החדשות ואנחנו יכולים ללכת עכשיו לניוס קומפוננט ולהגיד לו במקום הדבר הזה תעשה לי לולאת NG4

  11. 04:04

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

  12. 04:26

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

  13. 04:46

    למעשה הולך להזריק כוכבית NG4 use מתוך news.newslist. אז יש לי פה NG4 שרץ על כל החדשות ועבור כל אחד הוא ישכפל לי את הרכיב הבודד הזה.

  14. 05:03

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

לקורס המלא: קורס אנגולר 4 אונליין עם WebAPI

ההרצאה הקודמת: Angular 4 - Animations

ההרצאה הבאה: Guard CanActivate

הרצאות קשורות מקורסים אחרים

  • Service Throttling
  • Create Service
  • מה זה Web Service
  • Service Module

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React