הוספת Bootstrap ל-Angular 4

תמלול ההרצאה: הוספת Bootstrap ל-Angular 4

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

1. 00:03

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

2. 00:25

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

3. 00:31

   ועכשיו עכשיו האתר טוען את ה-CSS שלהם והתפריט נראה מאוד יפה אבל עדיין התפריטים הנפתחים לא עובדים לנו וזה בגלל שלא העתקנו את ה-JavaScript את קוד JavaScript ששייך ל-Bootstrap עדיין שום דבר לא עובד נלחץ F12 ונראה שיש לנו הודעת שגיאה שאומרת שחסר לנו JQuery ספרייה של JQuery

4. 01:27

   נלך לגוגל ונחפש ספרייה של JQuery בנקודת הפצה cdn זאת נקודת הפצה ונעתיק את הלינק לספריית ג'קוורי שימו לב אני מכניס את הלינק לפני הקובץ של בוטסטראפ gs אז יש לנו בוטסטראפ css ג'קוורי ובוטסטראפ gs והורדת השגיאה נעלמת והתפריטים מתחילים להיפתח כמו כן אפשר לראות שבוטסטראפ מותאם לסמארטפונים ולמסכים הקטנים מצוין התפריט עובד לנו והכל מצוין

5. 02:05

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

6. 02:22

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

7. 02:52

   שפה רשומים כל המודולים של npm הנדרשים לפרויקט שלי כדי שאני אוכל להפיץ את הפרויקט הזה בלי להעתיק את התיקייה של המודולים והמודולים ישוחזרו אוטומטית מהשרתים של ה-NPM.

8. 03:10

   אנחנו צריכים להיכנס לתיקייה שבה נמצא package.json ב-CMD כאדמיניסטרטור ולרשום npm install את השם של החבילה bootstrap ==save ==npm install יוריד לנו את הספרייה לתוך תיקייה מקומית של NodeModules ו-npm save יוסיף אותה לקובץ package.json בכל הפעלה npm בודק שיש לו את כל המודולים הנדרשים ואם חסר משהו

9. 03:41

   הוא מביא אותם מהשראת והוא בודק את זה לפי הרשימה בקובץ הזה של package.json ולכן חשוב מאוד שזה יהיה רשום גם שם כ-dependency לאחר השלמת ההורדה אנחנו רואים שהbootstrap אכן מופיע בתיקייה מקומית ואנחנו צריכים עכשיו לרשום אותו בקובץ המיוחד של אנגולר CLI כדי שייקח את כל קבצי ה-CSS ואת כל ה-JavaScript המקומיים ויארוז אותם ביחד לקובץ אחד גדול ויצרף את זה לפרויקט שלי.

10. 04:17

    בואו נראה איפה נמצא קובץ CSS ונפנה את המערכת לשם. כמו כן אנחנו צריכים גם קובץ JavaScript של Bootstrap ואני רואה שקיבלנו הודעת שגיאה כי הגרסה של jQuery ישנה מדי בואו נעזר שוב ב-NPM והפעם נתקין את הספרייה המוכנה של jQuery וזה היופי ב-NPM שהוא עוזר לי בלהוריד ספריות

11. 04:46

    מוכנות ולשים אותן בתיקייה מקומית ומנהל אותם עבורי אני מפעיל מחדש את האפליקציה כדי ש-Webpack התוכנה תארוז את כל הספריות JavaScript שלי ביחד קובץ אחד גדול שנקרא main.bundle.js ואת כל קבצי css לקובץ אחד style.bundle.js