תרגיל - פיתוח צד לקוח עם Angular.js

hadarp

Transcript

1. ילאקיפ רדה עשת " ו - 2016
2. MEAN Stack - הרזח  תיינב web applications תויגולונכטב שומישב הכורכ םילכו םינוש , םע תודדומתהל : דסמ םינותנ , תרשה דצב תולועפ , לופיט חוקלה דצב לש הגצהו םינותנה .  והמ MEAN ? "MEAN is a fullstack JavaScript platform for modern web applications"  MongoDB - as the database  Express - as the web framework  AngularJS - as the frontend framework  NodeJS- as the server platform  חוקל דצב זכרתנ םויה AngularJS
3. AngularJS - המדקה  AngularJS הניה JS Framework ( המרופטלפ ) תויצקילפא חותיפל Web דצב תרבח לש רצויה תיבמ חוקלה לגוג  המרופטלפה היונב תטישב MVC תללוכש Model, View, Controller ןכו Services  הנושבו חותיפ תומרופטלפמ תורחא , איה יקלח לכ לע טלתשהל תלגוסמ הדובעה יפוא תא ביתכהלו היצקילפאה ולוכ  Single Page Application (SPA)  ןונגנמ Two-Way Data-Binding  UI Bootstrap https://angularjs.org/
4. Model View Controller - MVC  Model (Data) – היצקילפאה לש םינותנה  View (UI) – היצקילפאה לש םיכסמה , האור שמתשמהש המ (Html UI)  Controller (Logic) – לש הקיגולה היצקילפאה , רקב הגוצתה ןיב םינותנל
5. Single Page Application (SPA)  single web app - הניה תייצקילפא web רשא דומעל המיאתמ קשממ תיווח לש רתוי תפטוש המירז קפסל הרטמב דחא יטנרטניא שמתשמ ( UX )  ב - AngularJS יוצמ דוקה לכ ףדה תניעט ךותב רבכ ב דדובה - client , וא לע ףדל םיפסוותמו תימאניד הרוצב םינעטומ םימיאתמה םיבאשמהש ךרוצה יפ , דב " לש הלועפל הבוגתב כ שמתשמה  וניא ףדה ךילהתב בלש םושב שדחמ ןעטנ , ףדל הרבעה עצבמ וניא ןכו רחא , רשאכ " ףד םירבוע " הילשא קר וז , ותוא םצעבו ףד html דיחי " תורחא םינפ גיצמ " םיקלח לש המלעה תועצמאב , םיקלח תגצהו םירחא .
6. Two-Way Data-Binding  data binding - ה ןיב הדמצה - Model ה לא - View הנעמ ןתמ ידכ ךות שמתשמה תוגהנתהל םאתהב םירוקש םייונישל .  םשב רזע ילכ אוה םהיניב רשקמו םיקלחה ינש ןיב רבחמ םצעבש ימ scope  ב - AngularJS " רזע ילכ " ה ומכ - scope ארקנ Service
7. דבוע הז ךיא ?  הקיגולה היצקילפאה לש תאצמנ ךותב ץבוק js ישאר ( ארקנ בורל app.js ) , תחת Module םיוסמ  ה - Module יזכרמה גוצייה וניה ונלש היצקילפאה לש , וב ונא תא םירידגמ תונוכת תאו היצקילפאה תוגהנתהה  ה - Module ישארה דועמ בכרומ תויהל לוכי המכ Modules םיליכמש םג Controllers, Directives, Services תויצקנופו ( ביחרנ ךשמהב )  לש הרדגה Module : var mod = angular.module('myApp', []);  ה - Controllers םינותנב לופיט לע יארחאה קלח אוה ( Model ) ךרוצל םתגצה ( View .) ה - Controllers תויצקנופ ליכמ JavaScript
8.  AngularJS ארקנה הנבמב םינותנה תא תנסכאמ scope ( ירוחאמ םיעלקה scope טקייבוא םצעב אוה JavaScript ליגר )  הגוצתה ( html \ view ) הליכמ תויגת תושדח ( לש AngularJS , תוארקנש directives לשמל ng-controller ) םיפוטעה טסקט יקלח ןכו םיירגוסב םילסלוסמ םילופכ ךשמה - ךיא דבוע הז ?
9. דבוע הז ךיא ?
10. Twitter Bootstrap  תויצקילפאו טנרטניא יפד בוציעל המרופטלפ web םניחב  לע ססובמ HTML5, CSS3 and JavaScript  םינפדפדה לכב ךמות םיירקיעה ( םג IE7 )  Responsive Design  UI Bootstrap https://angular-ui.github.io/bootstrap/ http://getbootstrap.com/
11. ינפ לע תילמיטפוא הייפצ תייווח תקפסמה םירתא בוציע תשיג לש בחר ןווגמ םירישכמ What is Responsive Web Design?
12. Bootstrap תללוכ grid system תלעב 12 המיאתמה תודומע רישכמה תגוצת לדוג יפל המצע Grid system http://getbootstrap.com/css/#grid