ראשי › Angular › Angular – How To Work With: UI Router

Angular – How To Work With: UI Router

פורסם ב 18/04/2015 ע"י דניאל תשובה — השארת תגובה

איך לעבוד עם Angular UI Router, מה היתרונות שלה ביחס ל ngRoute ועוד..

ngRoute

1. ה ngRoute מאוד פשוט לשימוש – מבקשים כתובת מסוימת הוא מחזיר לנו template + controller

2. דומה ל request & response הרגיל רק עבור SPA

3. מבצע chace ל templates

4. לא יודע להחליף רק חלקים קטנים בדף.

5. מתאים לאפליקציות קטנות.

UI Router

זה framework שנעשה מחוץ ל Angular.js והוא נעשה כדי לשפר ולשפר את יכולות ניתוב של האפליקציות שמשתמש ב AngularJs

So What UI Router Solve?

1. Nesting – ה UI Router מאפשר קינון של state, url, data reuse מה שעוזר לנו באפליקציות גדולות כאשר יש הרבה דפים שיורשים מחלקים שונים.

2. מקנה מבנה ברור לאפליקציה כך שכל פעם שנרצה להוסיף חלק נדע להוסיף עקב המבנה שיצרנו

3. state מאפשר לך לגשת למידע שונה מ state אחר ועל ידי זאת ניתן בקלות להעביר את המידע בין states באמצעות stateParams $.

4. ניתן בקלות לקבוע אם האפליקציה נמצאת ב state מסויים או באבא שלה, ובכך להתאים את UI לתבניות.

5. כל האפליקציה הופכת לחשיבה על פי states במקום חשיבה על URL.

State Machine

ה UI Router פותר את ה flow באפליקציה בכך שהוא כל מקום הן מבחינת UI הן מבחינת URL והן מבחינת דטה הם דומים או שונים כל מצב כזה הוא state ובאמצעות הגדרתם נוצרת לנו מכונה (= Layout) שיש לה מבנה ידוע ומסודר (לדוגמה מעבר בין כל טאב בעמוד – אז כל טאב הוא stae מסויים וכדומה..)

Exmple

MultipleNamedViewsExample

בתמונה של לפנינו יש מספר חלקים:  Filters – TableData – Graph וה Root הוא index.html שלנו:

<!-- index.html -->  
<body>  
  <div ui-view="filters"></div>  
  <div ui-view="tabledata"></div>  
  <div ui-view="graph"></div>  
</body>

הגדרת ה state יהיה כך:

$stateProvider 
  .state('root', {}) 
  .state('root.filters', {}) 
  .state('root.tabledata', {}) 
  .state('root.graph', {});

השימוש בנקודה מציין בן. ניתן גם להשתמש ב property שנקרא parent:

$stateProvider  
  .state('root', {})  
  .state('filters', { 
      parent: root 
  }). 
  .state('root.tabledata', , { 
      parent: root 
  }). 
  .state('root.graph', , { 
      parent: root 
  });

A Little API Overview

1. הגדרת ה stateProvider$ מוגדרת בשלב ה config של האפליקציה

2. Directives: הראשון נקרא ui-view – איפה שנכתוב אותו שם יהיה ה template השני ui-serf כמו ה href הידוע בלינקים – במקום לתת את ה url נותנים לו את ה שם ה state (הוא ישתול לבד את ה url וכו..)

3. ()state.go$ – מאפשר מעבר ידני ל state מסויים

4. העברת פרמטרים – בדומה ל ngRoute וזאת על ידי הוספת נקודתיים וקריאת הפרמטר מתבצעת על ידי stateParmes$

5. Events:

stateChangeSuccess$ – מתרחש פעם אחת כאשר עוברים ל state אחר.

stateChangeStart$ – מתרחש כאשר מעבר ל state מתחיל.

stateNotFound$ – מתרחש כאשר ניתן למצוא את ה state המבוקש.

stateChangeError$ – מתרחש כאשר נוצרת שגיאה במעבר ל state.

6. ()otherwise – מאפשר לתת נתיב ברירת מחדל.

מידע נוסף ניתן לקרוא ב GitHub ועוד GitHub

בנוסף ניתן לקרוא את הפוסט שכתבתי על שאר הכלים שיש ל Angular UI

עם התגית: , , , ,
פורסם ב-Angular, Angular UI Router, AngularJs, AngularUi, אנגולר

כתיבת תגובה