AngularJS 路由

AngularJS 路由 (Routing)

在单页面应用程序（SPA）中，路由（Routing） 是一个至关重要的概念，它允许在不重新加载整个页面的情况下根据 URL 动态加载不同的视图。AngularJS 提供了内置的路由支持，能够帮助你轻松管理应用中的视图和 URL 之间的映射关系。

AngularJS 的路由由 ngRoute 模块实现，提供了将不同的视图与 URL 进行绑定的能力，并能够处理视图的加载、URL 的改变等。

1. 安装和引入 `ngRoute` 模块

首先，确保在你的 AngularJS 应用中引入了 ngRoute 模块。

<!-- 引入 AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<!-- 引入 ngRoute 模块 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

然后，在你的应用中，添加 ngRoute 模块作为依赖：

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

2. 配置路由

路由的配置通过 $routeProvider 服务进行，在模块中使用 .config() 方法进行配置。你可以将 URL 与视图进行关联，指定不同 URL 对应的模板和控制器。

app.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'about.html',
            controller: 'AboutController'
        })
        .otherwise({
            redirectTo: '/home'
        });
});

when(path, options)：用于定义当 URL 匹配 path 时要加载的视图和控制器。
otherwise(options)：用于定义默认的 URL，当没有匹配到任何路由时，会重定向到该 URL。

3. 创建视图和控制器

视图和控制器是 AngularJS 路由的关键部分。你可以为每个路由指定一个模板和一个控制器，模板可以是 HTML 文件，控制器则负责管理该视图的行为和数据。

3.1 视图模板

<!-- home.html -->
<h2>欢迎来到首页！</h2>
<p>这是我们的主页。</p>

<!-- about.html -->
<h2>关于我们</h2>
<p>这里是关于页面。</p>

3.2 控制器

app.controller('HomeController', function($scope) {
    $scope.message = "这是首页的内容";
});

app.controller('AboutController', function($scope) {
    $scope.message = "这是关于页面的内容";
});

4. 路由视图

在 HTML 页面中，你需要设置一个容器来显示路由的视图内容，通常是通过 ng-view 指令实现的。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 路由示例</title>
</head>
<body>
    <h1>AngularJS 路由示例</h1>
    
    <ul>
        <li><a href="#/home">首页</a></li>
        <li><a href="#/about">关于</a></li>
    </ul>

    <!-- 视图显示区域 -->
    <div ng-view></div>
    
    <!-- 引入 AngularJS 和 ngRoute -->
    <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>
    <script src="app.js"></script>
</body>
</html>

在这个示例中，ng-view 指令会根据当前的 URL 动态显示对应的视图内容。

5. 路由参数

AngularJS 还支持在路由中传递参数。例如，可以在 URL 中传递一个参数，并将其传递给控制器来动态生成内容。

5.1 路由参数配置

app.config(function($routeProvider) {
    $routeProvider
        .when('/user/:id', {
            templateUrl: 'user.html',
            controller: 'UserController'
        })
        .otherwise({
            redirectTo: '/'
        });
});

在这个例子中，/user/:id 路由会捕获一个 id 参数。

5.2 控制器接收参数

app.controller('UserController', function($scope, $routeParams) {
    var userId = $routeParams.id; // 获取路由参数
    $scope.message = "用户 ID 为 " + userId;
});

6. 路由守卫

AngularJS 提供了路由守卫功能，可以在路由跳转前进行检查，常见的守卫有：

$routeChangeStart：当路由开始变化时触发。
$routeChangeSuccess：当路由变化成功时触发。
$routeChangeError：当路由变化失败时触发。

你可以用这些事件来控制访问权限、加载动画等。

6.1 路由事件监听

app.run(function($rootScope) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        console.log("路由开始变化");
    });
    
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        console.log("路由变化成功");
    });
    
    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
        console.log("路由变化失败");
    });
});

7. 总结

路由 (Routing) 是单页面应用程序（SPA）中不可或缺的一部分，它允许你根据 URL 加载不同的视图内容，而无需重新加载整个页面。
在 AngularJS 中，路由由 ngRoute 模块提供，通过 $routeProvider 配置不同的 URL 与视图的映射。
你可以通过 ng-view 指令在页面中显示不同的视图。
支持路由参数、嵌套路由、路由守卫等高级特性。

使用 AngularJS 路由，可以轻松创建具有动态内容和页面跳转的单页面应用。