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"
});
});
它去哪里？
您的应用程序需要一个容器来放置路由提供的内容。
这个容器是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"
});
});
亲自试一试 »
定义$routeProvider使用config您的申请方法。作品登记于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 表达式，就像添加 AngularJS 应用程序的任何其他 HTML 部分一样。
这些文件看起来像这样：
<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>
模板
在前面的示例中，我们使用了templateUrl属性在$routeProvider.when方法。
您还可以使用templateproperty，它允许您直接在属性值中编写 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>"
});
});
亲自试一试 »
否则方法
在前面的示例中，我们使用了when的方法$routeProvider。
您还可以使用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>"
});
});
亲自试一试 »