RSS

Error Messages in AngularJS

12 יול

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

1. אין הודעת שגיאה, אך Angular לא עובד.

אם שוכחים לשים את ה- ng-app, אז כאשר Angular לא מוצא אותו הוא לא עושה כלום, כלומר לא יוצר את ה- Injector, ולכן הוא גם לא מקמפל את הדף. אפשר להפעיל את Angular ידנית ע"י המתודה bootstrap. ראו פוסט בנושא.

2. Uncaught ReferenceError: angular is not defined

שכחתם להוסיף את הקובץ angular.js לדף, ולכן אין משתנה גלובלי בשם angular. ( תאמינו לי גם זה קורה J )

 

3. Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined

השם שנתתם בדרקטיב ng-controller לא נמצא בשרות $controller, כלמור ב- $injector. בדר"כ זה קורה מהסיבות הבאות:

א. השם שברישום של הcontroller לא אותו דבר כמו השם ב ng-controller.

// script file
angular.module('myApp'
, [])

            .controller('Ctrl', function($scope) {/*Code*/});

       

// html file

<div ng-controller="MainCtrl">…</div>

 

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

ג. שכחתם להוסיף את הקובץ JS שבו מוגדר הקונטרולר לדף ה-HTML.

 

4. Uncaught Error: [$injector:modulerr] Failed to instantiate module

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

דוגמא : angular.module('myApp', ['myModule']);

בדוגמא שלפנינו אין בכלל מודול בשם 'myModule' או שיש אך שכחתם לחבר את קובץ ה-JS של המודול לדף ה- HTML, ולכן הוא לא נטען.

 

5. Error: [$injector:unpr] Unknown provider:

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

angular.module('myApp', [])

        .controller('Ctrl',function($scope, noService) {

           

        });

הסבר:
 אנגולר לא מצליח להבין מה הוא צריך להזריק בארגומנט השני, ה- $injector לא מכיר את השם ‘noService’. יש מספר סיבות שזה יכול לקרות לכם:

א. טעות בשם

ב. שכחתם לטעון את המודול שבו מוגדר השרות.

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

ד. השתמשתם ב- סוגרים מרובעים או ב- $inject, ויש לכם טעות הקלדה או אי התאמה עם מספר
    הארגומנטים. ראו דוגמא:

angular.module('myApp', [])

   .controller('Ctrl',['$scope','$log','noService',function($scope, noService) {

}]);

 

לסיכום:

ממליץ לכם בחום לבקר באתר של אנגולר ולראות את כל סוגי השגיאות. (https://docs.angularjs.org/error )

בנוסף מי שרוצה לקרוא ולהבין איך בדיוק אנגולר מתחיל לעבוד, יוצר את ה- Injector ומקמפל את הדף יכול לקרוא את הפוסטים שלי באתר http://ng-course.org/ .

אם עדין יש לכם רעב לעוד… אתם מוזמנים לקורסים שלי. הקורס הקרוב נפתח בשבוע הבא ה-15 ליולי. פרטים נוספים לחצו כאן.

מודעות פרסומת
 
השארת תגובה

פורסם ע"י ב- יולי 12, 2014 ב- AngularJS, ng-course.org

 

תגים:

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: