AngularJS 路由
- 上一頁 AngularJS 動畫
- 下一頁 AngularJS 應用程序
ngRoute 模塊幫助您的應用程序成為單頁應用程序。
什么是 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 Route 模塊：
<script src="https://cdn.staticfile.net/angular.js/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 指令：
實例
<div ng-view></div>
實例
<ng-view></ng-view>
實例
<div class="ng-view"></div>
應用程序只能有一個 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 表達式，就像在 AngularJS 應用程序的其他 HTML 部分一樣。
這些文件看起來像這樣：
london.htm
<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>
paris.htm
<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>"
});
});
- 上一頁 AngularJS 動畫
- 下一頁 AngularJS 應用程序
