AngularJS 是一个流行的前端框架，它提供了许多方便的工具和指令来开发富交互性 Web 应用程序。在这些工具和指令中，路由是其中一个非常重要的组成部分，可以帮助我们实现单页应用程序（SPA）的导航。
通常情况下，我们会使用链接来进行页面之间的导航。但是有时候，我们需要将操作封装在按钮中，以便更好地控制用户界面。本篇文章将介绍如何在 AngularJS 中实现使用按钮进行页面导航的简单方法。
步骤
1. 安装 AngularJS 路由器
首先，我们需要在我们的应用程序中安装 AngularJS 路由器。您可以通过以下命令使用 npm 进行安装：
--- ------- ------------- ------
然后，我们需要将其添加到我们的 HTML 文件中：
------- ------------------------------------------------------------------------------------ ------- --------------------------------------------------------------------------------------
2. 配置路由器
接下来，我们需要在我们的应用程序中配置路由器。我们可以在 app.js 文件中定义我们的应用程序，并在其中定义路由配置。
--- --- - ----------------------- -------------
----------------------------------- -
--------------
-------------- -
------------ ------------
----------- ----------------
--
--------------- -
------------ -------------
----------- -----------------
--
------------
----------- -------
---
---
-------------------------------- ---------------- -
-- -----
---
--------------------------------- ---------------- -
-- -----
---在上面的代码中，我们定义了两个路由：/home 和 /about。每个路由都有一个 HTML 模板和一个控制器。我们还定义了当用户访问不存在的路由时应该重定向到哪个路由。
3. 创建导航按钮
现在我们已经设置好了路由器，我们可以创建按钮来导航到不同的页面。我们可以使用 ng-click 指令来实现这一点。例如：
------- ------------------------------------- ------- --------------------------------------
在上面的代码中，我们使用 ng-click 指令调用 goTo 函数，并将路由名称作为参数传递。我们需要在控制器中实现 goTo 函数：
-------------------------------- ---------------- ---------- -
----------- - --------------- -
------------------ - -------
--
---在上面的代码中，我们注入了 $location 服务，并实现了 goTo 函数。该函数将路由名称转换为 URL 并使用 $location.path() 方法将用户重定向到相应的路由。
4. 完成
现在，我们已经完成了使用按钮进行页面导航的简单方法。当用户点击按钮时，会自动导航到相应的页面。您可以使用这种方法来控制和优化用户界面，以便更好地满足您的需求。
示例代码
这里是完整的示例代码，包括 HTML、JavaScript 和 CSS 文件：
--------- -----
------
------
----- ----------------
------------ --------- --------------------
-------
----- ---------------
---- -------------------------------
------- ------------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------