AngularJS 路由
ngRoute 模組有助於將您的應用程式變成一個單頁面應用程式（Single Page Application）。
AngularJS 中的路由是什麼？
如果您想在應用程式中導航到不同的頁面，同時又希望應用程式是 SPA（單頁面應用程式），並且不進行頁面重新載入，您可以使用 ngRoute 模組。
ngRoute 模組會在不重新載入整個應用程式的情況下，將您的應用程式“路由”到不同的頁面。
示例
導航到 "red.htm", "green.htm", 和 "blue.htm"
<body ng-app="myApp">
<p><a href="#/!">主頁</a></p>
<a href="#!red">紅色</a>
<a href="#!green">綠色</a>
<a href="#!blue">藍色</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
自己動手試一試 »
我需要什麼？
要使您的應用程式準備好進行路由，您必須包含 AngularJS 路由模組
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
然後，您必須在應用程式模組中將 ngRoute 新增為依賴項
var app = angular.module("myApp", ["ngRoute"]);
現在您的應用程式可以訪問路由模組，它提供了 $routeProvider。
使用 $routeProvider 配置應用程式中的不同路由
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
放在哪裡？
您的應用程式需要一個容器來放置路由提供的內容。
這個容器就是 ng-view 指令。
在應用程式中包含 ng-view 指令有三種不同的方式
應用程式只能有一個 ng-view 指令，它將是路由提供的所有檢視的佔位符。
$routeProvider
使用 $routeProvider，您可以定義當用戶單擊連結時顯示哪個頁面。
示例
定義一個 $routeProvider
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
自己動手試一試 »
使用應用程式的 config 方法定義 $routeProvider。在 config 方法中註冊的工作將在應用程式載入時執行。
控制器
使用 $routeProvider，您還可以為每個“檢視”定義一個控制器。
示例
新增控制器
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "I love Paris";
});
自己動手試一試 »
"london.htm" 和 "paris.htm" 是普通的 HTML 檔案，您可以在其中像在 AngularJS 應用程式的其他 HTML 部分一樣新增 AngularJS 表示式。
檔案看起來像這樣
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
模板
在前面的示例中，我們在 $routeProvider.when 方法中使用了 templateUrl 屬性。
您也可以使用 template 屬性，它允許您直接在屬性值中編寫 HTML，而無需引用頁面。
示例
編寫模板
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
});
});
自己動手試一試 »
otherwise 方法
在前面的示例中，我們使用了 $routeProvider 的 when 方法。
您也可以使用 otherwise 方法，當沒有任何其他路由匹配時，它將是預設路由。
示例
如果“Banana”或“Tomato”連結都沒有被點選，則告知他們
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
});
});
自己動手試一試 »
