נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

MVC ב-AngularJS

מחבר:
בתאריך:

דפוס ה- MVC הוא אחד מאבני היסוד של AngularJS, ולכן חשוב להבין מה זה אומר כבר עכשיו. אפליקציה מבוססת דפוס MVC , מורכבת משלושה חלקים: Model, View, Controller.

  • Model - מקור המידע (לדוגמה, מסד הנתונים או מידע שמגיע מהמשתמש).
  • View - התצוגה שרואים המשתמשים.
  • Controller - מתווך בין ה-Model וה-View.

הדרך שבה דפוס ה-MVC מיושם ב-Angular מאפשרת למידע לזרום ממקור הנתונים במודל ל-view, והפוך, באופן אוטומטי, ובלי שנצטרך לעבוד בשביל זה.

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

הסבר על דפוס הMVC באפליקציות angularJS

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

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

שם:
כינוי:
שלום, {{ user.callMe() }}

 

 

נכתוב אפליקצית MVC(Model, View, Controller)

1. נגדיר את האפליקציה

נגדיר שהאפליקציה יושבת בתוך דיב מסוים על ידי הגדרת הדיב באמצעות ng-app ששמו myapp.

<div ng-app="myapp">
  
</div>
  • חובה לעטוף את האפליקציה ב-ng-app.
  • בדרך כלל נשים אותו על האלמנט של ההטמ"ל שעוטף את כל הדף.
  • במדריך זה, שמנו אותו על הדיב העוטף את האפליקציה.

2. נגדיר את הקונטרולר

בתוך האפליקציה, שהגדרנו ב-1, נגדיר קונטרולר שיעטוף את הטופס.

<div ng-app="myapp">
  <div ng-controller="HelloCtrl">
  <!-- הטופס-->
  </div>
</div>
  • שמו של הקונטרולר HelloCtrl, וזה לפי המוסכמה שנהוג לסיים את שמו של הקונטרולר ב-Ctrl.

3. נגדיר את מקורות המידע (המודלים)

נגדיר את מקורות המידע (המודלים) על ידי הגדרת שדות קלט באמצעות ng-model. שדה הקלט הראשון מקבל את ערכו מהתכונה name של האובייקט user, ושדה הקלט השני מהתכונה nickName של האובייקט user.

<div ng-app="myapp">
  <div ng-controller="HelloCtrl">
  שם: <input type="text" ng-model="user.name">
  כינוי: <input type="text" ng-model="user.nickName">
  </div>
</div>

4. נגדיר את ה-view

נגדיר את ה-view בתוך סוגריים מסולסלים כפולים, ונגדיר שיקבל את ערכו מהפונקציה callMe שגם היא שייכת לאובייקט user.

<div ng-app="myapp">
  <div ng-controller="HelloCtrl">
  שם: <input type="text" ng-model="user.name">
  כינוי: <input type="text" ng-model="user.nickName">
  </div>
</div>
שלום, {{ user.callMe() }}

5. נגדיר שהמודל עובד עם הקונטרולר

עכשיו, בין תגיות סקריפט, נגדיר את הקונטרולר כשייך למודל myapp באופן הבא:

<script>
var myapp = angular.module("myapp", []);

myapp.controller("HelloCtrl", function($scope) {
           // הערך הדיפולטי כפי שמיד נראה
});
</script>
  • המודול מקבל בתור פרמטר ראשון את שמה של האפליקציה (במקרה זה, myapp), ופרמטר שני עם רשימת התלויות (במקרה זה, אין תלויות).
  • נעביר לקונטרולר את האובייקט $scope שמצביע על (מחזיק רפרנס של) האפליקציה שאיתה עובדים, ומשמש כדי לקשר בין הקוד של הקונטרולר לבין התוכן שמוצג ב-view.

6. נגדיר את האובייקטים שאתם נעבוד בקונטרולר

בתוך הקונטרולר נגדיר את האובייקט user כשייך ל- $scope.

<script>
var myapp = angular.module("myapp", []);

myapp.controller("HelloCtrl", function($scope) {
   $scope.user = {};
});
</script>

7. נוסיף לאובייקט תכונות

נוסיף לאוביקט ה-user את התכונות: name, nickName.

<script>
var myapp = angular.module("myapp", []);

myapp.controller("HelloCtrl", function($scope) {
  $scope.user = {
    name: "ג'וני",
    nickName: "השועל"
  };
});
</script>
  • ננצל את ההזדמנות כדי לתת ערכים ברירת מחדל למשתנים.

8. נוסיף לאוביקט מתודות

נוסיף לאוביקט ה-user את המתודה: callMe.

<script>
var myapp = angular.module("myapp", []);

myapp.controller("HelloCtrl", function($scope) {
  $scope.user = {
    name: "ג'וני",
    nickName: "השועל",
 
    callMe: function(){
      var userObject = $scope.user;
      return userObject.name + " הידוע בכינויו " + userObject.nickName;
    }
  };
});
</script>
  • בתוך המתודה callMe הגדרנו userObj שלתוכו הצבנו את $scope.user.
  • מה שמאפשר לנו להחזיר את התכונות של האובייקט $scope.user

 

איך זה עובד?

התצוגה (view) ניזונה ממקור הנתונים (מודל) כשהמתווך הוא הקונטרולר. או בקיצור, MVC - model view controller.

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

 

שימו לב לאופן העבודה הנכון עם Angular

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

כך נראה הקוד שכתבנו עד עכשיו:

<div ng-app="myapp">
  <div ng-controller="HelloCtrl">
  שם: <input type="text" ng-model="user.name">
  כינוי: <input type="text" ng-model="user.nickName">
  </div>
</div>
שלום, {{ user.callMe() }}

<script>
var myapp = angular.module("myapp", []);

myapp.controller("HelloCtrl", function($scope) {
  $scope.user = {
    name: "ג'וני",
    nickName: "השועל",
 
    callMe: function(){
      var userObject = $scope.user;
      return userObject.name + " הידוע בכינויו " + userObject.nickName;
    }
  };
});
</script>

 

אחרי שבמדריך זה למדנו כיצד לעבוד עם MVC, במדריך הבא , נלמד כיצד להשתמש במספר directives מועילים של AngularJS.

לכל מדריכי ה- AngularJS

 

מדריכי JavaScript

הוסף תגובה חדשה

 

= 3 + 8

תמונת המגיב

זאק בתאריך: 24.08.2016

שלום,
יש טעות בסינטקס.
השורה {{ user.callMe() }}
צריכה להכנס לתוך הדיב שמוגדר כ controller
כדי שהאפליקציה תעבוד כמו שצריך.

תמונת המגיב

יוסי בן הרוש בתאריך: 25.08.2016

אין טעות בסינטקס. ככה זה באנגולר.

תמונת המגיב

יוסף בתאריך: 29.09.2016

זה אנגולר 1 או 2?

תמונת המגיב

יוסי בן הרוש בתאריך: 30.09.2016

הי יוסף, זה אנגולר 1.

תמונת המגיב

ככ בתאריך: 01.03.2017

ההערה של זאק במקום..
ככה עבד אצלי AngularJS v1.5.0
מהקישור שנתתם בעמוד קודם.