דלג לתוכן הראשי

אנגולר

מה זה אנגולר ולמה כדאי להכיר אותו?

מה זה אנגולר

אנגולר היא framework שמאפשרת לפתח את צד הלקוח של אפליקציית אינטרנט בצורה מודולרית.

אנגולר בנוי על javascript בצורה שעוזרת לנו לפתח במהירות וביעילות את הקוד.

Single page application

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

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

מה צריך בשביל להתחיל לעבוד עם אנגולר

התקנה של node על המחשב.

התקנה של אנגולר Cli:

npm install -g @angular/cli

יצירת פרוייקט אנגולר

מריצים את הפקודה:

ng new project-name

נקבל תיקייה בשם project-name שבה יאוחסן הפרוייקט שלנו.

הרצת פרוייקט אנגולר

ng serve

את הפרוייקט אפשר לפתוח בכתובת localhost:4200.

מבנה של פרוייקט אנגולר

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

מבנה הקבצים:

src 
├── main.ts //The entry point to the app
├── app
│ ├── components
│ │ └── The components folders
│ ├── services
│ │ └── The services files
│ ├── models
│ │ └── The models folders
│ ├── app.module.ts //The root module
│ └── app.component.ts // The root component

כשמריצים את אנגולר הקבצים נטענים בסדר הבא:

main.ts -> Contain AppModule -> app.module.ts -> Contain App Component -> app.component.ts + app.conponent.html

קובץ ה-ts מכיל את הפונקציונליות של המידע שיוצג בקובץ ה-html.