AngularJS Bootstrap

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

1. ng-app

הדרך הפשוטה ביותר להתחיל את Angular זה ע"י השימוש ב- ng-app. הכל מתחיל ע"י השורות קוד אלו בAngular.

 

jqLite(document).ready(function() {

    angularInit(document, bootstrap);

  });

 

האירוע קורה רק אחרי שכל הדף וקבצי ה-JS נטענו. כלומר כל המודולים נוצרו ורשמו להם את מה שצריך, controllers,filters,directives וכ"ו.

במתודה angularInitAngular יחפש את ng-app ואז יקרא למתודה bootstrap ראו קוד:

bootstrap(appElement, module ? [module] : []);

ה- appElement זה האלמנט עם ה- ng-app. ה- module זה הערך שיש ב- ng-app,אם הוא ריק אז נוצר מערך ריק.

angularInit מחפש את האיבר הראשון שיש עליו ng-app ואז הוא קורא ל-bootstrap . אי אפשר להפעיל בצורה זו שני אפליקציות על דף.

 

2. קריאה יזומה ל- bootstrap

מסעיף 1 אנחנו מבינים שאנחנו יכולים לקרוא לבד למתודה bootstrap בלי העזרה של Angular. היתרון בכך שאנחנו יכולים לקבוע מה האירוע שיגרום לAngular לעלות. למשל אחרי log-in או סתם לחיצה על כפתור. יתרון נוסף שאנחנו יכולים לקרוא למתודה bootstrap מספר פעמים וכך להפעיל כמה אפליקציות Angular על אותו דף, או אחת אחרי השניה. למשל אפליקציה רזה לניהול ה- log-in ורק אחרי שהמשתמש אושר לסגור את האפליקציה הראשונה ולפעיל את האפליקציה השנייה. אנחנו יכולים גם בין הפעלות של האפליקציות להחליט איזה קבצים JS אנחנו רוצים לטעון על סמך סוג המשתמש.

 

3. חצי אוטומטי

האפשרות האחרונה היא לחבר בין סעיף 1 לסעיף 2. Angular מאפשר לנו להשתמש ב- ng-app כדי לסמן את האלמנט של האפליקציה אך לעצור את העלייה האוטומטית של Angular ע"י הגדרה של משתנה גלובאלי, window.name = 'NG_DEFER_BOOTSTRAP!'. Angularלא ימשיך את העלייה שלו עד שנקרא בצורה מפורשת למתודה angular.resumeBootstrap([modules]). העצירה של הAngular מאפשרת לנו למשל לטעון מודולים ע"פ דרישה ורק שכל המודולים הגיעו להמשיך את פעולת העלייה של Angular.

 

סיכום

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