Angular היא פלטפורמת פיתוח ומסגרת TypeScript המשמשת ליצירת יישומים של עמוד בודד.

לזווית יש היסטוריה מורכבת. המפתחים השתמשו ב-JavaScript כדי לבנות את הגרסה הראשונה של המסגרת הזו (AngularJS). ה-Angulardevelopers השתמשו מאוחר יותר ב-TypeScript כדי לבנות את כל הגרסאות העוקבות של Angular (בשל מספר הבאגים בגרסה הראשונה).

נכון לשנת 2021, הגרסה האחרונה של Angular היא 12.0. במאמר זה, תלמד את כל מה שאתה צריך לדעת על Angularframework.

מה זה אנגולר?

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

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

כדי להשתמש ב-Angular, תצטרך להכיר HTML, CSS ו-JavaScript (הידיעה ש-TypeScript הוא נכס, אך לא חובה). Angularis משווה לעתים קרובות ל-VueJS ול-ReactJS, ואחת התלונות העיקריות היא של-Angular יש עקומת למידה תלולה יותר.

קָשׁוּר: מה זה ReactJS, ולמה אפשר להשתמש בו?

זה לא מפתיע, שכן ל-Angular (בהיותה פלטפורמת פיתוח), יש מספר רב יותר של מבני ליבה שתוכלו להכיר. מבנים אלה כוללים:

• מודולים
• רכיבים
• תבניות

והבנת תכונות הליבה הללו תבטיח שאתה בדרך להפוך למפתח Angular.

חקירת קבצים זוויתיים

היישום Angular מייצר קבצים רבים בתוך תיקיית הפרויקט החדשה שלך (כפי שניתן לראות בתמונה למטה). עיין באתר הרשמי של Angular לקבלת הוראות כיצד להתקין את Angular במחשב שלך.

אחד הקבצים החשובים יותר בתיקיית הפרויקט הראשית הוא ה package.json קוֹבֶץ. קובץ זה אומר לך את שם הפרויקט שלך, איך להתחיל את הפרויקט שלך (לשרת), איך לבנות את הפרויקט שלך (לבנות), וכיצד לבדוק את הפרויקט שלך (מבחן ng) בין השאר.

תיקיית הפרויקט הראשית שלך מכילה גם שתי תיקיות-node_modules ו src. ה src התיקיה היא המקום שבו תבצע את כל הפיתוח שלך; הוא מכיל מספר קבצים ותיקיות.

תיקיית src

ה styles.css הקובץ הוא המקום שבו תשים את כל העדפות הסגנון הגלובליות שלך, ואת index.html הקובץ הוא הדף היחיד שמוצג בדפדפן שלך.

סיור בקובץ index.html

הדבר היחיד שהיית רוצה לשנות ב- index.html הקובץ לעיל הוא כותרת הבקשה. ה תג בגוף קובץ ה-HTML שמעל קישורים ל- app.component.ts קובץ, שנמצא בתוך תיקיית האפליקציה (כפי שניתן לראות בתמונה למטה).

סיור בקובץ app.component.ts

