צעדים ראשונים ב-Angular.JS

Angular.JS היא Framework (סביבת עבודה) שפותחה על ידי גוגל ומאפשר לפתח אפליקציות אינטרנט בקלות ובמהירות

angularjs

מאת יקי רפאל, מפתח Front-end ב-Payoneer

הערה: הפוסט פורסם לראשונה בנובמבר 2015 – ורלוונטי יותר לגירסה 1 של אנגולר.

במקור Angular.JS באה לתת מענה לבניית Single Page Applications בצורה מושלמת ומהירה. כיום יותר ויותר אתרים (שנותנים שירותים לגולשים) עוברים או עברו למבנה Single Page. השפה או הארכיטקטורה ומילון המונחים בהתחלה נראים קצת מורכבים, אך לאחר מספר תרגולים – לא רק שהפריימוורק הופך להיות מובן, הוא גם הופך לכלי ממכר.

מה היה פעם?

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

בהרבה מקרים, היתה נשלחת בקשה כלשהי והתשובה שהתקבלה היתה בעצם מעבר לדף אחר. ובקיצור היה קשה להשאיר את הלקוח באותו הדף כאשר ביצע איזשהי בקשה. לאחר מכן, היה שימוש ב-ajax לקריאות אסינכרוניות מצד הלקוח אל השרת. כשהיתרון היה – המשך עבודה של הלקוח באותו עמוד תוך כדי קריאה לשרת ועידכון ה-dom בצורה דינאמית וכל זה מבלי לצאת מהדף. פתרון מצויין ופריצת דרך בתחום פיתוח האינטרנט באותם ימים. עדיין, כדי לבצע קריאה אסינכרונית של ajax, נדרשו שורות קוד לא מעטות. כך גם מספר הפונקציות שאמורות לתת מענה למה שקורה אחרי שמקבלים תשובות מהשרת (callbacks functions). ומה אם יש לנו מספר רב של קריאות באותו דף? היה צורך בקוד ארוך. עוד איזשהו סירבול שהיה זה שימוש חוזר בתבניות html תואמות. נניח והינו צריכים להציג רשימה כלשהי ul, ובתוכה אותו מבנה של li שחוזר על עצמו – ורק התוכן משתנה בין אלמנט לאלמנט. אז או שפשוט היינו כותבים את התגיות מספר רב של פעמים בדף שלנו, או שהיינו משתמשים באיזשהו loop של js או jquery ומזריקים את התוצאה ל-dom. החיסרון היה – שוב סרבול של קוד js, זמן ריצה איטי למדי ושימוש רב בזיכרון (כל פעם מגדירים אלמנט ומזריקים אותו אל ה-dom).

בעיה נוספת שהיתה: בזמן ניווט באתר\אפליקציה במעבר בין דפים שונים באתר – משתמשי הקצה היו צריכים לבצע כל פעם בקשה לשרת לצורך קבלת דף אחר. מה שגרם לעומס על השרת ולאיבוד הנתונים שבאותו הדף. אלו הן פחות או יותר הבעיות העיקריות שעמדו בפני מפתחי ה-web. וכמובן שיש עוד הרבה בעיות \ חסרונות שקרו בתקופות הקודמות.

היתרון הגדול ב-Angular-js

אפשר להגיד שהיתרונות הבולטים והעיקריים (לדעתי כמובן) הם:

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

מבנה וארכיטקטורה

העיקרון המוביל באנגולר, זה עיקרון ההפרדה. בגדול, ההפרדה היא בין החלק שמוצג בדפדפן (html/DOM): ה-View. לבין החלק של המידע שלרוב הוא משתנה ודינאמי – ה-Model. ושוב, זה ממש בגדול. Angular sketch a הכוח הוא בעצם היכולת של אנגולר לבצע הצמדה (binding) בין ה-Model אל ה-View תוך כדי מתן מענה לשינויים שקורים בהתאם להתנהגות המשתמש. אולי זה נשמע קצת מורכב עכשיו אבל אחר כך זה יתבהר יותר ויהיה יותר מובן. מי שבעצם מחבר בין שני החלקים ומקשר בינהם הוא כלי עזר בשם Scope. באנגולר “כלי עזר” כמו ה-Scope נקרא Service. ה”מוח” (הלוגיקה) של האפליקציה נמצא בתוך קובץ js נפרד אשר ברוב המקרים נקרא app.js. תחת יצוג בשם כלשהו (לדוגמא: myApp). בתוך היצוג של האפליקציה שלנו (ה-myApp) אנחנו מגדירים את תכונות האפליקציה, ואת ההתנהגות.

