באיזו גירסת Angular את רוצה להתקין את הAngular מטריאל?
עד אנגולר 6 זו התקנה אחת ומאנגולר 6 זו התקנה אחרת...
שימי לב שגרסת מטריאל חיבת להיות נמוכה מגרסת ה Angular שלך, אחרת הפרויקט בכלל יעוף עם שגיאה.
חשוב לציין: ראיתי שמגרסת אנגולר 6 אפשר להתקין דרך ng add @angular/material כמו המתואר בהתקנת אנגולר 8, אני מודה שלא ניסיתי להתקין כך באנגולר 6, אם מישהי מנסה ויכולה לשתף אותנו בזה- אשמח מאוד!
תוך כדי התקנה התוכנה תשאל אותך באיזה theme (פורמט עיצוב) להתקין (יש כמה סוגים) , פשוט בוחרים את האפשרות הרצויה עם החיצים למעלה/למטה (בדרך כלל זה custom) וממשיכים להתקין.
לאחר מכן התוכנה תשאל אותך אם להוסיף גם את Hummer.js ואנימציות, עונים Y וממשיכים
ואפשר להתחיל ליבא ספריות ולשהתמש בהן.
השימוש:
בעיקרון כל פקד במטריאל מכיל הסבר מאוד מפורט על הוספתו והשימוש בו.
בגדול- על כל פקד שממתווסף- יש לייבא אותו ל app.module.ts:
import {MatSlideToggleModule,MatAutocompleteModule} from '@angular/material';
בכוונה ייבאתי שני פקדים כדי שתראי שאפשר לייבא את כל הפקדים באותו import.
(אין צורך לציין שצריך להוסיף את הפקדים גם במערך imports שבהמשך הקובץ, נכון?)
היה לי שם איזשהו באג וכשדיבגתי את הספריה גיליתי שיש שם ארוע של click שמתרחש בכל לחיצה על המסך ובארוע יש do while שעובר על כל התגיות שנלחצו עד למציאת התגית הרצויה .. כך שבאמת עדיף ספריות מבוססות ...( אגב לספרייה הנ"ל היו יחסית הרבה הורדות ולא הרבה באגים ..)
לגבי הספריות הגדולות מהנסיון שלך יש עדיפות ל angular matrial על פני ngx-bootstrap?
בדיוק בגלל שנכון להתקמצן על התקנות מודולים רחבים- לדעתי כדאי כן להתקין את מטריאל.
הספריה מכילה ממש את רוב הפקדים והפונקציות שצריך כל פרויקט בסיסי.
בתחילה גם אני ממש חשבתי שזה שטויות ולא צריך להתקין ספריה שלימה בשביל משהו קטן שהייתי צריכה. אבל עם הזמן ראיתי שכבר לוקח לי פי חמש זמן להתקין עשר ספריות אחרות שכל אחת מכילה אלפית מהיכולות של מטריאל.
סביר להניח שאם את צריכה עכשיו פקד מסוים, במקרה שלך- auto complete, בקרוב תצטרכי גם drad-drop או פקד פופולרי אחר ממטריאל. חבל עכשיו לשבור את הראש בחיפוש ספריה לפקד כזה, ואח"כ לחפש ספריה אחרת לפקד אחר.
לצורך המחשת הפופולאריות, צרפתי תמונה מהאתר של מטריאל ב npm:
שלום וברכה,
באיזו גירסת Angular את רוצה להתקין את הAngular מטריאל?
עד אנגולר 6 זו התקנה אחת ומאנגולר 6 זו התקנה אחרת...
שימי לב שגרסת מטריאל חיבת להיות נמוכה מגרסת ה Angular שלך, אחרת הפרויקט בכלל יעוף עם שגיאה.
חשוב לציין: ראיתי שמגרסת אנגולר 6 אפשר להתקין דרך ng add @angular/material כמו המתואר בהתקנת אנגולר 8, אני מודה שלא ניסיתי להתקין כך באנגולר 6, אם מישהי מנסה ויכולה לשתף אותנו בזה- אשמח מאוד!
בגדול, ההתקנה הראשונית של מטריאל:
עד אנגולר 8:
הרצת הפקודה:
npm install --save @angular/material @angular/cdk @angular/animations
מיבאים את הספריה ל app.module.ts (גם במערך imports שבהמשך הקובץ, כמובן...):
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
מיבאים את העיצובים לקובץ style.css הראשי ע"י הוספת השורה:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
מאנגולר 8:
הרצת הפקודה:
ng add @angular/material
וזהו... ההתקנה נעשית מעצמה,
תוך כדי התקנה התוכנה תשאל אותך באיזה theme (פורמט עיצוב) להתקין (יש כמה סוגים) , פשוט בוחרים את האפשרות הרצויה עם החיצים למעלה/למטה (בדרך כלל זה custom) וממשיכים להתקין.
לאחר מכן התוכנה תשאל אותך אם להוסיף גם את Hummer.js ואנימציות, עונים Y וממשיכים
ואפשר להתחיל ליבא ספריות ולשהתמש בהן.
השימוש:
בעיקרון כל פקד במטריאל מכיל הסבר מאוד מפורט על הוספתו והשימוש בו.
בגדול- על כל פקד שממתווסף- יש לייבא אותו ל app.module.ts:
import {MatSlideToggleModule,MatAutocompleteModule} from '@angular/material';
בכוונה ייבאתי שני פקדים כדי שתראי שאפשר לייבא את כל הפקדים באותו import.
(אין צורך לציין שצריך להוסיף את הפקדים גם במערך imports שבהמשך הקובץ, נכון?)
המון הצלחות!!!!!
תאמת שככה התקנתי אבל לא הייתי צריכה לבחור משהו או לענות Y
זה הגיוני???
כמו בתשובה הזו - בחלק שמתאר הוספת מטריאל לאנגולר מגרסה 8 ומעלה
הי איך אני מתקינה את אנגולר מטיריאל על אנגולר 11 ??\
תודה רבה זה עזר לי מאד
אני חושבת שזה אמור להיות כך
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
זה מסמן לי את '@angular/material'; באדום אולי לא התקנתי משהו?
מה השגיאה שאת מקבלת?
למה שאני שמה אותו בapp.module.ts הוא עושה לי שגיאה?
מה את רוצה לייבא בimport?
למה אני לא מוצאת את הIMPORT שאני אמורה להוסיף לapp.module?
הי
הרצתי תפקודה ng add @angular/material
ויש לי שגיאה
Installing packages for tooling via npm.
An unhandled exception occurred: npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE
npm ERR! request to https://registry.npmjs.org/@angular%2fmaterial failed, reason: unable to verify the first certificate
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\888\AppData\Roaming\npm-cache\_logs\2020-05-17T16_22_54_898Z-debug.log
Package install failed, see above.
See "C:\Users\888\AppData\Local\Temp\ng-QSFBeA\angular-errors.log" for further details.
מישהו יודע איך פותרים את זה??
באמת אלופה
בהחלט עשית לי סדר ,אלופה ! תודה רבה !!!
רק בשביל הסדר הטוב, כי לשניה גם אני התבלבלתי:
יש ספריה Bootrtap שהיא נטו עיצובים,
יש ספריה ngx-bootstrap שמבוססת על הbootstrap הבסיסית והיא מכילה גם כמה פקדים מנוהלים.
ויש ספריה angular material שמכילה פקדים (components) מנוהלים והתנהגויות (direct) (כמו גרירה וזריקה וכו')
אני בעיקרון עובדת בעיקר עם angular material
בעיקר בגלל שהוא מכיל את כל מה שאני צריכה (בשונה מ ngx-bootstrap שנתן לי מענה רק על חלק מהדרישות)
בנוסף, הוא נתמך ע"י גוגל- כך שאפשר בהחלט לסמוך על הביצועים שלו, והוא משתפר כל הזמן בחדשנות, בחווית משתמש נעימה יותר, וביעילות קוד שלו.
אבל, אם תעשי חיפוש קצר של זה נגד זה- תגלי שה ngx-bootstrap יותר פופלארי
הוא בסיסי, קל ליישום ונחמד, ואולי דווקה בגלל זה רובם מסתפקים בו
תוסיפו את העובדה שהוא מבוסס על הספריה הפופולארית bootstrap שכולם כבר מכירים... מה צריך יותר?
אם תרצי הרחבה של ההשוואה, יש באתר הזה
או כאן: https://www.npmtrends.com/@angular/material-vs-ngx-bootstrap
בהצלחה!!
היי אביגיל תודה רבה על התשובה המפורטת והמהירה!
באמת בררת לי את הנקודה הזו
בהתחלה הוספתי ספרייה ייעודית לauto- complete.
היה לי שם איזשהו באג וכשדיבגתי את הספריה גיליתי שיש שם ארוע של click שמתרחש בכל לחיצה על המסך ובארוע יש do while שעובר על כל התגיות שנלחצו עד למציאת התגית הרצויה .. כך שבאמת עדיף ספריות מבוססות ...( אגב לספרייה הנ"ל היו יחסית הרבה הורדות ולא הרבה באגים ..)
לגבי הספריות הגדולות מהנסיון שלך יש עדיפות ל angular matrial על פני ngx-bootstrap?
בדיוק בגלל שנכון להתקמצן על התקנות מודולים רחבים- לדעתי כדאי כן להתקין את מטריאל.
הספריה מכילה ממש את רוב הפקדים והפונקציות שצריך כל פרויקט בסיסי.
בתחילה גם אני ממש חשבתי שזה שטויות ולא צריך להתקין ספריה שלימה בשביל משהו קטן שהייתי צריכה. אבל עם הזמן ראיתי שכבר לוקח לי פי חמש זמן להתקין עשר ספריות אחרות שכל אחת מכילה אלפית מהיכולות של מטריאל.
סביר להניח שאם את צריכה עכשיו פקד מסוים, במקרה שלך- auto complete, בקרוב תצטרכי גם drad-drop או פקד פופולרי אחר ממטריאל. חבל עכשיו לשבור את הראש בחיפוש ספריה לפקד כזה, ואח"כ לחפש ספריה אחרת לפקד אחר.
לצורך המחשת הפופולאריות, צרפתי תמונה מהאתר של מטריאל ב npm:
19186 סימנו על דירוג הספריה לטובה(בכוכב).
ניתן לראות את זה בפרויקט של מטריאל ב npm בקישור:
https://github.com/angular/components
לכן לעניות דעתי מטריאל היא ספריה מאוד מומלצת וחוסכת הממוווןןן זמן.
המון הצלחות
נ.ב תוך כדי כתיבת התגובה- עלה מספר המדרגים ל 19187....
האם הAngular מטריאל היא ספרייה מומלצת ? בסיסית? בדיוק היה לי צורך להוסיף auto complete והתלבטתי אם נכון להוסיף את כל הספרייה הזו עבור auto complete
באופן כללי נכון להתקמצן על התקנות מודולים רחבים ?
תודה רבה- עזרת לי מאד