ראשי › Angular › Angular New Router – ngNewRouter

Angular New Router – ngNewRouter

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

לכבוד גרסה 1.4 של angular קיבלנו moudle חדש בשם ngNewRouter:

angular.module('app', ['ngNewRouter'])
  .controller('AppController', ['$router', AppController]);
 
function AppController ($router) {
  $router.config([
    {path: '/', component: 'home' }
  ]);
}

כפי שניתן לראות ה app שלנו מקבל את ngNewRouter וה controller עדיין משתמש ב router$ כמו שאנחנו רגילים.

הגדרה:

ה router מקבל מערך של פריטים, לדוגמה:

$router.config([
  { path: '/user', component: 'user' }
]);

ניתן לתת מספר רב של viewes, לדוגמה:

$router.config([
  { path: '/user',
    components: {
      master: 'userList',
      detail: 'user'
  } }
]);
<div router-view-port="master"></div>
<div router-view-port="detail"></div>

באמצעות redirectTo ניתן להגדיר עבור url מסויים שהוא יעבור ל url אחר באופן דיפולטיבי, לדוגמה:

$router.config([
  { path: '/', redirectTo: '/user' },
  { path: '/user', component: 'user' }
]);

Components

"routable component" – הכוונה ל templete + controller + router, כלומר באמצעות ה components ניתן להגדיר מפה לפי שם של ה component עבור templete ול controller.

לכל components יש "view ports" – אלה מקומות ב DOM שניתן לטעון אליהם חלקים מה app דרך אותו הגדרת route, ה components מגדיר ל router מה להשים בתוך ה view port.

<div router-view-port="name"></div>

דוגמה מלאה:

angular.module('app', ['ngNewRouter'])
  .controller('AppController', ['$router', AppController]);
 
function AppController ($router) {
  $router.config([
    { path: '/',           component: 'home' },
    { path: '/detail/:id', component: 'detail' }
  ]);
}

נקשר בין ה detail component באמצעות router-link directive:

<body ng-app="myApp" ng-controller="AppController as app">
  <a router-link="detail({id: 5})">link to detal</a>

ה directuve יטפל ביצירת ה href וכתובת הדפדפן תעודכן.
ב detail moudle נכתוב controller שמשמש ב id route כפרמטר:

angular.module('app.detail', ['ngNewRouter'])
  .controller('DetailController', ['$routeParams', DetailController]);
 
function DetailController ($routeParams) {
  this.id = $routeParams.id;
}

ניתן גם להציג את ה id בטמפלט:

<p>detail #{{detail.id}}</p>
עם התגית: , ,
פורסם ב-Angular, ngNewRouter, router
תגובה אחת ב“Angular New Router – ngNewRouter”
  1. משה סימון הגיב:
    28/02/2015 ב- 18:53

    תודה תותח. המשך כך.

    אהבתי

    להגיב

כתיבת תגובה