2

כל החלטה לגבי מה המשתמש יראה ובאיזה רגע, או מה יקרה שילחצו על משהו – נשלט וכתוב ב-Controller. יכולים להיות לנו מספר Controllers באפליקציה, בהתאם לחלוקה של חלקים שנרצה ליצור באפליקציה. נחזור רגע לייצוג הראשי של האפליקציה שלנו, במקרה שלנו זה ה-myApp. אותו חלק מרכזי בפאזל שלנו ניקרא Module. ה-myApp הוא ה-module המרכזי של האפליקציה שלנו. וגם ה-module הראשי יכול להיות מורכב מעוד כמה Modules שמכילים גם קונטרולרים ופונקציות. נוצר לנו פה באמת פיזור והפרדה לחלקי תכנית. בהמשך אנחנו נראה כמה זה קל להטמיע module ו”להזריק” אותו בחלק שתלוי בו.

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

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

3-1024x578

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

צעדים בסיסיים בתחילת כל פרוייקט

  • יצירת הקבצים index.html וקובץ app.js בתוך תיקית הפרוייקט החדשה.
  • הורידו את קובץ המקור של Angular. את הפריימוורק אפשר להוריד מהאתר שלהם, או להשתמש בקישור לסקריפט שנמצא תחת CDN. לאחר שהורדנו\מצאנו קישור ל-CDN – נצרף קישורים לקובץ של אנגולר ולקובץ של האפליקציה שלנו app.js , בתוך דף ה-index.html ככה:

Screen Shot 2016-04-27 at 11.01.28

  • בתוך ה-app.js נגדיר את ה-Module הראשי שלנו כך:

var myApp = angular.module("myApp",[]);

  • אפשר לשים לב שבתוך הסוגריים של הפונקציה הזו, יש לי 2 פרמטרים שאני מעביר: הראשון זה בעצם השם שאני אתן לאפליקציה בתוך ה-view של האפליקציה “myApp” (עוד שניה נראה איך עושים זאת). והפרמטר השני שבתוך הסוגריים המרובעים זה בעצם מערך של Modules שבהם תשתמש האפליקציה שלי, כרגע אין לי עדיין צורך בשימוש במודול חיצוני כלשהו – אז אשאיר את המערך ריק.
  • אנחנו צריכים להגיד לאנגולר איפה האפליקציה שלנו קיימת בתוך ה-view שלנו (html). בדרך כלל נהוג להוסיף את ההצמדה לתוך תגית ה-html. ואנחנו עושים זאת ע”י שימוש התכונה ng-app.

Screen Shot 2016-04-27 at 11.38.41

  • זאת אומרת שהאפליקציה שלנו תכיר רק את מה שיש בתוך תגית ה-html. יכולנו גם לשים אותה בתגית div כלשהי – ואז האפליקציה היתה עובדת רק עם מה שיש בתוך אותו הדיב.
  • יצירת הקונטרולר הראשי של האפליקציה שלנו. הקונטרולר בעצם מאפשר לנו לייצר שליטה והתנהגות לחלק מסויים בתוך האפליקציה. יכולים להיות מספר קונטרולרים לאפליקציה אחת – בהתאם למורכבות שלה ולפונקציונאליות. במקרה שלנו נגדיר קונטרולר אחד ראשי. וכדי להגדיר קונטרולר, הדבר הראשון שאנחנו צריכים לעשות זה לכתוב אותו בתוך ה-app.js מתחת להגדרה הראשונית של האפליקציה שלנו:

