Angular 4 - Bootstrap Coursel
פרקי ההרצאה: Angular 4 - Bootstrap Coursel
תמלול ההרצאה: Angular 4 - Bootstrap Coursel
הטקסט המלא של הדקות הראשונות בהרצאה «Angular 4 - Bootstrap Coursel» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אנחנו רוצים להוסיף תמונות באתר שלנו שיהיו לנו תמונות אז נתחיל מקרוסלה יפה שתהיה לנו למעלה נלך לאתר של בוטסטראפ נעבור לגרסה 3 כי גרסה 4 עדיין לא סופית אבל כל מה שאני מסביר זה די אותו דבר בגרסה גם 3 וגם 4 ואנחנו מחפשים בג'אווה סקריפט בפרק של ג'אווה סקריפט קרוסלה מה זה קרוסלה קרוסלה זה כזה דבדוב בין התמונות שאתם רואים באתרים למעלה גם אני רוצה שיהיה לי באתר
כזה באנר עם תמונות. אז אנחנו פשוט ניקח את כל הדוגמא שלהם, כן, את כל הדוגמא הזאת, נעשה לה קופי ונשים אותה אצלנו ברשימת המוצרים, בפרודקט ליסט.
אבל אני לא רוצה שזה יהיה הכל בתוך אותה קומפוננטה בפרודקט ליסט כאן, אני רוצה שזה יהיה למעלה. אבל אני לא הולך להכניס את זה לכאן, אני רוצה לעשות רכיב חדש, קומפוננטה חדשה, כמו שעשיתי לקארט, לעגלת קניות, כמו שעשיתי ל-checkout, איפה שממלאים את הפרטים, פה אני רוצה להוסיף קרוסלה כזאת משלי, לעשות פה איזושהי קרוסלה
ושה-HTML שלה יטען, אז כדי לעשות את הקומפוננטה של קרוסלה בואו נעשה את זה, נפתח את ה-CMD בתיקייה שבה נמצא AppModule ונשתמש באנגולר CLI שיכיל לי את הקומפוננטה החדשה באוטומט שיפט רייט קליק במקום ריק Open Command Here CMD אני אכתוב ליתר ביטחון למי שיש פאור של NGG Generate Component איזה קומפוננט אנחנו
רוצים? אנחנו רוצים בתיקיית קומפוננטס שיעשה לי קומפוננטה שנקרא לה, איך נקרא לה? נקרא לה גם קרוסל, ככה נכתוב קרוסל. והנה הוא יוצר לי את הקומפוננטה, יפה מאוד, עכשיו אני אקח את ה-HTML ואכניס אותו בקומפוננטה החדשה שעשינו. יופי, קומפוננט HTML, אני מכניס פה את ה-HTML החדש שלי
ולוקח את השם של הקומפוננטה ומכניס בפרודקט ליסט למעלה, מעל כל הרכיב יהיה לי כזה דבר, בואו נראה איך זה נראה. בואו נראה איך זה נראה, אוה, יש לי את זה.
טוב, עכשיו צריך להביא תמונות ולעשות לזה איזשהו עיצוב מינימלי. אז יש לי פה בשולחן העבודה שלוש תמונות, כמובן שבאמצעיות אתם תשימו אותן בשרת והגרפיקאי יכין לכם אותה באותן מידות נכונות.
אני לוקח פה שלוש תמונות ואני הולך לשים אותן בתיקייה נכונה, רק באמצעיות אתם גם צריכים לעשות עמודה בדאטאבייסט לשם של תמונה. ליד כל פרודקט צריכה להיות עמודה עם שם של מוצר שלו, עם שם שלו.
אבל אני מניח שהשם שלו זה יהיה השם של המוצר שיהיה אחד לאחד. טוב, כל התמונות איפה שמים? בתיקיית Assets. שימו לב, Assets זה נכסים. אז יש לי App, שזה כל התוכנה שלי.
בתוך ה-App יש לי Components, Models, Services ומודול הראשי, וחוץ מ-App, שזה בעצם התוכנה, יש Assets. Assets זה נכסים, שזה אקסטרות שיש לי באתר. אז אני עושה פה פשוט Paste לכאן, או Open Fold ואז Paste, זה לא משנה.
הנה, אני עושה להם קופי-פייסט והנה הם מופיעים כאן. זה פשוט תיקייה שבה נהוג לשים את כל הדברים שהם אקסטרה.
אז בתוך הפרויקט שלי יש תיקיית סורס, בתוך הסורס יש לי למעשה את כל אתרי האינטרנט עם אינדקס html app, שזה בעצם אנגולר app ו-assets זה האקסטרות שלו. למעשה כל זה אתר.
ככה אני עושה קופי פייס לאתר הזה והוא עובד בשרת האמיתי שזה הסורס והפרויקט של ויז'ואל סטודיו עם כל התוספות שלו נמצא מחוץ לתיקיית הסורס. כל מה שאתם רואים חוץ מ-source כל זה זה למעשה ה-visual studio צריך כדי שיהיה לו פרויקט תקין לדוגמה איזה פקאג'ים הוא צריך להביא package.json ואיזה מודולים אקסטרה הוא צריך וכולי יופי עכשיו אני צריך להגיד לו מאיפה
לקחת את הקרוסל הזה אז נלך לקומפוננטה של קרוסל ובואו נעבור מה אנחנו רואים פה אנחנו רואים פה 012 אנחנו רואים פה את ה-image source שימו לב זה הנקודות למטה העגולות שיש נכון אם למטה יש נקודות העגולות, וכשאני לוחץ עליהם אני עובר לתמונה ראשונה, לתמונה שנייה.
זה החלק הזה, קרוסל אינדיקטורס, זה למעשה הדבר הזה פה, אתם רואים? העיגולים האלו שאני עובר לראשון, אני עובר לשני, פה אני יכול ללחוץ עליהם לעבור, זה לחיץ, אתם רואים? זה לחיץ.
הדבר הזה זה למעשה שלושת אלו, אוקיי? יפה מאוד. אחרי זה התמונות עצמן הולכות כדיו, בואו תראו. התמונות עצמן הולכות כדיו כאן, אתם רואים?
דיו של אייטם, ושימו לב, האייטם הראשון הולך להיות אקטיב משם המתחילים. אז יש פה בעצם למעשה שתי תמונות דיב אחד, דיב שתיים, ולמטה זה ה-controls למטה זה למעשה שמאלה וימינה.
החצי שמאלה וחצי ימינה זה בעצם הלינק הזה והלינק הזה אשר זה שמאלה וזה ימינה. והפעולות שלהם זה דאטה מקף סלייד כל מה שמקף זה הפעולות שהם עשו זה למעשה האטריביוט שהם הוסיפו בעצמם המתכנתים של בוטסטראפ כל מה שהם מקף זה מתכנתים של בוטסטראפ הוסיפו לבד.
אז מה שאני צריך לעשות כאן, אני צריך פה את ה-source הזה, לתת לו את ה-source. אז בואו ניתן לו את ה-source. אמרנו, אני לא יודע מה, אפשר לעשות אפילו ככה, יחסית לתיקייה שלי, בואו תצא החוצה, בואו תצא החוצה.
הגיע ל-assets, ובואו נתחיל ב-chai. טקסט אלטרנטיבי לתמונה, אני מקווה שאסור לך להציג תמונות או שאתה לא יכול. chai, image, אני יודע מה. ופה הטקסט שיהיה כתוב מתחת לתמונה. לקחת לתמונה כאילו יכול להיות טקסט כמו השם של התמונה פה יכול להיות פה טקסט כתוב אתם רוצים לראות מה זה צ'אי ושלושה סימני קריאה ופה נעשה אותו דבר רק במקום צ'אי בואו נרשום משהו אחר עוגת פבלובה ופה נרשום את המילה פבלובה
ושלושה סימני קריאה וזה טקסט אקסטרה שאפשר להוסיף זה ממש מיותר אם אני הייתי רוצה עוד רכיב יכלתי לקחת את האייטם הזה ולשכפל אותו בוא נעשה עוד אחד אחרון כמובן שאתם יכולים לעשות בג'אווה סקריפט את כל השכפולים האל ג'אווה סקריפט אני כותב פה hardcoded אבל יכלתם לעשות קוד בג'אווה סקריפט שמוסיף לכם את הדימים האלו דינמית או לולת איזה שהיא NG4 שרצה על
מערך של שמות שמגיעים מהדאטה בייסט טוב תכף נעשה דברים דומים לזה בואו נראה שזה עובד ונעשה דברים דומים מה אני רואה פה או אני רואה את התמונות שלי קצת גדול אבל עובד קודם כל עובד טוב בוא ניתן לזה קצת גודל כי זה נראה קטסטרופה אני דבר ראשון מנסה לעשות שינויים פה לשחק כאן עם התמונות ואם הכל בסדר אז כבר להעביר לקוד
האמיתי שלי אז ברמת הקורוסל הכולה בואו ננסה לתת לזה max width נגביל את זה ל-300 פיקסלים איך זה נראה נראה הרבה יותר טוב ו-margin bottom ננסה לתת לזה 25 פיקסלים כדי שיהיה לי קצת מרווח לא טוב אני אנסה לתת לזה אולי כאן או כאן זה טוב קודם כל אתם רואים פה זה עובד אתם רואים פה 3-9 כאלו וזה את הטקסט הזה אני רוצה להוריד והגודל הזה זה די מתאים לי האמת, די מתאים לי, אז בואו
נקבע את זה. איך אנחנו נקבע את זה? אנחנו נלך לקרוסלה ונראה איפה אני רוצה לקבע את זה. אני רוצה לקבע את זה ברמת הדיב הראשי. אתם רואים? זה שיש לו קרוסל סלייד. למה? כי עשיתי את זה ברמת הדיב הראשי, איפה שיש לו קרוסל סלייד. יפה מאוד.
יש לו גם דיב, אתם רואים? יש לו גם איי-די. אז אני יכול לכתוב פה סטייל שווה, אבל יש לי קובץ css שאני ארשום את כל זה בתוך קובץ css שתהיה לי הפרדה בין העיצוב ללוגיקה ל html, טייפסקריפט בנפרד, html בנפרד וcss בנפרד וניקח את ה-id הזה שזה יכול להיות כל ה-id האמת, אתם רואים? כך הוא מזהה לדוגמה על מי להפעיל את הפעולה, דאטה טרגט, איזה id ודאטה סלייד 2 למי לעבור, ככה הרכיב li הזה
יודע לאן ללכת ואותו דבר next ו-prev, יופי בואו נעשה פה סולמית כי זה id כי זה לא קלאס ועכשיו עכשיו אני מצפה שזה יהיה פה ככה יופי זה עובד עכשיו דבר היחיד אולי מרג'ין לפט אאוטו אאוטו זה אומר לשים את זה באמצע למעשה רייט אאוטו אתם רואים אאוטו אוטו זה אומר לשים אותו למעשה באמצע שהשוליים יהיו זהים משני הצדדים
שמצד שמאל ומצד ימין יהיו שוליים זהים ובוטום זה אומר פה מרווח של 25 אם אני אעיף פה בוטום זה יהיה צמוד אם אני שם בוטום זה אתם רואים ככה יפה ומלמעלה יש לו איזה רווח טבעי שהוא לא לא יודע מאיפה הוא קיבל אבל מאיפה שהוא קיבל רווח טבעי מאיזשהו רכיב יופי אם אתם מתעניינים
מאיפה מגיע לדוגמה רווח מלמעלה אתם יכולים לעשות חץ לבוא לראות שהרכיב הזה הוא בדיוק הגודל הזה זאת אומרת שהרכיב הבא כל הרכיב לבדוק מה הגובה שלו ואתם ישר רואים הנה זה הרכיב הזה שהוא מתחיל כאן הנה זה מהנב מגיע אתם רואים ברכיב של נב יש לו שוליים של 20 זה ה-20 הזה אם אני אעיף אותו זה ייעלם פה הרווח אז הרכיב של נב נתן לי את השוליים מלמעלה ומלמטה
אני נתתי עדנית יופי זה כל העיצוב שאני צריך בסליידר הזה אני רואה שהסליידר הזה נראה טוב חוץ מפבלובה אז יש את השמות להעיף ואת הדבר הזה להעיף עכשיו מה הבעיה כאן שהגודל של תמונה הוא לא נכון הגרפיקאי נתן לי תמונה לא בפרופורציות הנכונות ואז יוצא שהוא מכווץ ואני הייתי במציאות מחזיר את זה לגרפיקאי שיעשה לי תמונה בגודל הנכון לפחות שהפרופורציה בין השם לזה יהיו נכונים בין האורך לרוחב טוב
אז מה אני עושה אז אני מוריד את הרכיב האחרון של כי הוא בגודל לא נכון ומוריד את השמות האלו עם הקרוסל קפשן אני לא צריך אותו וזה נראה לי ככה הכי טוב לו ואת השלישי כאן אני גם לא צריך אותו כי יש לי רק שתי תמונות טוב אני מקווה שעם קרוסל אתם כבר לא מפחדים מהם אתם יכולים גם להעיף את הנקודות האלו ולהשאיר
את השמות כל אחד איך שהוא אוהב חברה יש כאלו שיגידו לי תקשיב עדיף לך להשאיר את השמות ולהעיף את הנקודות בוא ננסה ככה גם לרוב מי שמתעסק בזה זה לא אתם זה הגרפיקאי ואז את כל זה אני עושה קונטרול קייסי קוראים צ'אי, בבלובה, לא יודע לא אוהב את השמות האלו אז אני מעיף את זה, כמובן שאתם יכולים לעצב איך שאתם חושבים לנכון, אני לא גרפיקאי דגול, אז יצא לי ככה בלי הנקודות
אפילו, זהו, והוא מדפדף לבד, טוב בואו נעשה עכשיו תמונות כאן, נשים פה תמונות של מוצרים, כמובן שאין לי תמונות אמיתיות אבל בואו נעשה כאילו יש לי, אז נעשה דבר כזה, נלך לאובייקט של פרודקטס, כאילו זה מגיע לי מהדאטאבייס העמודה הזאת, אוקיי? כאילו מהדאטאב נלך למודל ונוסיף לזה שם עמודה image path עכשיו אני מדמה מצב שמישהו הוסיף עמודה בדאטאבייס
עם שם של תמונה ועם נתיב לתמונה אוקיי כך אני מדמה את זה image path וזה הולך להיות סטרינג בוא נלך עכשיו לפרודקט סרוויס זה שמתחבר לדאטאבייס ונגיד לו שעבור כל מוצר שמגיע לך מהסרבר ריספונס זוכרים יש לנו פה סרבר ריספונס ועבור כל מוצר תוסיף קוונטטי אחד וגם תוסיף עכשיו מאפיין חדש שנקרא image path עכשיו אם העמודה הזאת הייתה מגיעה מדאטאבייס אמיתי לא הייתי צריך להוסיף את השורה הזאת
שאומרת ש-image path עבור כל המוצרים שווה לאיזשהו נתיב. עכשיו בוא נעשה לזה נתיב כלשהו, אני אקח את כל הנתיב הזה ורק נשים עכשיו טופו, זה שמחקנו אותו, שיופיע כאן. יופי, אז יש