由Requirejs提供的角度應用程序 - 參數'（控制器）'不是函數，沒有定義？

Question

我正在嘗試使用由RequireJS提供的Angular應用程序，但由於我不斷收到Argument '(contoller)' is not a function, got undefined的錯誤，因此無法分割控制器文件。任何想法我做錯了什麼？

應用程序/ main.js，

require.config({ 
    baseUrl: "", 

    // alias libraries paths. Must set 'angular' 
    paths: { 
     'domReady': 'bower_components/requirejs-domready/domReady', 
     'angular': 'bower_components/angular/angular', 
     'angular-route': 'bower_components/angular-route/angular-route', 
     'jquery': 'bower_components/jquery/dist/jquery' 
    }, 

    // Add angular modules that does not support AMD out of the box, put it in a shim 
    shim: { 
     'angular': { 
      exports: 'angular' 
     }, 
     'angular-route': { 
      exports: 'angular' 
     } 
    }, 

    // kick start application 
    deps: ['app/bootstrap'] 
}); 

應用程序/ app.js，

define([ 
    'angular', 
    'angular-route', 
    'jquery' 
], function (ng,ngRoute,$) { 
    'use strict'; 
    console.log($('h1').length); 

    return ng.module('app', ['ngRoute']). 
     config(['$routeProvider', function($routeProvider) { 

      $routeProvider.when('/home', { 
       templateUrl: 'view/home.html', 
       controller: 'HomeCtrl', 
       controllerUrl: 'app/home' 
      }); 

      $routeProvider.when('/view1', { 
       templateUrl: 'view/view1.html', 
       controller: 'View1Ctrl', 
       controllerUrl: 'app/view' 
      }); 

      //$routeProvider.otherwise({redirectTo: '/home'}); 
    }]); 
}); 

應用程序/ home.js，

define(['app/app'], function (app) { 
    app.controller('HomeCtrl', function ($scope) { 
     $scope.message = "Message from HomeCtrl"; 
    }); 
}); 

誤差，

Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined 

但如果我Concat的該控制器ng.module('app', ['ngRoute']).config(...)那麼他們正常工作後，

應用程序/ app.js，

define([ 
    'angular', 
    'angular-route', 
    'jquery' 
], function (ng,ngRoute,$) { 
    'use strict'; 
    console.log($('h1').length); 

    return ng.module('app', ['ngRoute']). 
     config(['$routeProvider', function($routeProvider) { 

      $routeProvider.when('/home', { 
       templateUrl: 'view/home.html', 
       controller: 'HomeCtrl', 
       //controllerUrl: 'app/home' 
      }); 

      $routeProvider.when('/view1', { 
       templateUrl: 'view/view1.html', 
       controller: 'View1Ctrl', 
       //controllerUrl: 'app/view' 
      }); 

      //$routeProvider.otherwise({redirectTo: '/home'}); 
    }]).controller('HomeCtrl', function ($scope) { 
     $scope.message = "Message from HomeCtrl"; 
    }).controller('View1Ctrl', function ($scope) { 
     $scope.message = "Message from View1Ctrl"; 
    }); 
}); 

爲什麼？

Answer 1

這似乎是您的JS文件的加載順序的問題。您正在app/home.js中定義HomeCtrl並將其用於app/app.js。所以請確保home.js在您的web應用中在 app.js之前加載。

將app.js分成兩部分 - 一部分用於創建ng.module（module.js），另一部分用於設置config（module-config.js）。那麼依賴關係樹將爲：

app/module-config.js 
    requires: app/home.js 
     requires: app/module.js