AngularJS：如何在控制器内部切换控制器？单页登录场景问询

我开发的单页应用首页把登录功能和整个应用内容放在同一个HTML文件里，通过ng-if指令结合isLogin变量控制内容显示，Index.html代码如下：

<body ng-controller="IndexController">
  <div ng-if="!isLogin">
    <!-- 包含登录代码 -->
    <a href="#!Main" ng-click=login()>Login</a> <!-- 登录按钮 -->
  </div>
  <div ng-if="isLogin">
    <!-- 此处有导航栏代码 -->
  </div>

我已经在IndexController.js中实现了控制isLogin值的login()函数，现在想请教：AngularJS中如何在一个控制器内部切换控制器？

在AngularJS里，直接在一个控制器内部“切换”控制器其实不是常规操作，但可以通过几种贴合你场景的方式实现类似效果，让不同模块的逻辑职责更清晰：

1. 结合ng-if和ng-controller指令（最适配你的现有代码） #

既然你已经在用isLogin控制区块显示，完全可以给不同区块直接挂载对应的控制器。登录区用LoginController专门处理登录逻辑，登录后的内容区用MainController管理应用主体逻辑，当isLogin切换时，对应的控制器会自动完成初始化/销毁：

<body ng-controller="IndexController">
  <div ng-if="!isLogin" ng-controller="LoginController">
    <!-- 登录相关DOM和逻辑交给LoginController处理 -->
    <input type="text" ng-model="username" placeholder="用户名">
    <input type="password" ng-model="password" placeholder="密码">
    <a href="#!Main" ng-click="login()">Login</a>
  </div>
  <div ng-if="isLogin" ng-controller="MainController">
    <!-- 导航栏及应用内容交给MainController处理 -->
    <nav>
      <a href="#!Profile">我的资料</a>
      <a href="#!" ng-click="logout()">退出登录</a>
    </nav>
    <!-- 其他应用内容 -->
  </div>

这种方式的好处是零学习成本，和你现有的控制逻辑完美衔接，每个区块的职责划分也更明确。如果需要共享用户信息这类数据，父控制器IndexController可以通过$scope继承或者$rootScope传递给子控制器。

2. 使用AngularJS路由（ngRoute，适合复杂应用） #

如果你的应用后续会拓展多个页面，推荐用官方的ngRoute模块来管理不同路由对应的控制器和视图，这也是单页应用的标准做法：

1. 先配置路由规则：

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
  $routeProvider
    .when('/login', {
      templateUrl: 'login.html',
      controller: 'LoginController'
    })
    .when('/main', {
      templateUrl: 'main.html',
      controller: 'MainController',
      resolve: {
        // 在这里做登录校验，未登录自动跳转到登录页
        auth: function($location, AuthService) {
          if (!AuthService.isLoggedIn()) {
            $location.path('/login');
          }
        }
      }
    })
    .otherwise({redirectTo: '/login'});
});

2. 主页面用ng-view渲染对应路由的内容：

<body>
  <div ng-view></div>
</body>

路由会自动帮你管理控制器的生命周期，也更容易维护不同页面的独立逻辑，适合中大型应用。

3. 组件化封装（AngularJS 1.5+，推荐进阶写法） #

如果你的AngularJS版本是1.5及以上，可以用组件来封装不同模块的视图和控制器，让代码复用性和可维护性更高：

angular.module('myApp')
.component('loginComponent', {
  templateUrl: 'login.html',
  controller: 'LoginController'
})
.component('mainComponent', {
  templateUrl: 'main.html',
  controller: 'MainController'
});

然后在主页面通过ng-if控制组件显示：

<body ng-controller="IndexController">
  <login-component ng-if="!isLogin"></login-component>
  <main-component ng-if="isLogin"></main-component>
</body>

组件化是AngularJS向Angular框架过渡的推荐写法，能让代码逻辑封装更彻底，也方便后续的功能拓展。

总结一下：如果只是简单的登录/登录后切换，第一种方法最适配你当前的代码结构；如果应用规模会扩大，路由或组件化会是更优的选择。

内容的提问来源于stack exchange，提问作者Mark