AngularJS 1.6路由动态加载控制器与模板问题求助

我来帮你搞定这个问题！在Angular 1.6里，要实现路由动态加载控制器，核心是利用路由的resolve机制，在路由跳转前确保控制器已经被注册到Angular的容器中。下面是一步步的实现方案：

第一步：保存$controllerProvider引用 #

Angular的$controllerProvider只能在配置阶段（config）使用，所以我们需要先把它的引用存起来，方便后续动态注册控制器：

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

// 把$controllerProvider的register方法挂载到app上，后续可以直接用
app.config(['$controllerProvider', function($controllerProvider) {
  app.registerController = $controllerProvider.register;
}]);

第二步：路由配置中添加resolve逻辑 #

在路由的resolve里定义一个返回Promise的函数，这个函数负责加载控制器脚本并完成注册，确保控制器在路由初始化前可用：

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/dynamic/:pageName', {
      templateUrl: function(params) {
        // 动态生成模板路径，你已经实现了这部分
        return `templates/${params.pageName}.html`;
      },
      resolve: {
        loadController: ['$q', '$http', '$route', function($q, $http, $route) {
          var deferred = $q.defer();
          // 根据路由参数动态生成控制器文件路径
          var pageName = $route.current.params.pageName;
          var controllerUrl = `controllers/${pageName}.controller.js`;

          // 加载控制器脚本
          $http.get(controllerUrl, { cache: true })
            .then(function(response) {
              // 执行脚本内容，注册控制器
              eval(response.data);
              // 告诉Angular控制器已加载完成，返回控制器名称
              deferred.resolve(`${pageName.charAt(0).toUpperCase() + pageName.slice(1)}Controller`);
            })
            .catch(function(error) {
              console.error('加载控制器失败:', error);
              deferred.reject(error);
            });

          return deferred.promise;
        }]
      },
      // 直接使用resolve返回的控制器名称
      controller: function(loadController) {
        // 这里不需要额外逻辑，只是确保控制器被注入
      }
    });
}]);

第三步：编写动态加载的控制器文件 #

控制器文件里要使用我们之前挂载的app.registerController方法来注册控制器，而不是全局的angular.module(...).controller()，这样能确保控制器被正确注册到我们的应用中：

// controllers/home.controller.js
app.registerController('HomeController', ['$scope', function($scope) {
  $scope.greeting = '这是动态加载的Home控制器！';
}]);

注意事项 #

• 关于eval的安全问题：如果你的控制器脚本来自可信源，eval是简单有效的方式；如果需要更安全的方案，可以考虑使用RequireJS等模块加载器来加载控制器模块。
• 缓存设置：给$http.get加上cache: true可以避免重复加载相同的控制器脚本，提升性能。
• 控制器命名规范：示例中用路由参数的首字母大写加上Controller作为控制器名称，你可以根据自己的规范调整。

这样配置后，路由跳转时会先加载对应的控制器脚本并注册，然后再初始化控制器和模板，就能解决控制器无法加载的问题啦！

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