什么是 Angular.js 路由？
Angular.js 是一个流行的前端框架，它提供了一种叫做路由的机制来管理单页应用程序（SPA）中的视图。通过路由，可以实现在不刷新整个页面的情况下，根据用户的操作或 URL 变化，动态地加载不同的视图。
如何使用 Angular.js 路由？
首先，在 HTML 页面中引入 Angular.js 库和 Angular.js 路由库：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
然后，在 JavaScript 中配置路由：
-- -------------------- ---- -------
--- --- - ----------------------- -------------
----------------------------------- -
--------------
---------- -
------------ ------------
----------- ----------
--
--------------- -
------------ -------------
----------- -----------
--
------------
----------- ---
---
---以上代码定义了两个路由：“/”和“/about”，分别对应于 home.html 和 about.html 这两个模板文件，并指定了相应的控制器，以便在视图中显示数据和处理用户操作。如果 URL 不匹配任何已定义的路由，则重定向到“/”。
最后，在 HTML 模板文件中定义视图：
<div ng-app="myApp"> <div ng-view></div> </div>
这个 div 中的 ng-view 指令实际上就是路由占位符，它会根据当前 URL 加载相应的视图。
如何在 Angular.js 路由中传递参数？
有时候，我们需要在路由中传递一些参数，比如从一个列表页面跳转到一个详情页面时，需要传递对应的 ID。在 Angular.js 路由中，可以使用 $routeParams 服务来获取路由中的参数。
首先，在 JavaScript 中定义带参数的路由：
.when("/product/:id", {
templateUrl: "product.html",
controller: "productCtrl"
})注意这里的“:id”表示参数名，它会被替换成实际的参数值。接下来，在控制器中注入 $routeParams，并获取参数值：
app.controller("productCtrl", function($scope, $routeParams) {
$scope.productId = $routeParams.id;
});最后，在 HTML 模板文件中显示参数值：
<h1>Product {{productId}}</h1>这样，当 URL 匹配“/product/123”时，页面上会显示“Product 123”。
总结
Angular.js 路由是管理 SPA 视图的重要机制，通过配置和使用路由，可以使得应用程序更加灵活和可维护。同时，路由也支持传递参数，方便不同视图之间的数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1771