不能使用 oc.lazyLoad 以角度延迟加载控制器 - 找不到控制器答案

【问题标题】：Can't lazy load controllers in angular with oc.lazyLoad - controller not found不能使用 oc.lazyLoad 以角度延迟加载控制器 - 找不到控制器
【发布时间】：2015-12-02 14:43:40
【问题描述】：

我想在我的 Angular 项目中使用延迟加载：

这是相关的app.js代码：

var app = angular.module('eva', ['ui.router',
  'controllers', 'oc.lazyLoad']);

app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider', '$ocLazyLoadProvider',
  function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $ocLazyLoadProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');


    $urlRouterProvider.otherwise("/");
    $locationProvider.hashPrefix('!');

    $stateProvider.state('challenge', {
      url: '/challenges',
      templateUrl: 'views/Challenges.html',
      controller: 'ChallengeCtrl',
      onEnter: ['$state', 'auth', function($state, auth) {
        if (!auth.isLoggedIn()) {
          $state.go('login');
        }
      }],
      resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
          // you can lazy load files for an existing module
          return $ocLazyLoad.load('js/controllers/ChallengeController.js');
        }]
      }

这是我的控制器定义代码：

angular.module('eva').controller('ChallengeCtrl', ['$scope', 'auth','$translate', 'challengeFactory', 'userFactory', 'userService',
  function($scope, auth, $translate, challengeFactory, userFactory, userService) {

我没有在 index.html 文件中加载 challengecontroller.js 文件。

我在 index.html 文件中的 app.js 之前包含了 oclazyload：

<script type="text/javascript" src="js/lib/oclazyload/dist/ocLazyLoad.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

我现在在运行应用程序时收到此错误：

Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=ChallengeCtrl&p1=not%20a%20function%2C%20got%20undefined

我尝试了很多延迟加载的方法，但都没有奏效。现在我只是按照Example上的示例进行操作

我真的陷入了困境，我不知道该怎么做才能让延迟加载正常工作。我宁愿不使用 requirejs。

【问题讨论】：

标签： javascript angularjs oclazyload

【解决方案1】：

angular config is just a function，在调用此配置之前，任何依赖项都应该已经是 $inject。您可以将其包含在<script> 标签中并将其添加到app = angular.module['app', ['depend1'])

所以你改变它，然后再试一次。

app.config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $ocLazyLoadProvider) {

顺便说一句：打开你的浏览器开发工具，检查这个文件js/controllers/ChallengeController.js是否被正确加载

【讨论】：