Angularjs 控制器不工作，抛出错误（新手）答案

【问题标题】：Angularjs controller not working, throws error (newbie)Angularjs 控制器不工作，抛出错误（新手）
【发布时间】：2016-03-27 03:33:54
【问题描述】：

我正在使用 angular-seed 项目。我正在尝试从 mysql 数据库中检索数据。我需要知道如何为每个视图定义不同的控制器。例如，我有这样的结构：

js
|_modules
  |_companies
     |_controller.js
     |_data.js
|_app.js
|_base.js

我已将此路由添加到 app.js

.state('app.companies', {
    url: '/companies',
    title: 'Companies',
    templateUrl: helper.basepath('companies.html'),
    controller: 'companiesCtrl' //THIS THROWS THE ERROR BELOW
})

companies.html 在页面底部添加了脚本

<script src="app/js/modules/companies/data.js"></script>
<script src="app/js/modules/companies/controller.js"></script>

这是 controller.js 的代码（也测试了注释部分）

(function() {
    'use strict';

    angular
        .module('appname')
        .controller('companiesCtrl', companiesCtrl);

    companiesCtrl.$inject = ['$scope','companiesData','$log'];
    function companiesCtrl($scope, companiesData, $log) {
        console.log('asd'); //NEVER REACH THIS LOG
    };
});

/*var app = angular
.module('appname')
.controller('companiesCtrl', ['$scope','companiesData','$log', function($scope, companiesData, $log){
console.log('asd'); //NEVER REACH THIS LOG
$scope.companies = {};
Data.get('companies').then(function(data){
    $scope.companies = data.data;
    console.log('($scope.companies)');
});
}]);
*/

但我不断得到

错误：[ng:areq] 参数 'companiesCtrl' 不是函数，未定义

如果我在我的视图上编写 ng-controller="companiesCtrl" 也是一样。

【问题讨论】：

您可以发布您的app.js 的内容以及您的观点吗？
我认为你必须执行你的函数 (function(){ 'use strict' ..... })();
@Amir，是几个js文件的编译代码。至少 1800+ 行。你有什么特别想知道的吗？我会发布它。
我认为问题可能出在其他地方，但有人已经发布了答案，我想可能就是这样。你必须调用那个匿名函数:)
@leandronn 看看我的回答可能对你有帮助

标签： javascript html angularjs model-view-controller single-page-application

【解决方案1】：

将您的功能更改为：

(function() {    
 'use strict';

    angular
        .module('appname')
        .controller('companiesCtrl', companiesCtrl);

    companiesCtrl.$inject = ['$scope','companiesData','$log'];
    function companiesCtrl($scope, companiesData, $log) {
        console.log('asd'); //NEVER REACH THIS LOG
    };
})();// execute this function then it will work

查看this example，如果你删除() breaket，那么它会给你错误。

如果可能，然后像这样创建控制器：

angular.module('appname')
  .controller('companiesCtrl', ['$scope', function($scope) {
      console.log('asd'); //NEVER REACH THIS LOG
}]);

【讨论】：

好的，这可以工作，但仅如果我在我的 index.html 页面中声明脚本。如果我在视图 Companies.html 中声明脚本，它将不起作用。真正的问题是，我无法为不同的视图制作不同的控制器。
你在说小提琴吗？
不，关于我的代码。如果我在视图中声明脚本 controller.js 和 data.js，我会不断收到相同的错误。
@leandronn 看到我更新的答案，我认为在这一行 CompaniesCtrl.$inject = ['$scope','companiesData','$log'];它会给你错误
试过但同样的错误。我找到了解决方案并发布了它。谢谢你的一切。

【解决方案2】：

请将您的控制器更改为：

(function() {
'use strict';
   function companiesCtrl($scope, companiesData, $log) {
    console.log('asd'); //NEVER REACH THIS LOG
    };

   angular
    .module('appname')
    .controller('companiesCtrl', companiesCtrl);

     companiesCtrl.$inject = ['$scope','companiesData','$log'];

})();

【讨论】：

先定义函数还是后定义都没有关系。如果使用function fn() {}语法，则会在预处理中定义。
同意阿米尔。同样会发生。谢谢。

【解决方案3】：

问题在于脚本加载。我不得不在我的 app.js 中使用延迟加载文件代码如下：

app.js 公司路线

.state('app.companies', {
          url: '/companies',
          title: 'Companies',
          templateUrl: helper.basepath('companies.html'),
          resolve: helper.resolveFor('companiesCtrl'),
          controller: 'companiesCtrl'
      })

延迟加载代码

.constant('APP_REQUIRES', {
      scripts: {
        'modernizr':          ['vendor/modernizr/modernizr.custom.js'],
        'icons':              ['vendor/fontawesome/css/font-awesome.min.css',
                               'vendor/simple-line-icons/css/simple-line-icons.css'],
        'companiesCtrl':      ['app/js/modules/companies/data.js','app/js/modules/companies/controller.js']
      },
      modules: []
    });

【讨论】：