RSS

קטגוריה: ng-course.org

Angular 2.0 Course in April 2016

ng-course Google Event

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

תאריכים: 6, 7, 10, 14 לאפריל.

שעות: 9:00 עד 16:30.

לפרטים נוספים ראו באתר: ng-course.org

 
השארת תגובה

פורסם ע"י ב- פברואר 17, 2016 ב- Course, ng-course.org

 

Filter Performance Issue

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

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

clip_image002

בדוגמאות קוד זו אנחנו רואים איך אפשר לכתוב ביטוי שלוקח את רשימת השמות ומכניס אותם לפונקציה OrderBy וארגומנט שני 'name' התוצאה נכנסת לפונקציה filter וארגומנט השני הוא הערך של שדה ה- search. הערך שמוחזר מהפונקציה filter הוא רשימת השמות שתכנסת ל- ng-repeat.

בנוסף אפשר גם לכתוב custom filter ולהשתמש בהם באותו אופן.

בעיות ביצועים עם Filters:

אנגולר מעדכן את המסך כל פעם שהוא מזהה שינוי על העץ של ה- scopes ע"י בדיקה של ה- watchers שמאוחסנים על ה- scopes. בדיקה זו מתבצעת כאשר קוראים למתודה $scope.$apply(), למשל שמשתמשים ב- ng-click, ng-model, $http. למעשה כל directive שמאזין לאירוע ( למשל UI , תקשורת ) מבצע בסוף הפעלה של פונקצית $apply. כל פעם ש- directive מפעיל את $apply עושים בדיקה לכל ה- watchers שקיימים על ה- scopes כלומר מפעילים גם את הביטוי:

names| orderBy:'name'| filter:search

גם אם הערכים של ה- search וה- names לא השתנו. יותר גרוע מזה, אם אחד ה- watchers מזהה שהיה שינוי חוזרים ובודקים את כל ה- watchers שוב, כלומר גם את הביטוי של ה- filters.

סיכום הבעיה:

אם האפליקציה שלנו מתעדכנת בתדירות גבוהה, כלומר הפונקציה $apply נקראת בתדירות גבוהה, אנחנו נסבול מהפעלה מרובה של הפונקציות filters גם במקרים שבטוח שהתוצאה לא תשתנה.

פתרון:

 להוציא את חישוב ה- filters מה- watchers, כלומר שהם לא יכתבו בתוך ה-HTML.

ראו קוד לדוגמא:

clip_image004

clip_image006

הסבר:

פונקציה calc רצה רק כאשר השדה ה- search או השדה names משתנה ולא כל פעם שמתבצעת פונקציה $apply.

 

סיכום:

השימוש ב- filters ב-HTML יצור watchers שרצים כל $apply וזה יכול ליצור לנו בעיית ביצועים, בעיקר אם התדירות של הפעלת הפונקציה $apply גבוהה וה- Filters השונים רצים על רשימות גדולות.

הפתרון לעביר את החישוב מ- HTML לקוד. הפעלת החישוב תתבצע רק כאשר שדה שיכול להשפיע על החישוב שונה.

 
תגובה אחת

פורסם ע"י ב- אוקטובר 22, 2015 ב- AngularJS, AngularJS Tips, ng-course.org

 

AngularJS Course in October 2015

ng-course

הקורס הבא נפתח ב12 לאוקטובר.

בעקבות הביקוש הרב לקורס אנגולר, החלטתי לפתוח שוב באוגוסט את הקורס ng-course. הקורס יתקיים בתאריכים:

12, 15, 19, 21 לאוקטובר

 
השארת תגובה

פורסם ע"י ב- יוני 28, 2015 ב- ng-course.org

 

קורס AngularJS מחזור 5

בעקבות הביקוש הרב לפתיחת קורס ציבורי נוסף. החלטתי לפתוח בספטמבר סדנא של 3 ימים על Angular ו-JavaScript.  היום הראשון של הקורס על JavaScript ושאר הימים על AngularJS.

תאריכים: יום שלישי ה-16 עד יום חמישי ה-18 לספטמבר.

קהל יעד: מפתחים מקצועיים שיכולים שיכולים לקלוט הרבה חומר בשלושה ימיים.

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

1.     ביצוע הקורס האון-לין החינמי של Code School.

2.     ביצוע התרגיל TV Show, בכיתה נקח את התרגיל הזה ונבנה אותו מחדש כמו שצריך.

3.     להסתכל על הסרט http://www.objectplayground.com/

4.     לעבור על אתר הקורס http://ng-course.org

מי שיתכונן לפני הקורס יוכל לקבל מהקורס הרבה יותר !!!

לרישום ופרטים נוספים לחצו כאן.

 

Become an expert in AngularJS with this 3 days in-depth training course. This course will teach you the AngularJS fundamentals and the internal. The course will cover directives, binding, filters, ngRepeat, testing, isolate scopes and much more, with real-world examples. ng-course, the best course in Israel.

JavaScript fundamentals

·        Scope & Function Context

·        Closures

·        this keyword

·        Object-Oriented in JavaScript (slides)

·        Async and Parallel in JavaScript (slides)

·        JavaScript Design Pattern

AngularJS Building Blocks for Building SPA (slides)

·        Template & live data binding ( Directives & $scope )

·        Model, View & Controller (MVC)

·        Dependency Injection ( AngularJS services )

·        Modules

·        LAB : TV Show SPA

Forms in AngularJS (slides | post)

·        ng-model directive

·        ngModelController & FormController

·        Custom Validation

·        Input directive

AngularJS Filters (slides)

·        Filter Syntax

·        AngularJS Filters

·        Custom filters

Communication (slides)

·        $.Ajax vs. $http

·        $resource

·        Promises ($q) vs. Calbacks

·        Offline / Online

·        LAB: Full TV Show Web App

Custom Directive (slides)

·        Template

·        Scope (post)

·        Compile function

·        Link function

·        Controller

·        Transclude

·        Animation (slides)

·        Tips & tricks

Routing and Navigation (slides)

·        $location service

·        ng-view directive

·        $route service and route object

·        Navigation flow

·        Routing broadcasted events

·        Resolve option and promise

·        Cancelling route changes

AngularJS Testing (slides)

·        Unit Testing (Jasmine.js)

·        AngulrJS Mock API's (ngMock)

·        Unit Testing Tools

·        E2E Testing

·        ngMockE2E – $httpBackend

·        Protractor Tool

AngularJS Animation (slides)

·        CSS3-enabled Animations

·        Directive That Support Animation

·        JavaScript-enabled Animations

Using Animations in your own directives

 
2 תגובות

פורסם ע"י ב- אוגוסט 11, 2014 ב- AngularJS, Course, ng-course.org

 

Error Messages in AngularJS

פוסט זה נועד לכל האנשים שמתחילים לפתח 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

 

תגים: