מדריך מהיר שיעזור לך להבין וליצור אפליקציות Angular 6

פוסט זה מחולק לשני חלקים:

החלק הראשון מדגים כיצד ליצור אפליקציית Angular 6 פשוטה באמצעות Angular CLI ומסביר את מבנה הפרויקט.

החלק השני מסביר את הקוד הקיים שפרסמתי ב- GitHub. קוד זה מדגים את השימוש ברכיבים, שירותים, לקוח HTTP ותקשורת בין רכיבים.

חלק 1

התקן את Node.js אם עדיין לא קיים

אתה זקוק ל- Node.js, מכיוון שהספריות הנדרשות עבור Angular מורדות באמצעות מנהל חבילות הצומת (npm). עיין ב //nodejs.org/en/ להתקנת Node.js.

התקן את CLI Angular

Angular CLI הוא ממשק שורת פקודה עבור Angular, והוא מאוד שימושי ביצירה מהירה של תבנית פרויקט Angular 6. התקן את חבילת Angular CLI npm ברחבי העולם באמצעות הפקודה הבאה:

npm install -g @angular/cli

צור את הפרויקט

CLI Angular מסייע ביצירת פרויקט בקלות רבה. על מנת ליצור את הפרויקט, השתמש בפקודה הבאה.

ng new simple-angular6-app

simple-angular6-app הוא שם הפרויקט. עכשיו תבחין שאתה רואה תיקיה בשם simple-angular6-app. התיקיה היא הפרויקט שנוצר. על מנת לבדוק אם הכל הוגדר כראוי, היכנס לתיקיית הפרויקט והפעל את היישום באמצעות הפקודות הבאות:

cd simple-angular6-app npm start

עבור לדפדפן שלך ועבור לכתובת האתר הבאה: localhost: 4200. אתה אמור להיות מסוגל לראות שהיישום שלך פועל.

היישום ייראה כך:

מבנה תיקיות בסיסי הוסבר

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

  1. package.json: לקובץ זה יש את רשימת התלות בצמתים הדרושה.
  2. src / styles.css : לקובץ זה יש את ה- CSS העולמי הזמין בכל היישום.
  3. src / main.ts : זהו הקובץ הראשי שמתחיל את היישום Angular (AppModule מאתחל כאן כפי שנראה בקוד). כאן ה- Extension .ts מייצג TypeScript.
  4. src / index.html : זהו הקובץ הראשון שמבוצע לצד main.ts כאשר העמוד נטען.
  5. src / app / app.module.ts : זהו הקובץ שבו מוגדרים כל הרכיבים, הספקים והמודולים. מבלי להגדיר אותם כאן, לא ניתן להשתמש בהם במקומות אחרים בקוד.
  6. src / app / app.component.html: זהו המרכיב העיקרי של אפליקציה זוויתית, וכל שאר הרכיבים נמצאים בדרך כלל בתוך רכיב זה. src / app / app.component.ts הוא ההיגיון של רכיב זה, ו- src / app / app.component.css הוא ה- CSS עבור רכיב זה. רכיב זה עצמו אינו עושה שום היגיון חשוב, אלא משמש כמכולה לרכיבים אחרים.
  7. dist : תיקיה זו נמצאת במקום בו נמצאים הקבצים הבנויים. TypeScript מומר בעצם ל- JavaScript והקבצים שהתקבלו מאוחסנים כאן לאחר האגודה והמיצוי. (תיקיה זו מופיעה רק אם היישום בנוי. "הפעלה npm" פשוטה לא תיצור תיקיה זו.) מכיוון שדפדפני האינטרנט מבינים רק JavaScript (לפחות לעת עתה), יש צורך להמיר את TypeScript ל- JavaScript לפני פריסת הקוד . כדי לראות תיקייה זו, אתה יכול להקליד את שורת הפקודה הבאה:
npm run build

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

TypeScript

Angular 6 משתמש ב- TypeScript ליישום הלוגיקה. אלו מכם שעבדו בג'אווה ימצאו את TypeScript קל מאוד. TypeScript היא שפה הבנויה על גבי JavaScript אך היא בטוחה לסוגיה, ו- TypeScript בתורו מתכנס ל- JavaScript

יצירת רכיבים ושירותים

  1. רכיב : רכיב בזווית מבצע פונקציה ספציפית. יישום Angular בנוי על ידי שימוש ברכיבים שונים. ניתן להשתמש ב- CLI Angular ליצירת רכיבים בקלות. התחביר הוא ng generate component [name]. השתמש בפקודה הבאה כדי ליצור רכיב שנקרא "לקוחות".
ng generate component customers

2. הפקודה שלעיל יוצרת תיקיה הנקראת לקוחות בתוך src / app . הרכיב שנוצר כולל:

  • customers.component.html קובץ להחליט את התבנית (איך רכיב ממשק המשתמש צריך להיראות)
  • customers.component.ts קובץ שנמצא איפה ההיגיון קיים
  • customers.component.css קובץ אשר מכיל תוכן CSS
  • וכן customers.component.spec.ts קובץ אשר משמש לבדיקת היחידה (את וונט המפרט יוסבר בפוסט הזה).

3. שירות : שירות מספק בעצם פונקציונליות שיכולה לשמש כל רכיב. ניתן לשתף את השירות בכל הרכיבים, או שהוא יכול להיות מוגבל לרכיב מסוים (כל לוגיקה לשימוש חוזר ניתן להכניס לשירות). ניתן להשתמש ב- CLI Angular גם ליצירת שירותים. התחביר הוא ng generate service [name]. השתמש בפקודה הבאה כדי ליצור שירות שנקרא "נתונים":

ng generate service data

4. השירות נוצר בתוך src / app. לשירות שנוצר יש קובץ data.service.ts בעל הלוגיקה וקובץ data.service.spec.ts לבדיקת יחידות.

מזל טוב ?

יצרת בהצלחה את אפליקציית Angular 6 הראשונה שלך ולמדת כיצד ליצור רכיבים ושירותים. כעת למדת את מבנה התיקיות הבסיסי של פרויקט Angular 6. החלק הבא יסביר את קוד ה- GitHub הקיים כדי להדגים כיצד להשתמש ברכיבים, שירותים, לקוח HTTP ותקשורת בין רכיבים.

חלק 2

קוד

קוד זה מוסבר כאן, לכן שיבט את רפו למחשב המקומי שלך. ל- repo יש הוראות כיצד לשכפל אותו ולהגדיר אותו.

כתובת אתר של יישום

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

היישום ייראה כך על גבי מסך נייד:

מה עושה יישום זה?

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

מבנה היישום הוסבר

הרכיבים שנוצרו הם:

  1. לקוחות רכיב : זה תואם לתיקיית src / app / clients. רכיב זה אמור להציג את רשימת הלקוחות. הלקוחות . Component.tsלקובץ יש פונקציה הנקראת ngOnInit () . פונקציה זו נקראת בכל פעם שהרכיב נטען. אז ניתן להשתמש בפונקציה זו לטעינת הנתונים עבור הרכיב. נתונים אלה נטענים על ידי קריאה לפונקציה getCustomerList () . getCustomerList () בתורו מתקשר לשירות הנתונים כדי לקבל את הנתונים הדרושים.
  2. רכיב פרטי : רכיב : זה תואם לתיקיית src / app / customerdetails . רכיב זה מציג את הפרטים עבור לקוח נבחר יחיד. Customerdetails.component.ts הקובץ יש את ngOnInit () פונקציה אשר ניתן להשתמש בהם כדי לטעון את הנתונים. לטעינת נתונים, נקראת הפונקציה getCustomerDetails () . פונקציה זו מתקשרת לשירות הנתונים כדי לקבל את הנתונים הדרושים. אבל כאן תוכלו להבחין גם בשימוש ב- routeParams.id שנשלח לשירות. routeParams משמש כדי לקבל פרמטרים מכתוב אתר הבקשה, ואת idהפרמטר משמש כדי לברר עבור איזה לקוח צריך לטעון את הפרטים. זה יתברר יותר כשאגיע לחלק הניתוב.
  3. DisplayComponent : זה תואם לתיקיית src / app / display . רכיב זה מציג את שם הלקוח שעליו לחצו ב- CustomerComponent. (כל העניין של רכיב זה הוא להדגים תקשורת בין הורים לילד.) זהו מרכיב צאצא של CustomerComponent . ב- clients.component.htmlתבחין בכך .זה הופך את DisplayComponent למרכיב צאצא של CustomersComponent . הנתונים מועברים מ- CustomerComponent ל- DisplayComponent באמצעות התכונה [customer] .

נתוני המדגם

נתוני הדוגמה נמצאים בתיקייה src / assets / samplejson .

השירותים שנוצרו הם:

  1. DataService : זה תואם src / app / data.service.ts . כל ה- JSON המשמש ביישום מאוחסן בתיקיית src / assets / samplejson . DataService מסייע בהשגת ה- JSON מתיקיית src / assets / samplejson באמצעות בקשת HTTP. ביישומים אמיתיים, השירות עוזר לקבל את הנתונים מממשק API של Rest או מכל ממשק API אחר על ידי ביצוע בקשת HTTP. שירות זה משמש את שני הלקוחותו- CustomerdetailsComponent.

שיעורי המודל המשמשים הם:

  1. לקוח : זה תואם src / app / customer.ts . זוהי מחלקת המודל המשמשת את הלקוחות רכיב להגדרת המבנה של כל לקוח ברשימה.
  2. CustomerDetails : זה תואם src / app / customerdetails.ts . זהו מחלקת המודל המשמשת את CustomerdetailsComponent להגדרת המבנה המכיל את כל פרטי הלקוח.

מודול ניתוב

מודול הניתוב מוגדר ב- src / app / app-routing.module.ts . לאחר מכן מודול זה מוחל על היישום על ידי הוספת app.component.html.

קיימים שני מסלולים ביישום:

  1. / לקוחות : כתובת אתר זו מציגה את רשימת הלקוחות ומצביעה על CustomersComponent.
  2. / customerdetails /: id : URL זה מציג את הפרטים עבור כל לקוח ומצביע על CustomerdetailsComponent . Id אשר שוהה URL זו היא routeParam. מזהה זהבתורו משמש ה- CustomerdetailsComponent כדי לדעת איזה פרטי לקוח להציג. לדוגמא / customerdetails / 1 יציג את פרטי הלקוח הראשון, / customerdetails / 3 יציג את פרטי הלקוח השלישי, וכן הלאה.

שוב מזל טוב ?

עכשיו אתה יודע להשתמש ברכיבים ושירותים. כמו כן אתה יודע כיצד לבצע שיחות HTTP, כיצד להשתמש בניתוב וכיצד להעביר routeParams.

מושגי היסוד סוקרו בפוסט זה, ומקווים שזה היה מועיל.

הפניות:

  1. למידע נוסף על Angular תוכלו לבדוק את התיעוד //angular.io/guide/quickstart. התיעוד טוב מאוד כדי להבין מושגים נוספים של זוויתי

על הסופר

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

אתם מוזמנים ליצור איתי קשר בחשבון LinkdIn שלי //www.linkedin.com/in/aditya1811/

תוכלו לעקוב אחרי גם בטוויטר //twitter.com/adityasridhar18

האתר שלי: //adityasridhar.com/

פוסטים אחרים הקשורים אלי

מדריך מהיר שיעזור לכם להבין וליצור אפליקציות ReactJS

מבוא מהיר ל- Vue.js