AngularJS—— 如何开启、使用以及掌握路由功能-JavaScript中文网-JavaScript教程资源分享门户

AngularJS 是一款流行的前端框架，它提供了许多强大的功能，其中路由功能是其中之一。路由功能可以帮助我们构建单页应用程序，使得我们可以在不刷新整个页面的情况下切换不同的页面和视图。在本文中，我们将介绍如何开启、使用以及掌握 AngularJS 的路由功能。

开启路由功能

要使用路由功能，我们需要在 AngularJS 应用程序中引入路由模块。可以通过 CDN 引入 AngularJS 路由模块，也可以通过 npm 安装并在应用程序中引入。下面是通过 CDN 引入路由模块的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Routing</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
</head>
<body>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
</script>

</body>
</html>

在这个示例中，我们引入了 AngularJS 的核心模块和路由模块，然后在应用程序中定义了一个名为 "myApp" 的模块，并将 "ngRoute" 作为依赖项。这样，我们就成功地开启了路由功能。

使用路由功能

在 AngularJS 中，路由功能通过 $routeProvider 服务来配置。$routeProvider 服务允许我们定义路由规则和路由参数，以及处理路由事件。下面是一个简单的路由配置示例：

// www.javascriptcn.com code example
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home.html"
  })
  .when("/about", {
    templateUrl : "about.html"
  })
  .when("/contact", {
    templateUrl : "contact.html"
  });
});

在这个示例中，我们通过 $routeProvider 服务定义了三个路由规则。当用户访问根路径时，将会加载名为 "home.html" 的模板文件。当用户访问 "/about" 路径时，将会加载名为 "about.html" 的模板文件。当用户访问 "/contact" 路径时，将会加载名为 "contact.html" 的模板文件。

我们还可以通过 $routeParams 服务获取路由参数。$routeParams 服务允许我们在路由规则中定义参数，然后在控制器中使用 $routeParams 服务来获取这些参数。下面是一个简单的路由参数示例：

// www.javascriptcn.com code example
app.config(function($routeProvider) {
  $routeProvider
  .when("/user/:id", {
    templateUrl : "user.html",
    controller : "userCtrl"
  });
});

app.controller("userCtrl", function($scope, $routeParams) {
  $scope.userId = $routeParams.id;
});

在这个示例中，我们通过 ":id" 参数来定义了一个路由参数。当用户访问 "/user/1" 路径时，将会加载名为 "user.html" 的模板文件，并且会执行名为 "userCtrl" 的控制器。在控制器中，我们使用 $routeParams 服务获取了路由参数并将其赋值给 $scope.userId 变量。

掌握路由功能

要掌握路由功能，我们需要深入了解路由事件和路由钩子。路由事件允许我们在路由发生变化时执行特定的操作。例如，我们可以在路由事件中检查用户是否已登录，如果未登录则将其重定向到登录页面。下面是一些常用的路由事件：

$routeChangeStart：当路由开始变化时执行。
$routeChangeSuccess：当路由变化成功时执行。
$routeChangeError：当路由变化失败时执行。
$routeUpdate：当路由参数更新时执行。

路由钩子允许我们在路由事件之前或之后执行特定的操作。例如，我们可以在路由钩子中检查权限，如果用户没有权限则阻止路由变化。下面是一些常用的路由钩子：

resolve：在路由变化之前获取数据并将其注入控制器中。
controller：在路由变化之后执行控制器。
template：在路由变化之前获取模板并将其缓存，以便下次使用。

了解路由事件和路由钩子可以帮助我们更好地掌握路由功能，并且可以在实际开发中更加灵活地应用路由功能。

示例代码

下面是一个完整的路由功能示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Routing</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
</head>
<body>

<div ng-controller="mainCtrl">
  <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/about">About</a></li>
    <li><a href="#/contact">Contact</a></li>
  </ul>
  <div ng-view></div>
</div>

<script>
var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home.html",
    controller : "homeCtrl"
  })
  .when("/about", {
    templateUrl : "about.html",
    controller : "aboutCtrl"
  })
  .when("/contact", {
    templateUrl : "contact.html",
    controller : "contactCtrl"
  })
  .otherwise({
    redirectTo: "/"
  });
});

app.controller("mainCtrl", function($scope) {
  $scope.title = "AngularJS Routing";
});

app.controller("homeCtrl", function($scope) {
  $scope.message = "Welcome to the Home Page!";
});

app.controller("aboutCtrl", function($scope) {
  $scope.message = "Learn more About Us!";
});

app.controller("contactCtrl", function($scope) {
  $scope.message = "Contact Us Today!";
});
</script>

</body>
</html>

在这个示例中，我们定义了三个路由规则和一个默认规则。当用户访问根路径时，将会加载名为 "home.html" 的模板文件，并且会执行名为 "homeCtrl" 的控制器。当用户访问 "/about" 路径时，将会加载名为 "about.html" 的模板文件，并且会执行名为 "aboutCtrl" 的控制器。当用户访问 "/contact" 路径时，将会加载名为 "contact.html" 的模板文件，并且会执行名为 "contactCtrl" 的控制器。如果用户访问的路径不存在，则会重定向到根路径。在控制器中，我们定义了 $scope.message 变量，并将其在模板文件中显示出来。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d57ff9a941bf7134a4ff42

AngularJS—— 如何开启、使用以及掌握路由功能

开启路由功能

使用路由功能

掌握路由功能

示例代码

接着读