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 对应的视图和控制器。

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

在上面的代码中，我们定义了两个路由：/ 对应 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> 指令，这个指令将会动态地加载对应路由的视图。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Routing Tutorial</title>
</head>
<body ng-app="myApp">
  <ul>
    <li><a href="#!/">Home</a></li>
    <li><a href="#!/about">About</a></li>
  </ul>
  
  <div ng-view></div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
  <script>
    var app = angular.module('myApp', ['ngRoute']);
    
    app.config(function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/home.html',
          controller: 'HomeController'
        })
        .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutController'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
    
    app.controller('HomeController', function($scope) {
      // Controller logic for Home Page
    });
    
    app.controller('AboutController', function($scope) {
      // Controller logic for About Page
    });
  </script>
</body>
</html>

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