bower install angular-route --save
<script src="bower_components/angular-route/angular-route.min.js" type="text/javascript"></script>
<div class="col-md-9">
<ng-view></ng-view>
</div> model.panel = {
title: "Panel Title",
items: [
{
title: "Home", url: "#/home"
},
{
title: "Articles", url: "#/articles"
},
{
title: "Authors", url: "#/authors"
}
]
}; var module = angular.module("dntModule", ["ngRoute"]); module.config(function ($routeProvider) {
$routeProvider
.when("/home", { template: "<app-home></app-home>" })
.when("/articles", { template: "<app-articles></app-articles>" })
.when("/authors", { template: "<app-authors></app-authors>" })
.otherwise({ redirectTo: "/home" });
}); module.component("appHome", {
template: `
<hr><div>
<div>Panel heading = HomePage</div>
<div>
HomePage
</div>
</div>`
});
module.component("appArticles", {
template: `
<hr><div>
<div>Panel heading = Articles</div>
<div>
Articles
</div>
</div>`
});
module.component("appAuthors", {
template: `
<hr><div>
<div>Panel heading = Authors</div>
<div>
Authors
</div>
</div>`
}); 
اکنون توسط لینک‌های تعریف شده می‌توانیم به راحتی درون تمپلیت‌ها، پیمایش کنیم. همانطور که عنوان شد تا اینجا مسیریاب پیش‌فرض Angular هیچ اطلاعی از کامپوننت‌ها ندارد؛ بلکه آنها را با کمک template، به صورت غیر مستقیم، درون صفحه نمایش داده‌ایم.
معرفی Component Router
مزیت این روتر این است که به صورت اختصاصی برای کار با کامپوننت‌ها طراحی شده است. بنابراین دیگر نیازی به استفاده از template درون route configuration نیست. برای استفاده از این روتر ابتدا باید پکیج آن را نصب کنیم:
bower install angular-component-router --save
سپس وابستگی فوق را با روتر پیش‌فرضی که در مثال قبل بررسی کردیم، جایگزین خواهیم کرد:
<script src="bower_components/angular-component-router/angular_1_router.js"></script>
همچنین درون فایل module.js به جای وابستگی ngRoute از ngComponentrouter استفاده خواهیم کرد:
var module = angular.module("dntModule", ["ngComponentRouter"]); در ادامه به جای تمامی route configurations قبلی، اینبار یک کامپوننت جدید را به صورت زیر ایجاد خواهیم کرد:
module.component("appHome", {
template: `
<hr>
<div>
<div>Panel heading = HomePage</div>
<div>
HomePage
</div>
</div>`
}); همانطور که مشاهده میکنید برای پاسخ‌گویی به تغییرات URL، مقدار routeConfig$ را مقداردهی کرده‌ایم. در اینجا به جای بارگذاری تمپلیت، خود کامپوننت، در هر یک از ruleهای فوق بارگذاری خواهد شد. برای حالت otherwise نیز از سینتکس **/ استفاده کرده‌ایم.
تمپلیت کامپوننت فوق نیز به صورت زیر است:
<div class="container">
<div class="row">
<div class="col-md-3">
<hr>
<dnt-widget></dnt-widget>
</div>
<div class="col-md-9">
<ng-outlet></ng-outlet>
</div>
</div>
</div> لازم به ذکر است دیگر نباید از دایرکتیو ng-view استفاده کنیم؛ زیرا این دایرکتیو برای استفاده از روتر اصلی طراحی شده است. به جای آن از دایرکتیو ng-outlet استفاده شده است. این کامپوننت به عنوان یک کامپوننت top level عمل خواهد کرد. بنابراین درون صفحه‌ی index.html از کامپوننت فوق استفاده خواهیم کرد:
<html ng-app="dntModule">
<head>
<meta charset="UTF-8">
<title>Using Angular 1.5 Component Router</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
</head>
<body>
<dnt-app></dnt-app>
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-component-router/angular_1_router.js"></script>
<script src="scripts/module.js" type="text/javascript"></script>
<script src="scripts/dnt-app.component.js"></script>
<script src="scripts/dnt-widget.component.js"></script>
</body>
</html> در نهایت باید جهت فعال‌سازی سیستم مسیریابی جدید، سرویس زیر را همراه با نام کامپوننت فوق ریجستر کنیم:
module.value("$routerRootComponent", "dntApp"); اکنون اگر برنامه را اجرا کنید خواهید دید که همانند قبل، کار خواهد کرد. اما اینبار از روتر جدید و سازگار با کامپوننت‌ها استفاده می‌کند.
کدهای این قسمت را نیز از اینجا می‌توانید دریافت کنید.
