AngularJS：如何通过构造函数实现页面加载时向DOM注入数据

嗨，这个问题其实很好解决～ 你已经把获取数据的逻辑封装在getBooks()里了，只要让这个函数在控制器初始化时自动执行就行，不用等点击事件触发。

最直接的解决方案：主动调用函数 #

AngularJS的控制器在页面加载、对应DOM元素完成编译时，会执行内部的代码。所以你只需要在定义完$scope.getBooks之后，直接调用它即可：

angular.module('helloWorldApp').controller('homeCtrl', ['$scope','$http','$location','$log', function($scope,$http,$location,$log){ 
    // 保留你原本的getBooks逻辑
    $scope.getBooks = function(){ 
        // 这里是你的数据获取代码，比如$http请求
        $http.get('/your-api-endpoint/books')
            .then(function(response) {
                $scope.books = response.data; // 将数据绑定到$scope
                $log.info('数据加载成功');
            })
            .catch(function(error) {
                $log.error('数据加载失败:', error);
            });
    };

    // 关键！页面加载时自动调用这个函数
    $scope.getBooks();
}]);

这样一来，当控制器初始化完成（也就是页面加载到对应视图时），getBooks()会立即执行，数据会被获取并绑定到$scope上，DOM里用ng-repeat或其他指令就能直接渲染数据了，完全不需要点击触发。

更规范的进阶方式（controllerAs语法） #

如果之后你想优化代码，避免过多依赖$scope，可以改用controllerAs语法，配合AngularJS 1.5+提供的$onInit生命周期钩子：

angular.module('helloWorldApp').controller('homeCtrl', ['$http','$location','$log', function($http,$location,$log){ 
    var vm = this; // 用vm代替$scope，更清晰

    vm.getBooks = function(){ 
        $http.get('/your-api-endpoint/books')
            .then(function(response) {
                vm.books = response.data;
                $log.info('数据加载成功');
            })
            .catch(function(error) {
                $log.error('数据加载失败:', error);
            });
    };

    // 初始化钩子，控制器就绪时自动执行
    vm.$onInit = function() {
        vm.getBooks();
    };
}]);

使用这种方式时，HTML里需要改成ng-controller="homeCtrl as vm"，渲染数据时用vm.books即可，代码结构会更清晰，也更符合现代前端的组件化思维。

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