咨询：AngularJS视图加载时如何触发控制器执行

嘿，针对你这个AngularJS单页应用的控制器运行问题，我结合你的场景（登录/首页同HTML、ng-view+default.html）整理了几种靠谱的实现方法：

1. 通过$routeProvider路由配置绑定控制器（最推荐） #

既然你用到了ng-view，那大概率是用AngularJS原生的ngRoute模块（如果是ui-router思路也类似）。最规范的做法就是在路由配置里，给每个路由对应的视图直接指定控制器——这样视图加载时Angular会自动帮你实例化并运行控制器里的代码。

举个贴合你场景的例子：

// 先初始化你的应用，依赖ngRoute模块
angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      // 默认路由：加载default.html，同时绑定DefaultController
      .when('/', {
        templateUrl: 'default.html',
        controller: 'DefaultController',
        controllerAs: 'vm' // 可选，用controllerAs语法能避免$scope的一些坑
      })
      // 如果后续有其他页面，也可以按同样方式配置
      .when('/profile', {
        templateUrl: 'profile.html',
        controller: 'ProfileController'
      })
      .otherwise({ redirectTo: '/' });
  });

// 定义对应的控制器
angular.module('myApp')
  .controller('DefaultController', function($scope) {
    // 这段代码会在default.html加载到ng-view时自动执行
    console.log('Default视图已加载，控制器启动');
    
    // 初始化登录状态——贴合你的场景
    $scope.isLogin = false;

    // 登录逻辑示例
    $scope.handleLogin = function() {
      // 这里写你的认证逻辑，比如调用接口验证账号密码
      // 认证通过后切换状态
      $scope.isLogin = true;
    };
  });

这样一来，页面加载时ng-view会自动渲染default.html，同时DefaultController里的初始化逻辑、登录方法都会生效，完美匹配你用ng-show控制登录/首页显示的需求。

2. 在视图模板中直接用ng-controller指令 #

如果你的场景比较简单，也可以直接在default.html的根元素上添加ng-controller指令，这样视图被加载到ng-view时，控制器会自动生效。

比如你的default.html可以这么写：

<div ng-controller="DefaultController">
  <!-- 登录区域：未登录时显示 -->
  <div ng-show="!isLogin">
    <input type="text" ng-model="username" placeholder="用户名">
    <input type="password" ng-model="password" placeholder="密码">
    <button ng-click="handleLogin()">登录</button>
  </div>

  <!-- 首页内容：登录后显示 -->
  <div ng-show="isLogin">
    <h1>欢迎回到首页！</h1>
    <!-- 其他首页内容 -->
  </div>
</div>

控制器的定义和上面类似，里面的代码会在视图加载时自动运行。这种方式适合小型场景，但路由配置绑定控制器更利于代码拆分和维护。

3. 用resolve预加载数据（进阶用法） #

如果你的控制器需要依赖某些异步数据（比如提前判断用户是否已登录），可以在路由配置里用resolve属性先获取数据，再注入到控制器中。这样能保证控制器运行时数据已经就绪。

示例代码：

$routeProvider
  .when('/', {
    templateUrl: 'default.html',
    controller: 'DefaultController',
    resolve: {
      // 提前请求用户登录状态
      loginStatus: function($http) {
        return $http.get('/api/check-login').then(function(res) {
          return res.data.isLoggedIn;
        });
      }
    }
  });

// 控制器中注入resolve返回的loginStatus
angular.module('myApp')
  .controller('DefaultController', function($scope, loginStatus) {
    // 直接用预加载的登录状态初始化
    $scope.isLogin = loginStatus;
    console.log('控制器启动，当前登录状态:', loginStatus);
  });

这种方式能避免控制器运行时数据未加载完成的问题，适合需要异步数据支撑的场景。

针对你场景的小提示 #

1. 确保已经引入angular-route.js脚本，并且应用模块依赖ngRoute，不然ng-view和$routeProvider都没法用。
2. 你的登录/首页同HTML的逻辑，完全可以放在DefaultController里处理——初始化isLogin状态，写登录方法，用ng-show控制显示就好，和视图加载逻辑完美契合。

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