Screen Shot 2016-04-27 at 11.03.10

  • נעבור קצת על הצורה בה הגדרנו את הקונטרולר : קודם כל רשמנו את שם האפליקציה שלנו myApp אשר הגדרנו מעל. לאחר מכן השתמשנו בפונקציה שתפקידה להגדיר קונטרולרים: controller ואליה שלחנו את הפרמטרים: 1. שם הקונטרולר שקבענו mainController ו-2. הפונקציה שבתוכה נגדיר את ההתנהגות והמאפיינים של הקונטרולר.
  • הדבר הבא שצריך לעשות זה להגדיר את אותו הקונטרולר גם בתוך ה view. שם בעצם הוא ייוצג. ואת זה אנחנו עושים על ידי שימוש בתכונה (ב Directive) בשם ng-controller שבתוך ה-index.html. במקרה שלנו בחרתי div חדש שממוקם בתוך ה-container שיש לנו ב-index.

Screen Shot 2016-04-27 at 11.04.04

  • מילה על ng-app ועל ng-controller: כל ייצוג של אנגולר בתוך תגית html כלשהי נקראת Directive. תפקידו של ה-directive זה לייצר הקשר בין אלמנט ב-DOM לבין האפליקציה שלנו. קל לזהות directive: מתחיל בביטוי (ב-prefix) קבוע של ng- .
זה הכל, עכשיו אפשר להתחיל לעבוד. מצרף לפה את הקוד של 2 הקבצים בשלמותם:

index.html

Screen Shot 2016-04-27 at 11.05.30

app.js

Screen Shot 2016-04-27 at 11.06.49

חיבור בין 2 החלקים

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

Screen Shot 2016-04-27 at 11.09.07

לאחר מכן ניגש ל-view (ל-index.html), מתחת ה-directive של הקונטרולר שלנו ומה שנעשה זה נוסיף את הביטוי {{name}}

Screen Shot 2016-04-27 at 11.09.11

מה זה אומר סוגריים מסולסלים באנגולר? זה עוד סוג של סימן מוסכם באנגולר שניקרא Expression. ה-Expresion מאפשר לנו גישה למשתנים ופונקציות שכתובים לנו בתוך הקונטרולר שנמצא בתוך האפליקציה – בקובץ ה-app.js. אם נריץ את קובץ ה-index.html נראה שלא קורה שום דבר מיוחד. כדי שזה יפעל בצורה תקינה, אנחנו בעצם צריכים את ה”דבק” שיחבר לנו בין שני הצדדים. לדבק הזה יש שם והוא נקרא scope. ה-scope הוא בעצם service של אנגולר. סימן ההיכר של סרביסים באנגולר זה התו $ ולאחריו שם הסרביס. כדי להשתמש בו, אנחנו ניגש לפונקציה שבתוך הקונטרולר, ונעביר לה את ה-scope$ כפרמטר (פעולה שנקראת Dependency Injection).

Screen Shot 2016-04-27 at 11.11.41

אם נריץ שוב, נראה שעדיין שום דבר לא קרה. אנחנו צריכים להצמיד ל-scope$ את אותו המשתנה. ה-scope$ הוא בעצם אובייקט. ולאובייקטים ניתן כמו שאתם יודעים – להצמיד תכונות ומתודות. לכן אם נרשום בתוך הפונקציה “scope.name=”your name$ סביר להניח שנצליח וזה יעבוד.

Screen Shot 2016-04-27 at 11.11.47

Data-Binding

בדוגמה הקודמת ראינו כיצד אנחנו משתמשים ב-expressions כדי להציג איזשהו ערך של משתנה.

עכשיו בואו נפתח את זה עוד קצת. נחשוב על איזשהי התנהגות פשוטה וניישם אותה:

בתוך דף ה-html אני מעוניין שיהיה לי שדה input שבו אני ארשום סכום כלשהו של שקלים ואקבל את אותו המספר כפול 3.867 (המרה של שקל לדולר).

אני רוצה גם שבכל פעם שאשנה את הערך של השקל בשדה, התוצאה תתעדכן במיידי על המסך (גם בתוך שדה input).

אז אני קודם כל מארגן את ה view, ומוסיף את 2 השדות input ושדה אחד של h4 שבו יופיע ערך התוצאה. ואת 3 האלמנטים האלו אני אוסיף תחת ה div שמשוייך ל-mainController.

Screen Shot 2016-04-27 at 11.14.21