יבא את {Component } מ'@angular/core';
@רְכִיב({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
ייצוא מחלקה AppComponent {
title = 'האפליקציה שלי';
}

ה app.component.ts הקובץ משתמש ב- app-root בורר, אשר ממוקם ב index.html הקובץ למעלה. הוא משתמש ב- app.component.html הקובץ כתבנית וה- app.component.css קובץ לסגנון.

ה app.component.css הקובץ ריק כאשר הוא נוצר מכיוון שכל העדפות הסגנון, יחד עם פריסת ה-HTML, נמצאות ב- app.component.html קוֹבֶץ.

הפעלת האפליקציה Angular עם ה הגשה --פתוח הפקודה תציג את הדברים הבאים בדפדפן שלך:

כדי לשנות את מה שמוצג בדפדפן שלך, תצטרך לערוך את app.component.html קוֹבֶץ.

החלפת התוכן של קובץ זה בקוד הבא:

שלום עולם

יפיק את הפלט הבא בדפדפן שלך:

הבנת מודולים זוויתיים

כֹּל זוויתי האפליקציה בנויה על מערכת מודולים בסיסית, המכונה NgModules. כל אפליקציה מכילה אחת לפחות NgModule. זוויתי יוצר שני מודולים מה- חדש פקודה (app-routing.module.ts ו app.module.ts).

ה app.module.ts הקובץ מכיל את מודול השורש, שחייב להיות קיים כדי שהיישום יפעל.

סיור בקובץ app.module.ts

ייבוא ​​{ NgModule } מ-'@angular/core';
לייבא את { BrowserModule } מ'@angular/platform-browser';
יבא את { AppRoutingModule } מ-'./app-routing.module';
ייבא את { AppComponent } מ-'./app.component';
@NgModule({
הצהרות: [
AppComponent
],
יבוא: [
BrowserModule,
AppRoutingModule
],
ספקים: [],
אתחול: [AppComponent]
})
ייצוא מחלקה AppModule { }

הקובץ שלמעלה משתמש ב-JavaScript יְבוּא הצהרה לייבא את NgModule, ה BrowserModule, ה AppComponent, וה AppRoutingModule (שהוא ה-NgModule השני בפרויקט).

ה @NgModule מעצב מגיע אחרי היבוא. זה מצביע על כך שה app.module.ts הקובץ הוא אכן א NgModule. ה @NgModule לאחר מכן, decorator מגדיר מספר מערכים: ה הצהרות, ה יבוא, ה ספקים, וה אתחול.

ה הצהרות מערך מאחסן את הרכיבים, ההנחיות והצינורות השייכים לספציפי NgModule. עם זאת, במקרה של מודול שורש רק את AppComponent מאוחסן ב הַצהָרָה מערך (כפי שניתן לראות בקוד למעלה).

ה יבוא מערך מייבא את השני NgModules שבו אתה משתמש באפליקציה. ה יבוא מערך בקוד שלמעלה מייבא את BrowserModule (מה שמאפשר לו להשתמש בשירותים ספציפיים לדפדפן, כגון עיבוד DOM), וה- AppRoutingModule (מה שמאפשר לאפליקציה להשתמש ב- זוויתי נתב).

קָשׁוּר: הגיבור הנסתר של האתרים: הבנת ה-DOM

ה ספקים מערך צריך להכיל שירותים שמרכיבים אחרים NgModules יכול להשתמש.

ה אתחול מערך חשוב מאוד מכיוון שהוא מכיל את רכיב הכניסה ש-Angular יוצר ומכניס לתוך index.html קובץ בתיקיית הפרויקט הראשית. כל יישום Angular מופעל מה- אתחול מערך בשורש NgModule על ידי אתחול ה NgModule (שכרוך בתהליך שמכניס כל רכיב ב- אתחול מערך בדפדפן DOM).

הבנת רכיבים זוויתיים

כל רכיב Angular נוצר עם ארבעה קבצים ספציפיים. אם תסתכל על תמונת תיקיית האפליקציה למעלה, תראה את הקבצים הבאים:

• app.component.css (קובץ CSS)
• app.component.html (קובץ תבנית)
• app.component.spec.ts (קובץ מפרט בדיקה)
• app.component.ts (קובץ רכיב)

כל הקבצים לעיל משויכים לאותו רכיב. אם אתה משתמש ב- ליצור הפקודה ליצירת רכיב חדש, ייווצרו ארבעה קבצים דומים לאלה שלמעלה. ה app.component.ts הקובץ מכיל את רכיב שורש, המחבר בין ההיבטים השונים של הרכיב (כגון התבנית והסגנון).

סיור בקובץ app.component.ts

ייבוא ​​{ Component } מ'@angular/core';
@רְכִיב({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
ייצוא מחלקה AppComponent {
title = 'האפליקציה שלי';
}

ה app.component.ts הקובץ משתמש בהצהרת ייבוא ​​JavaScript כדי לייבא "רכיב" מהליבה של Angular. אז ה @רְכִיב הדקורטור מזהה את הכיתה כרכיב. ה @רְכִיב דקורטור מכיל חפץ המורכב מא בוחר, א templateUrl, וכן א styleUrls מַעֲרָך.

ה בוחר מספר זוויתי כדי להוסיף מופע של רכיב האפליקציה בכל תבנית HTML שיש לה תג המתאים ל- בוחר (אז ה תָג). ואם תסתכל אחורה על הקוד ב- index.html הקובץ למעלה תמצא את תָג.

קובץ רכיב האפליקציה הראשי מקשר גם לקובץ התבנית, באמצעות ה templateUrl תכונה. זה app.component.html קובץ, המתאר כיצד יש להציג רכיב ספציפי ביישום Angular.

המאפיין הסופי באובייקט הוא ה styleUrls. מאפיין זה מתייחס למערך של גיליונות סגנונות, מה שאומר שתוכל להחיל עליהם מספר גיליונות סגנונות רכיב בודד (כדי שתוכל להוסיף את גיליון הסגנונות הגלובלי בתיקיית src למערך styleUrls בתור נו).

הבנת תבניות זוויתיות

ה app.component.html הקובץ הוא דוגמה לתבנית Angular. קובץ זה הוא קובץ HTML וכן קובץ רכיבים (רכיב האפליקציה). לכן, לכל רכיב חייב להיות תבנית HTML, פשוט משום שהיא מתארת ​​את אופן העיבוד של רכיב ב-DOM.

מה הלאה?

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

הגיבור הנסתר של האתרים: הבנת ה-DOM

לומד עיצוב אתרים וצריך לדעת יותר על מודל אובייקט המסמך? הנה מה שאתה צריך לדעת על ה-DOM.

קרא הבא

על הסופר