AngularJS 中的多个控制器的路由

AngularJS

在AngularJS中，我们可以使用多个控制器的路由来构建复杂的应用程序。控制器是AngularJS中的一个核心概念，用于管理应用程序的不同部分和逻辑。通过路由，我们可以根据不同的URL路径加载不同的控制器，并显示对应的视图。这使得我们可以将应用程序的不同功能模块分开管理，提高代码的可维护性和复用性。

使用ngRoute模块进行路由配置

在AngularJS中，我们可以使用ngRoute模块来进行路由配置和管理。首先，我们需要在应用程序中引入ngRoute模块：

html
<script src="Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.JS">https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.JS</a>"></script>
<script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular-route.JS"></script>

然后，在应用程序的主模块中注入ngRoute模块：

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

接下来，我们可以使用config方法来配置路由。在config方法中，我们可以使用$routeProvider对象来定义不同路径的路由规则和对应的控制器：

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

在上面的代码中，我们定义了三个路径的路由规则：'/'对应的控制器是HomeController，'/about'对应的控制器是AboutController，'/contact'对应的控制器是ContactController。当用户访问不同的路径时，AngularJS会加载对应的视图和控制器。

创建控制器和视图

接下来，我们需要创建对应的控制器和视图文件。在AngularJS中，控制器和视图是一一对应的关系。每个控制器可以对应一个视图文件，视图文件中包含了控制器所管理的HTML代码。

例如，我们可以创建一个HomeController，它对应的视图文件是home.html：

Javascript
app.controller('HomeController', function($scope) {
  $scope.message = '欢迎来到首页！';
});

html
<div ng-controller="HomeController">
  <h1>{{ message }}</h1>
</div>

在上面的代码中，我们定义了一个HomeController，并在视图文件中使用了ng-controller指令将HomeController绑定到HTML元素上。在控制器中，我们可以使用$scope对象来共享数据和方法。在视图文件中，我们可以使用双大括号语法{{}}来显示控制器中的数据。

类似地，我们可以创建AboutController和ContactController，以及它们对应的视图文件about.html和contact.html。

实现多个控制器的路由

当我们完成了路由配置和控制器的创建后，我们就可以在应用程序中实现多个控制器的路由了。当用户访问不同的路径时，AngularJS会根据路由配置加载对应的控制器和视图。

例如，当用户访问首页时，会加载HomeController和对应的home.html视图：

html
首页

当用户点击链接时，URL路径会变为'/'，AngularJS会根据路由配置加载HomeController和home.html视图。

类似地，我们可以创建其他链接和对应的控制器来实现多个控制器的路由。例如：

html
关于我们
联系我们

当用户点击链接时，AngularJS会根据路由配置加载对应的控制器和视图。

在本文中，我们介绍了如何在AngularJS中使用多个控制器的路由。我们通过ngRoute模块进行路由配置，定义了不同路径对应的控制器和视图。通过创建控制器和视图文件，我们可以实现多个控制器的路由，提高应用程序的可维护性和复用性。希望本文对您理解AngularJS中多个控制器的路由有所帮助。

参考代码：https://codepen.io/anon/pen/YzyMrBp