AngularJS 路由
ngRoute 模块可帮助您的应用程序成为单页应用程序。
什么是 AngularJS 中的路由?
如果您想导航到应用程序中的不同页面，但又希望应用程序成为 SPA（单页应用程序），无需重新加载页面，您可以使用 ngRoute 模块。
ngRoute 模块将您的应用程序路由到不同的页面，而无需重新加载整个应用程序。
实例
导航到 "red.htm", "green.htm", 和 "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">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://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"
});
});
Where Does it Go?
您的应用程序需要一个容器来放置路由提供的内容。
这个容器是 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 你还可以为每个 "view" 定义一个控制器。
实例
添加控制器:
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>"
});
});
亲自试一试 »
其他方法
在前面的示例中，我们使用了 $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>"
});
});
亲自试一试 »