בנקודה זו אנחנו רואים 2 שדות ריקים על המסך – וכשמזינים סכום כלשהו – לא קורה כלום.

angularScreen1

השלב הבא זה להגדיר את אותם משתנים בקונטרולר. נלך לקונטרולר הריק שלנו, ובתוך הפונקציה שלו נגדיר את המשתנים הבאים ל scope: המשתנה הראשון יהיה shekel. ניתן לו ערך ראשוני של שקל 1. המשתנה השני יהיה dollar, נשייך לו את הערך 3.867.

הדבר האחרון שנגדיר ב scope זה פונקציה שתיקרא toDollars – היא תחזיר לי את המכפלה של ערך הדולר כפול מספר השקלים. פשוט מאוד סכום ההמרה. וככה יראה הקונטרולר עכשיו:

Screen Shot 2016-04-27 at 11.15.57

המשתנים והפונקציה החדשים שהגדרתי ל scope הם בעצם המודל שלי. כרגע הנתונים מוגדרים ומוצגים רק בקונטרולר. אם נרענן עכשיו את הדפדפן, נוכל לראות שעדיין לא קורה כלום. מה שצריך עכשיו זה להצמיד ולשייך אותם לאותם שדות שלהם ב-view.

בתוך ה-view אנחנו נלך ל input הראשון ונגדיר בתוכו את ה-Directive שנקרא ng-model וניתן לו את שם המודל שהגדרנו ממש עכשיו ב-scope:

Screen Shot 2016-04-27 at 11.17.19

כרגע אמרתי לאנגולר, שאותו ערך של האלמנט input יוצמד למודל shekel שלנו. הפעולה הזו של ההצמדה בין הערך של האלמנט ב View ל Model נקראת Binding. אני רואה את זה ממש כמו איזשהו דבק שמחבר 2 קצוות.

4

עוד לא סיימנו. נלך עכשיו ל input השני ונגדיר לו גם את ng-model=dollar. ביצענו שוב Data-binding בין ה-view ל-model.

Screen Shot 2016-04-27 at 11.19.27

אם תרפרשו אתם אמורים לקבל את 2 הערכים של השקל ושל הדולר מוצמדים לשדות שלהם ב .view

angularScreen2

עכשיו מה שנשאר לעשות זה להראות את התוצאה של הפונקציה toDollars שרשמנו קודם בקונטרולר. במקרה הזה אנחנו לא נשתמש בדיירקטיב ng-model בגלל שלא מדובר בהצגת הנתונים בתגית input אלא מדובר בתגית h4.

לצורך הקריאה לפונקציה מתוך ה-view אנחנו נרשום בתוך ה h4 את ה-expression של הפונקציה. ככה אנחנו קוראים לה מתוך ה-view:

Screen Shot 2016-04-27 at 11.20.24

לסיכום

אנגולר הפך לסטנדר בתעשיית ה-Front-end. הפריימוורק מספק לנו כלים מאוד נוחים ומהירים כדי לייצר אפליקצית web או איזשהו אתר מבוסס single-page. הקוד והכתיבה הופכים להיות קצרים יותר, ומודולריים יותר.

למדנו אודות הבעיות שהיו קיימות לפני אנגולר, ולאיזה צרכים הוא בא לתת מענה. וכמובן הזכרנו את הייתרונות שיש כאשר משתמשים בה.

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

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

הפוסט פורסם לראשונה בבלוג אמנות המסך.

לקריאה נוספת בנושאי פיתוח

<<< למה חשוב שתכירו את Gulp [פיתוח]

כתב אורח

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

הגב

5 Comments on "צעדים ראשונים ב-Angular.JS"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
arik100
Guest

לא הבנתי למה למחזר פוסט ישן משנה שעברה? מילא לערוך בו שינויים אבל סתם ככה למחזר?

אורטל
Guest

תודה רבה!

angularity
Guest

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

Muli Yulzary
Guest

אנגולר 2 כ"כ לא נוח… הרבה יותר BOILERPLATE קוד מאשר אנגולר 1.

Mooli Morano
Guest

הכתבה באה לי ממש בזמן וממש בטוב! תודה!

wpDiscuz

תגיות לכתבה: