כיצד להתקין Angular ב- Windows: מדריך ל- CLI Angular, Node.js ולבנות כלים

תִכנוּת

במדריך זה נלמד כיצד להתקין את Angular CLI ב- Windows ולהשתמש בה ליצירת פרויקט Angular.

מהו CLI Angular?

Angular CLI הוא הכלי הרשמי לאתחול ועבודה עם פרויקטים של Angular. זה חוסך אותך מהטרחה של תצורות מורכבות ובניית כלים כמו TypeScript, Webpack וכו '.

לאחר התקנת Angular CLI, תצטרך להריץ פקודה אחת כדי ליצור פרויקט ואחרת כדי לשרת אותו באמצעות שרת פיתוח מקומי כדי לשחק עם היישום שלך.

כמו רוב הכלים החזיתיים המודרניים בימינו, Angular CLI בנוי על גבי Node.js.

Node.js היא טכנולוגיית שרת המאפשרת להריץ JavaScript על השרת ולבנות יישומי אינטרנט בצד השרת. עם זאת, Angular היא טכנולוגיה חזיתית, כך שגם אם אתה צריך להתקין את Node.js על מכונת הפיתוח שלך, היא מיועדת רק להפעלת ה- CLI.

ברגע שאתה בונה את האפליקציה שלך לייצור לא תזדקק ל- Node.js מכיוון שהחבילות הסופיות הן רק HTML סטטי, CSS ו- JavaScript שניתן להגיש על ידי כל שרת או CDN.

עם זאת, אם אתה בונה יישום אינטרנט מלא עם Angular, ייתכן שתצטרך Node.js ליצירת החלק האחורי אם ברצונך להשתמש ב- JavaScript עבור הקצה הקדמי והקצה האחורי.

בדוק את מחסנית ה- MEAN - זו ארכיטקטורה הכוללת את MongoDB, Express (שרת אינטרנט ומסגרת REST API הבנויה על גבי Node.js) ו- Angular. אתה יכול לקרוא מאמר זה אם אתה מעוניין בהדרכה שלב אחר שלב.

במקרה זה, Node.js משמש לבניית החלק האחורי של האפליקציה שלך וניתן להחליפה בכל טכנולוגיית צד שרת שתרצה כמו PHP, Ruby או Python. אבל Angular אינה תלויה ב- Node.js למעט כלי ה- CLI שלה והתקנת חבילות מ- npm.

NPM מייצג את מנהל חבילות הצומת. זהו רישום לאירוח חבילות Node. בשנים האחרונות הוא שימש גם לפרסום חבילות חזית וספריות כמו Angular, React, Vue.js ואפילו Bootstrap.

הערה : אתה יכול להוריד את הספר Angular 8 שלנו : בנה את יישומי האינטרנט הראשונים שלך עם Angular 8 בחינם.

התקנת CLI Angular ב- Windows

ראשית, עליך להתקין את Node ו- npm במכונת הפיתוח שלך. ישנן דרכים רבות לעשות זאת, כגון:

  • באמצעות NVM (Node Version Manager) להתקנה ולעבודה עם מספר גרסאות של צומת במערכת שלך
  • באמצעות מנהל החבילות הרשמי של מערכת ההפעלה שלך
  • התקנתו מהאתר הרשמי.

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

אתה יכול לוודא שמותקן ב- Node במערכת שלך על ידי הפעלת הפקודה הבאה בשורת פקודה שאמורה להציג את הגרסה המותקנת של Node:

$ node -v

לאחר מכן, הפעל את הפקודה הבאה להתקנת Angular CLI:

$ npm install @angular/cli

לאחר סיום הפקודה בהצלחה, עליכם להתקין את Angular CLI.

מדריך מהיר ל- CLI זוויתי

לאחר התקנת Angular CLI, תוכל להפעיל פקודות רבות. נתחיל בבדיקת גרסת ה- CLI המותקנת:

$ ng version

פקודה שנייה שתצטרך להריץ היא helpהפקודה לקבלת עזרה מלאה לשימוש:

$ ng help

ה- CLI מספק את הפקודות הבאות:

add: מוסיף תמיכה בספריה חיצונית לפרויקט שלך.

build (b): מרכיב אפליקציה Angular לספריית פלט ששמה   dist/  בנתיב הפלט הנתון. יש לבצע מתוך ספריה של סביבת עבודה.

config: מאחזר או מגדיר ערכי תצורה זוויתיים.

doc (d): פותח את התיעוד הרשמי של Angular (angular.io) בדפדפן ומחפש מילת מפתח נתונה.

e2e (e): בונה ומגיש אפליקציה Angular, ואז מריץ בדיקות מקצה לקצה באמצעות מד זווית.

generate (g): מייצר ו / או משנה קבצים על פי סכמטי.

help: מפרט פקודות זמינות ותיאוריהן הקצרים.

lint (l): מפעיל כלים מבדלים על קוד האפליקציה Angular בתיקיית פרויקט נתונה.

