פרויקט חדש Visual Studio ל-Angular 4
{{ productName }}. סוגריים כאלה מסמנים לאנגולר שהתוכן שייך לו.*ngFor משכפלת את האלמנט לכל איבר במערך. המשתנה המקומי let product of products מייצג את המוצר הנוכחי בכל איטרציה.(click) קורא לפונקציה buy ומעביר לה את האובייקט של המוצר. המרצה מדגים את הפעולה בעזרת הודעה בקונסולה של הדפדפן (F12).*ngIf.פרקי ההרצאה: פרויקט חדש Visual Studio ל-Angular 4
תמלול ההרצאה: פרויקט חדש Visual Studio ל-Angular 4
הטקסט המלא של הדקות הראשונות בהרצאה «פרויקט חדש Visual Studio ל-Angular 4» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בהרצאה הקודמת עשינו פרויקט חדש מ-0, עשינו File, New Project, פתחנו פרויקט חדש ובחרנו טמפלייט, שבלונה שנקראת Angular CLI Application.
נותנים לזה שם ונוצר לנו פרויקט. בגלל שזאת הפעלה ראשונה של הפרויקט על המחשב הזה, על השרת הזה, צריך להוריד את כל המודולים הנדרשים לפרויקט, שהם למעשה ספריות JavaScript שמורידים על ידי NPM, ואנחנו יכולים ממש לראות
איך הן יורדות ומתווספות לנו לתיקייה שמיועדת לכך. וזה היופי של NPM, שאפשר להעתיק רק את הפרויקט ואת כל הספריות הנדרשות הוא יוריד לבד לפי הצורך.
הוא מסתכל בקובץ package.json, רואה את כל ה-dependencies ומוריד אותם מהשרת, זה לוקח זמן אבל זה חד פעמי בלבד כשפותחים פרויקט חדש או מעתיקים פרויקט לשרת חדש.
כמו כן ניתן דרך npm לעדכן מודולים לגרסה חדשה יותר. בגלל שזאת הפעלה ראשונה אנחנו מחכים די הרבה זמן, אנחנו יכולים לראות גם שאנגולר בעצמו נמצא בתוך ה-npm והאפליקציה שלנו עולה.
יש לנו רק רכיב אחד שמורכב משלושה קבצים, קובץ html שזה כל החיצוניות שלו, כל הגרפיקה שלו, קובץ טייפ סקריפט עם כל הלוגיקה וקובץ css עם כל העיצובים.
שלושת הקבצים האלו נמצאים ביחד באותה תיקייה ומרכיבים רכיב אחד, למרות שבהצגה בתוך ויז'ואל סטודיו זה נראה כאילו אחד מתחת לשני, הם כולם באותה תיקייה, פשוט ויז'ואל סטודיו מציגה לי את זה בצורה כזאת בעץ של הפרויקט.
אני רוצה לפתוח אחד ליד השני כדי שנוכל לראות בו זמנית גם את קובץ html וגם קובץ טייפסקריפט. שני הקבצים האלו ביחד מהווים לנו רכיב אחד, קומפוננטה אחת, כאשר טייפסקריפט אחראי על כל הלוגיקה, מה שהיה באנגולר אחד נקרא קונטרולר, והקובץ של html אחראי על כל המראה החיצוני.
שימו לב, אני מוחק את מה שלא צריך, כי אין לי מספיק מקום במסך, שומר, וזה מתעדכן אוטומטית. עכשיו אנחנו נראה איך אנחנו מקשרים בין החלק של טייפסקריפט לבין חלק של html, הרי זה שני קבצים שונים, איך הם עובדים אחד עם השני.
נכריז על משתנה בשם Product Name ועל משתנה בשם Product Price. כדי להציג אותם על המסך אנחנו יכולים להשתמש ב-HTML רגיל כמו דיו, נפתח בלוק נפרד בשביל המוצר, כל מוצר אצלנו יקבל דיו נפרד, בלוק נפרד, ונפתח פסקה חדשה, כל זה HTML רגיל סטנדרטי, לא קשור לאנגולר.
כדי לעבור לעולם של אנגולר אנחנו כותבים סוגריים מסולסלות כפולות, זה סימן מזהה של אנגולר גם באנגולר 1 גם באנגולר 2 גם באנגולר 4 זה סימן המזהה של אנגולר הסוגריים המצולצלות הכפולות האלו ברגע ששמנו אותם עברנו מ html לעולם של אנגולר ויכולים לכתוב את המשתנה ואני רואה שזה באמת עובד בואו באותה צורה גם נציג
את המחיר לחצתי ctrl kd כדי לסדר את הקוד במסך באופן אוטומטי ושימו לב אני לא כותב ידנית את השמות של המשתנים אני עושה תמיד קופי פייסט כדי לא להתבלבל.
עשינו מוצר אחד, נהדר. עכשיו אנחנו רוצים להפוך את המוצר הזה לאובייקט רגיל ב-JavaScript. שימו לב, כל הפקודות הרגילות של JavaScript גם עובדות ב-TypeScript, כי TypeScript זה שדרוג של JavaScript, אבל הוא מבוסס עליו והוא מבין את כל הפקודות שלו.
אני מכריז על אובייקט רגיל כמו שמכריזים עליו ב-JavaScript, קוראים לזה גם ליטרל. אני כותב key ו-value, שם שדה, נקודתיים הערך.
אז יש לנו אובייקט שנקרא פרודקט ויש לו שדה שנקרא name. אפשר את השדה להציג על ידי נקודה ואפשר על ידי סוגריים מרובעים וגרשיים. אלו הם שתי שיטות להציג את הערך של שדה באובייקט.
ועכשיו אנחנו נעשה שני אובייקטים. עכשיו נעשה שני מוצרים בחנות שלנו, פרודקט אחד ופרודקט שתיים. המוצר השני נקרא לו בננה ונשכפל את הדיו כדי להציג גם את המוצר השני.
שימו לב שאפשר להציג את ערך השדה בשתי השיטות. נשים hr קו מפריד בין שני המוצרים, אבל השיטה הזאת שאני מציג לכם כרגע לא מתאימה לחנות עם מאות מוצרים.
אם היו לי שני מוצרים, זאת הייתה בהחלט שיטה טובה. אנחנו רוצים שיטה שתתאים לנו למאות מוצרים ואי אפשר ככה ידנית לשכפל html. אנחנו רוצים לעשות לולאה, אבל לפני שנעשה לולאה אנחנו צריכים לשים את כל המוצרים במערך ב-array, שמסומן על ידי סוגריים מרובעים, כדי שלולאה תוכל לרוץ על כל המוצרים בתוך מערך ואנחנו רוצים
לשייך לתוך מערך מוצר ראשון כשאנחנו פונים למשתנה שנמצא ברמת קלאס כולו צריך לכתוב this.this זה בעצם הקלאס עצמו אני יורד שורה כי אין לי מקום במסך כדי שתוכלו לראות את הכל אז יש לי מערך שמורכב משני אובייקטים וכל אחד מהאובייקטים האלו נמצא ברמת הקלאס עכשיו כשיש לי מערך אני יכול לעשות לולאה שתרוץ על המערך
הזה ועבור כל מוצר תשכפל את הדיו הזה. הדיו הזה יהיה משוכפל עבור כל איבר במערך. הכוכבית מסמנת שהפקודה הזאת ברמת אנגולר הולכת לשנות את העץ דום של הדפדפן ולהוסיף רכיבים ולהוריד אותם.
אנחנו יכולים לראות שכל האפליקציה שלנו חיה על דף אחד, זה כל הקטע של אנגולר שלא עוברים דפים שהכל מתבצע בדף אחד בתוך תגיד שנקראת הפרוט. הכל קורה שמה, כל פעם מתחלפים החלקים, מתווספים החלקים, אבל לעולם אנחנו לא עוזבים את הדף הזה.
בשביל זה המציאו את האנגולר כדי שהכל יהיה בדף אחד. כל האפליקציה קורית בדף אחד והחוויה ללקוח הרבה יותר נוחה. אנחנו מתחילים עם הלולאה, הלולאה בטמפלייד, בדף html מתחילה בכוכבית ng4, לולאת 4. היא תשכפל לנו בעצם את רכיב D ועל המסך let זה הכרזה על משתנה מקומי אני נותן שם למשתנה הזה המשתנה הזה יהיה בפנים
כל פעם מוצר אחר פעם מוצר ראשון פעם מוצר שני ואומר לו על איזה מערך לרוץ בתוך משתנה PRD יהיה כל פעם מוצר אחר פעם ראשונה יהיה אפל אחרי זה בננה זה כמו for each לא לעט for each ב-c shop ואני רואה שזה באמת עובד בואו נוסיף עוד בוצר אחד רק כדי לבדוק שהלולה אכן עובדת ונעשה אותו אנונימי זה אומר
שאין לו משתנה משלו שמצביע עליו נעשה אובייקט אנונימי שהוא חלק מתוך המערך ניתן לו שם וניתן לו מחיר שימו לב הכרזה על אובייקט תמיד בסוגריים מסולסלות ובין שדה לשדה יש לנו פסיק זה חוקים של ג'אווה סקריפט הרגיל ואני רואה שבאמת הוא אוטומטי שיכפל לי אותו שלוש פעמים.
עכשיו אנחנו רוצים לקנות את המוצר. הצלחנו להציג אותם על המסך, בואו נראה איך אפשר ללחוץ על הכפתור ולקנות את המוצר. נעשה פה פונקציה שנקראת buy, לקנות, ובינתיים נעשה רק רישום בתוך קונסול, שהמשתמש בכלל לא רואה את הקונסול הזה, למטרות דיבאגינג שלנו.
הקונסול הזה הוא זמין רק למפתחים, צריך ללחוץ F12 כדי לפתוח אותו, זה נקרא Developer Tools. כשניכנס לפונקציה הזאת, רק נדפיס הודעה כדי שנדע שהצלחנו להפעיל את הפונקציה, זה משהו בשביל עצמנו.
אחרי שנצליח להפעיל את הפונקציה, נעשה משהו גם בשביל המשתמש. בינתיים אני רוצה רק לוודא שאני מצליח להיכנס לפונקציה הזאת על ידי לחיצה על כפתור ביי.
ועכשיו נעשה בטון, כפתור, שיקרא לפונקציה הזאת. אם היינו משתמשים ב-JavaScript רגיל, היינו כותבים onclick שווה שם הפונקציה שאנחנו רוצים לקרוא לה.
זה JavaScript רגיל. אם היינו רוצים שאנגולר ייקח שליטה על האבנט, צריך לשים סוגריים מסביב ל-event ולהוריד מילת on, שיהיה רק קליק.
יפה מאוד. עכשיו נשאר לנו לקחת את הכפתור הזה ולשים אותו ליד כל מוצר. אנחנו מכניסים אותו לתוך ה-div, שיהיה ביחד עם כל המאפיינים של המוצר, שהכפתור יהיה חלק מהמוצר, אנחנו רואים באמת שהכפתור משתכפל בתוך לולאה יחד עם פרטים של המוצר והכל עובד.
השאלה היא איך נדע איזה מוצר הלקוח קנה, על מה הוא לחץ, האם הוא לחץ על המוצר הראשון או שהוא לחץ על המוצר השלישי או על השני. אז יש לנו פה בסוגריים פרמטר, אנחנו יכולים בסוגריים של הפרמטר להעביר לדוגמה שם המוצר ואז מה שאנחנו נכתוב שמה בסוגריים ייכנס לנו פה לתוך המשתנה שאנחנו יכולים לתת לו כל שם שאנחנו רוצים.
ואני בכוונה נותן שמות