Angular – Part Two

Transcript

1. Angular – Part Two The Fun Part Begin!
2. םדוקה רועישה םוכיס הכ דע ונדמל המ זא ? • Module • Directive • Two-Way Data Binding • םיקחשמ תצק HTML םידמחנ
3. Ng-model ךסמה לע םינוש םיביכר ןיב םירבחמ תללגנ הריחב ומכ םיביכרל דבוע רוביחה , םירחא םיטלקו לשמל רבחתמ אוה וילא ךרעה תא לבקמ ng-bind=“review.stars” סלכתב השוע הזש המ , יונישל םאתהב הזה ךרעה תא ןכדעמ הז , ךרעה תא הארמש ךסמב ביכר שי םא זאו , תידיימ ןכדועי אוה ( Two way data binding םירכוז ? ) ןבומכ , םדוקמ ומכש , ךותמ עיגהל ךירצ לבקתמה ךרעה Controller .
4. ng-submit םכמצע תא םתלאש םעפ יא " ספוטה תא אלמל ומייסש ןכדעתהל םינותנל םרוג ינא ךיא ? " הבושתה הנה זא ! ל םיחלוש טושפ ng-submit רלורטנוקב היצקנופ , הרקיש םיצור ונחנאש המ השועש , והזו !
5. Form Validation םיצור םא , םיספטל אודיו עצבל ןתינ ( ןיקת ליימיאש אודיו , וכו ואלומ םיטרפה לכש ).. ךירצש המ לכ : • םיטלקל ףיסונ novalidate לש תומיאה תא לטבל ידכ HTML ומצע • ב ןמסנ required הבוח אוהש טלק לכ • ל ףיסונ ng-submit ל הקידב $valid • $valid ןיקת לכהש ןמסמש רלוגנא לש יטמוטוא הנתשמ אוה
6. Custom Directive רוציל ןתינ Elements, Attributes ונלשמ , ונעטיש HTML דרפנ ץבוקמ . תואבה תורטמל דעונ הז רבד : .1 דוק שי םא HTML הברה ומצע לע רזוחש ( המשרה , NavBar )... .2 ה תא ךופהל הצרנ םא HTML רתוי יתוגהנתהל ןבומכו רתוי ימאנידל . הז תא םישוע ךיא ? .1 ה קלח תא ריבענ HTML ץבוקל ונלש HTML שדח .2 רוצינ Directive ה תא ונל ריזחיש ונלשמ HTML app.directive(‘DirectiveName’, function(){ Return { . . . }; });
7. ךשמה רומאכ , רוציל םילוכי ונא element וא attribute ךירצ המ טילחנ יתמ ? • Attribute – םירבד דוע םע הז תא בלשל םיכלוה ונחנא םא , רבד ותוא קוידב עיפוי דימת אל הזו • Element – יעמשמ דח והשמ הז םא , טמרופ ותואב עיפוי דימתש ( הירלג , ןיגול )... לעופב דחא לכ הז המ רכזנ ואוב ... <element attribute></element> <div class=“…” style=“…” id=“…”></div>
8. ךשמה בוש דוקה לע לכתסנ ואוב ... app.directive(‘DirectiveName’, function(){ return { restrict: ‘’,  ‘E’ for Element, ‘A’ for Attribute templateUrl:’’, The HTML name controller: ‘’,  Controller to Attach (next slide) controllerAs: ‘’  Controller Alias }; });
9. ךשמה ( בוש ) app.directive(‘DirectiveName’, function(){ return { . . . controller: ‘’,  Controller to Attach (next slide) controllerAs: ‘’  Controller Alias }; }); רלורטנוק ףיסונש המל זא ? טושפ , ונרצי עגרהש ךסמב ביכר ותוא לש םינותנהו תוילנויצקנופה תא וב בותכל לכונש ידכ
10. תויולת םידיקפת יפל ורדסלו דוקה תא םצמצל ךרדה . var app = angular.module(‘ModuleName’ ,[]);  ולאה םיעבורמה םיירגוסה תא םירכוז ? יולת אוה םיפסונ רלוגנא לש םילודומ וליאב לודומל עידוהל םדיקפת לבקמ אוה תומשה תא גנירטסכ לבקמ אוהש תומשה , תומש םה םילודומה
11. Services – Go Net Go! טנרטניא תביבסב תונכת סרוקב רכזנ םא , ב ונשמתשה םינותנ ליבשב תרשל האירק תושעל וניצר רשאכ AJAX רשפא ןאכ םגש ןבומכ , תאז השוע רלוגנא ךיא הארנ ונחנא לבא . • $http – לש ליבקמה AJAX ש המ לכ השוע AJAX השוע סקטניס – $http( { method: ‘GET’ , url: ‘<link to server>’ } ) .success(function(data){ …. }) .error(function(error){ …. });