new (n): יוצר מרחב עבודה חדש ואפליקציית Angular ראשונית.

run: מריץ יעד מותאם אישית שהוגדר בפרויקט שלך.

serve (s): בונה ומשרת את האפליקציה שלך, ובונה מחדש על שינויים בקבצים.

test (t): מבצע בדיקות יחידה בפרויקט.

update: מעדכן את היישום שלך ואת התלות שלו. ראה //update.angular.io/

version (v): מוצא גרסת CLI זוויתית.

xi18n: מחלץ הודעות i18n מקוד המקור.

יצירת פרויקט

אתה יכול להשתמש ב- Angular CLI כדי ליצור במהירות את פרויקט Angular שלך על ידי הפעלת הפקודה הבאה בממשק שורת הפקודה שלך:

$ ng new frontend

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

כפי שצוין קודם לכן, ה- CLI ישאל אותך האם תרצה להוסיף ניתוב זוויתי? ותוכל לענות על ידי הזנת y(כן) או n(לא), שהיא אפשרות ברירת המחדל. הוא ישאל אותך גם לגבי תבנית גליון הסגנונות שבה ברצונך להשתמש (כגון CSS). בחר באפשרויות שלך ולחץ   Enter  כדי להמשיך.

מבנה פרויקט זוויתי 8

לאחר מכן תיצור את הפרויקט שלך עם מבנה ספריות וחבורת תצורות וקבצי קוד. זה יהיה בעיקר בפורמט TypeScript ו- JSON. בואו נראה את התפקיד של כל קובץ:

  • /e2e/: מכיל בדיקות מקצה לקצה (הדמיית התנהגות משתמש) של האתר
  • /node_modules/: כל ספריות הצד השלישי מותקנות בתיקיה זו באמצעות  npm install
  • /src/: מכיל את קוד המקור של היישום. רוב העבודה תיעשה כאן
  • /app/: מכיל מודולים ורכיבים
  • /assets/: מכיל נכסים סטטיים כמו תמונות, אייקונים וסגנונות
  • /environments/: מכיל קבצי תצורה ספציפיים לסביבה (ייצור ופיתוח)
  • browserslist: נדרש על ידי קידון אוטומטי לתמיכה ב- CSS
  • favicon.ico: הפאוויקון
  • index.html: קובץ ה- HTML הראשי
  • karma.conf.js: קובץ התצורה של קארמה (כלי בדיקה)
  • main.ts: קובץ המוצא העיקרי מהיכן AppModule הוא bootstrapped
  • polyfills.ts: מילוי פוליס הנחוץ ל- Angular
  • styles.css: קובץ גיליון הסגנונות הגלובלי של הפרויקט
  • test.ts: זהו קובץ תצורה עבור קארמה
  • tsconfig.*.json: קבצי התצורה של TypeScript
  • angular.json: מכיל את התצורות עבור CLI
  • package.json: מכיל את המידע הבסיסי של הפרויקט (שם, תיאור ותלות)
  • README.md: קובץ סימון המכיל תיאור של הפרויקט
  • tsconfig.json: קובץ התצורה של TypeScript
  • tslint.json: קובץ התצורה של TSlint (כלי ניתוח סטטי)

משרת את הפרויקט שלך

Angular CLI מספק שרשרת כלים שלמה לפיתוח אפליקציות חזיתיות במחשב המקומי שלך. ככזה, אינך צריך להתקין שרת מקומי כדי לשרת את הפרויקט שלך - אתה יכול פשוט להשתמש   ng serveבפקודה מהטרמינל שלך כדי לשרת את הפרויקט שלך באופן מקומי.

ראשית נווט בתוך תיקיית הפרויקט שלך והפעל את הפקודות הבאות:

$ cd frontend $ ng serve

כעת אתה יכול לנווט אל // localhost: 4200 / כתובת כדי להתחיל לשחק עם יישום הקצה שלך. הדף יטען מחדש באופן אוטומטי אם תשנה קובץ מקור כלשהו.

יצירת חפצים זוויתיים

Angular CLI מספק ng generateפקודה המסייעת למפתחים ליצור חפצים זוויתיים בסיסיים כגון מודולים, רכיבים, הוראות, צינורות ושירותים:

$ ng generate component my-component

my-componentהוא שם הרכיב. זוויתית CLI יהיה באופן אוטומטי להוסיף הפניה components, directivesוכן pipesאת src/app.module.tsהקובץ.

אם ברצונך להוסיף את הרכיב, ההנחיה או הצינור שלך למודול אחר (מלבד מודול היישום הראשי, app.module.ts), תוכל פשוט להקדים את שם הרכיב עם שם המודול ו קו נטוי:

$ ng g component my-module/my-component

my-module הוא שמו של מודול קיים.

סיכום

במדריך זה ראינו כיצד להתקין את Angular CLI במחשב Windows שלנו והשתמשנו בו כדי לאתחל פרויקט Angular חדש מאפס.

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

עיין בהדרכות אחרות שלנו בזווית.

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