AngularJS 路由

在 AngularJS 中，路由是一种用于管理不同视图和控制器之间导航的机制。它允许您根据 URL 的变化来动态加载不同的视图，并管理这些视图对应的控制器。

安装 AngularJS 路由

要开始使用 AngularJS 路由，首先需要在项目中引入 AngularJS 路由模块。您可以通过 CDN 或者下载 AngularJS 路由的文件来引入。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

然后在应用模块中注入 ngRoute 模块。

var app = angular.module('myApp', ['ngRoute']);

配置路由

在 AngularJS 中，路由的配置是通过 $routeProvider 服务来实现的。您可以在应用模块的配置阶段使用 $routeProvider 来定义不同 URL 对应的视图和控制器。

-- -------------------- ---- -------
----------------------------------- -
  --------------
    ---------- -
      ------------ ------------------
      ----------- ----------------
    --
    --------------- -
      ------------ -------------------
      ----------- -----------------
    --
    ------------
      ----------- ---
    ---
---

在上面的代码中，我们定义了两个路由：/ 对应 HomeController 控制器和 home.html 视图，/about 对应 AboutController 控制器和 about.html 视图。如果用户访问的 URL 不匹配任何已定义的路由，将会重定向到 /。

创建视图和控制器

接下来，我们需要创建对应的视图和控制器。在 home.html 和 about.html 文件中编写对应的 HTML 结构，然后在 HomeController 和 AboutController 控制器中编写控制逻辑。

<!-- home.html -->
<div>
  <h1>Welcome to Home Page</h1>
</div>

app.controller('HomeController', function($scope) {
  // Controller logic for Home Page
});

<!-- about.html -->
<div>
  <h1>About Us</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

app.controller('AboutController', function($scope) {
  // Controller logic for About Page
});

使用路由

最后，在应用的主 HTML 文件中添加 <ng-view> 指令，这个指令将会动态地加载对应路由的视图。

-- -------------------- ---- -------
--------- -----
------
------
  ---------------- ------- ----------------
-------
----- ---------------
  ----
    ------ ------------------------
    ------ ------------------------------
  -----
  
  ---- --------------
  
  ------- ------------------------------------------------------------------------------------
  ------- --------------------------------------------------------------------------------------
  --------
    --- --- - ----------------------- -------------
    
    ----------------------------------- -
      --------------
        ---------- -
          ------------ ------------------
          ----------- ----------------
        --
        --------------- -
          ------------ -------------------
          ----------- -----------------
        --
        ------------
          ----------- ---
        ---
    ---
    
    -------------------------------- ---------------- -
      -- ---------- ----- --- ---- ----
    ---
    
    --------------------------------- ---------------- -
      -- ---------- ----- --- ----- ----
    ---
  ---------
-------
-------

现在您已经成功配置了 AngularJS 路由，用户可以通过点击链接来在不同视图之间进行导舨。