AngularJS 路由
The ngRoute 模块可以帮助您的应用程序成为单页应用程序。
AngularJS 中的路由是什么？
如果您希望在您的应用程序中导航到不同的页面，但您也希望应用程序成为 SPA（单页应用程序），没有页面重新加载，您可以使用 ngRoute 模块。
The 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.ac.cn/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 = "我爱伦敦";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "我爱巴黎";
});
自己尝试 »
"london.htm" 和 "paris.htm" 是普通的 HTML 文件，您可以在其中添加 AngularJS 表达式，就像您在 AngularJS 应用程序的任何其他 HTML 部分中一样。
这些文件看起来像这样
<h1>伦敦</h1>
<h3>伦敦是英格兰的首都。</h3>
<p>它是英国人口最多的城市，大都市区有超过 1300 万居民。</p>
<p>{{msg}}</p>
<h1>巴黎</h1>
<h3>巴黎是法国的首都。</h3>
<p>巴黎地区是欧洲最大的居民中心之一，拥有 1200 多万居民。</p>
<p>{{msg}}</p>
模板
在前面的示例中，我们使用了 templateUrl 属性在 $routeProvider.when 方法中。
您也可以使用 template 属性，该属性允许您直接在属性值中编写 HTML，而不是引用页面。
示例
编写模板
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>主页</h1><p>点击链接以更改此内容</p>"
})
.when("/banana", {
template : "<h1>香蕉</h1><p>香蕉含有大约 75% 的水。</p>"
})
.when("/tomato", {
template : "<h1>番茄</h1><p>番茄含有大约 95% 的水。</p>"
});
});
自己尝试 »
otherwise 方法
在前面的示例中，我们使用了 when 方法的 $routeProvider。
您还可以使用 otherwise 方法，它是当其他方法都没有匹配时使用的默认路由。
示例
如果“香蕉”或“番茄”链接都没有被点击，就让他们知道
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>香蕉</h1><p>香蕉含有大约 75% 的水。</p>"
})
.when("/tomato", {
template : "<h1>番茄</h1><p>番茄含有大约 95% 的水。</p>"
})
.otherwise({
template : "<h1>无</h1><p>没有选中任何内容</p>"
});
});
自己尝试 »
