פוסט זה הוא המשך ישיר לפוסט על הסטנדרטים לכתיבת קוד ב Angular.
בפוסט זה אתאר את הדרך הנכונה ליצירת מבנה תיקיות נכון עבור אפליקציות Angular.
ישנם דרכים רבות לסידור מבנה התיקיות, לכן ישנם מספר עקרונות צריך לדעת לפני שבוחרים שיטה:
1. קלות מציאת הקוד.
2. שם הקובץ והתיקייה מסבירים על מהותם.
3. מבנה שטוח – עדיף תיקייה בתוך תיקייה ובתוך תיקייה מאשר מספר רב של קבצים בתיקייה בודדת.
לאחר שהגדרנו את העקרונות שלנו, נכיר את 2 סוגי המבנים הנפוצים מה מומלץ ומה לא.
Folders by Feature – Recommended
כשמו כן הוא, סידור התיקייות יהיה לפי פיצ'ר.
דוגמה:
app/
app.module.js
app.config.js
app.routes.js
components/
login.directive.js
login.directive.html
layout/
shell.html
shell.controller.js
nav.html
nav.controller.js
clients/
clients.html
clients.controller.js
services/
data.service.js
xml.service.js
index.html
למה זה מומלץ?
1. זה פשוט ממש את כל 3 העקרונות שדברנו עליהם.
2. פשוט לניהול.
3. כי כולם משמשים בזה.
Folders by Feature – NOT Recommended
כשמו כן הוא, סידור התיקייות יהיה לפי סוגי הרכיבים של Angular.
app/
app.module.js
app.config.js
app.routes.js
controllers/
clients.js
nav.js
shell.js
directives/
login.directive.js
login.directive.html
services/
dataservice.js
xml.js
views/
nav.html
shell.html
index.html
למה לא?
באפליקציות גדולות יהיה ריביו קבצים בכל תיקייה ולא יהיה ניתן לחלק ליותר תיקיות ובכך ליצור מבנה תיקיות שטוח.
ובכל זאת?
1. שהאפליקציה קטנה
2. שלא יודעים כיצד להתחיל.
Templates
ישנם גנרטורים ליצירתת מבנה תיקיות:
1. Yoeman
ועוד רבים..
לסיום
זכרו את עקרון של Single Component שעל פיו כל כל Service, Controller ואף הגדרת ה module יהיו בקובץ נפרד, לא נערבב את Service יחד עם Controller או לא יהיו כל ה Services או כל ה Controllers יחד.
Answer Code 
כתיבת תגובה