הייטק
ליצירת דיון חדש בחרי את הפורום המתאים מתוך הלשונית ”דיונים”
מובילה:
- Organized by
-
-
angular – mterial
-
angular – mterial
אשמח לקבל הסבר על התקנת אנגולר מטריאל תודה
-
25 תגובות
-
npm i @angular/material
-
שלום וברכה, באיזו גירסת 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 שבהמשך הקובץ, נכון?) המון הצלחות!!!!!
-
אביגיל את מהממת!
-
איך אני ודעת איזה גרסת אנגולר יש לי – כשיצרתי את הפרויקט כתבתי npm i @angular/cli
-
תריצי את הפקודה: ng v וזה יציג לך את התוצאה הבאה: בשורה הראשונה- זו הגרסה של האנגולר.
-
תודה רבה- עזרת לי מאד
-
תודה אלופה!
-
תודה
-
האם הAngular מטריאל היא ספרייה מומלצת ? בסיסית? בדיוק היה לי צורך להוסיף auto complete והתלבטתי אם נכון להוסיף את כל הספרייה הזו עבור auto complete באופן כללי נכון להתקמצן על התקנות מודולים רחבים ?
-
בדיוק בגלל שנכון להתקמצן על התקנות מודולים רחבים- לדעתי כדאי כן להתקין את מטריאל. הספריה מכילה ממש את רוב הפקדים והפונקציות שצריך כל פרויקט בסיסי. בתחילה גם אני ממש חשבתי שזה שטויות ולא צריך להתקין ספריה שלימה בשביל משהו קטן שהייתי צריכה. אבל עם הזמן ראיתי שכבר לוקח לי פי חמש זמן להתקין עשר ספריות אחרות שכל אחת מכילה אלפית מהיכולות של מטריאל. סביר להניח שאם את צריכה עכשיו פקד מסוים, במקרה שלך- auto complete, בקרוב תצטרכי גם drad-drop או פקד פופולרי אחר ממטריאל. חבל עכשיו לשבור את הראש בחיפוש ספריה לפקד כזה, ואח”כ לחפש ספריה אחרת לפקד אחר. לצורך המחשת הפופולאריות, צרפתי תמונה מהאתר של מטריאל ב npm: 19186 סימנו על דירוג הספריה לטובה(בכוכב). ניתן לראות את זה בפרויקט של מטריאל ב npm בקישור: https://github.com/angular/components לכן לעניות דעתי מטריאל היא ספריה מאוד מומלצת וחוסכת הממוווןןן זמן. המון הצלחות נ.ב תוך כדי כתיבת התגובה- עלה מספר המדרגים ל 19187….
-
היי אביגיל תודה רבה על התשובה המפורטת והמהירה! באמת בררת לי את הנקודה הזו בהתחלה הוספתי ספרייה ייעודית לauto- complete. היה לי שם איזשהו באג וכשדיבגתי את הספריה גיליתי שיש שם ארוע של click שמתרחש בכל לחיצה על המסך ובארוע יש do while שעובר על כל התגיות שנלחצו עד למציאת התגית הרצויה .. כך שבאמת עדיף ספריות מבוססות …( אגב לספרייה הנ”ל היו יחסית הרבה הורדות ולא הרבה באגים ..) לגבי הספריות הגדולות מהנסיון שלך יש עדיפות ל angular matrial על פני ngx-bootstrap?
-
רק בשביל הסדר הטוב, כי לשניה גם אני התבלבלתי: יש ספריה Bootrtap שהיא נטו עיצובים, יש ספריה ngx-bootstrap שמבוססת על הbootstrap הבסיסית והיא מכילה גם כמה פקדים מנוהלים. ויש ספריה angular material שמכילה פקדים (components) מנוהלים והתנהגויות (direct) (כמו גרירה וזריקה וכו’) אני בעיקרון עובדת בעיקר עם angular material בעיקר בגלל שהוא מכיל את כל מה שאני צריכה (בשונה מ ngx-bootstrap שנתן לי מענה רק על חלק מהדרישות) בנוסף, הוא נתמך ע”י גוגל- כך שאפשר בהחלט לסמוך על הביצועים שלו, והוא משתפר כל הזמן בחדשנות, בחווית משתמש נעימה יותר, וביעילות קוד שלו. אבל, אם תעשי חיפוש קצר של זה נגד זה- תגלי שה ngx-bootstrap יותר פופלארי הוא בסיסי, קל ליישום ונחמד, ואולי דווקה בגלל זה רובם מסתפקים בו תוסיפו את העובדה שהוא מבוסס על הספריה הפופולארית bootstrap שכולם כבר מכירים… מה צריך יותר? אם תרצי הרחבה של ההשוואה, יש באתר הזה או כאן: https://www.npmtrends.com/@angular/material-vs-ngx-bootstrap בהצלחה!!
-
בהחלט עשית לי סדר ,אלופה ! תודה רבה !!!
-
באמת אלופה
-
הי הרצתי תפקודה 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. מישהו יודע איך פותרים את זה??
-
למה אני לא מוצאת את הIMPORT שאני אמורה להוסיף לapp.module?
-
מה את רוצה לייבא בimport?
-
למה שאני שמה אותו בapp.module.ts הוא עושה לי שגיאה?
-
מה השגיאה שאת מקבלת?
-
-
זה מסמן לי את ‘@angular/material’; באדום
אולי לא התקנתי משהו? -
אני חושבת שזה אמור להיות כך import {MatProgressBarModule} from ‘@angular/material/progress-bar’; import {MatProgressSpinnerModule} from ‘@angular/material/progress-spinner’;
-
תודה רבה זה עזר לי מאד
-
היי
אני צריכה את הספריות בעיקר למטרת עיצוב
לא צריכ פקדים מיוחדים
מה עדיף לי bootstrap או angular/material?
-
בוקר טוב!
קצת סדר –
אנגולר מטריאל זו ספריה עיצובית של אנגולר שמכילה אוסף של פקדים ועיצובים גם מורכבים
כמו מטריאל יש עוד ספריות נוספות כמו פריים ( אני אישית יותר אוהבת את הפריים – יותר פקדים כמו גרפים, עורך תוכן ועוד) – https://primeng.org/
אם את מעצבת בלבד, ללא טפסים / כפתורים / פונקציות אז את יכולה להשתמש רק בבוטסטראפ כיבסופו של דבר אם את בוטסטראפ את מכירה, חבל שתסתבכי עם התקנה…
אבל, אני יותר נוטה להאמין שבסוף כן תזדקקי לפונקציונליות מסוימת שאותה יהיה לך יותר קל לבצע בעזרת מטריאל.
primeng.org
PrimeNG - Angular UI Component Library
The ultimate collection of design-agnostic, flexible and accessible Angular UI Components.
Log in to reply.
