JavaScript 运行时错误：Angular Js 中的 [$injector:modulerr]答案

【问题标题】：JavaScript runtime error: [$injector:modulerr] in Angular JsJavaScript 运行时错误：Angular Js 中的 [$injector:modulerr]
【发布时间】：2017-04-16 13:21:35
【问题描述】：

我正在通过 ui-router、Factory 和 Directive 实现逻辑，但出现错误：JavaScript 运行时错误：Angular Js 中的 [$injector:modulerr]。

Ui-Routing 工作正常。

Index.html 文件：

<html><head><title>Employee Management System</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/app/EmpRecord.js"></script>
<script src="Scripts/app/GetDataService.js"></script>
<script src="Scripts/app/EmpController.js"></script>
<script src="Scripts/app/EmpApp.js"></script></head>
<body ng-app="EmpApp">
<div class="page-header">Employee Management System
</div><div ng-include="'pageContents/menu.html'"></div>

<ui-view></ui-view></body></html>

EmpApp.js

var app = angular.module("EmpApp", ['ui.router']);
app.factory('EmpFact', ['$http', EmpFact])
    .controller('EmpController', ['$scope', 'EmpFact',EmpController])
    .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
                 .state('home', {
                     templateUrl: '/home.html'
                           })
                 .state('Add', {
                     templateUrl: '/AddEmployee.html'
                 })
                  .state('List', {

                     templateUrl: 'ListEmp.html',
                     controller: 'EmpController'
                 }
                 )

})

.directive('emp-Record', EmpRecord);

ListEmp.html：

<div><div><h3>List of Employees</h3></div>
<div EmpRecord ng-repeat="e in Employees"></div></div>

EmpController

<div><div><h3>List of Employees</h3></div>
<div EmpRecord ng-repeat="e in Employees"></div></div>

GetDataService.js

 var EmpFact = function ($http) {
 var records = {}
  $http.get('http://localhost/EmployeeApi/api/Emp')
            .then(function (response) {
                records= response.data;
            });

    return {
        GetData: function () {
            alert(records);
            return records;
        }
    }       
 }

现在所有错误都消失了，但数据没有到来。

简而言之：控制器：

var EmpController= function ($scope,EmpFact) {

$scope.Employees = EmpFact.GetData();
console.log($scope.Employees);

};

服务：

 var EmpFact = function ($http) {
var records = {}
  $http.get('http://localhost/EmployeeApi/api/Emp')
            .then(function (response) {
            records= response.data;
            });

    return {
        GetData: function () {
            alert(records);
            return records;
        }}}

Àpp.js

app.factory('EmpFact', ['$http', EmpFact])
  .controller('EmpController', ['$scope','EmpFact', EmpController])
.directive('empRecord', function () {
   return {
    template: "<tr><td>{{e.empid}}</td><td>{{e.empName}}</td><td>{{e.empEmail}}</td><td>{{e.empSalary}}</td>"
}});

HTML：

<div>
<div><h3>List of Employees</h3></div>
 <div emp-Record ng-repeat="e in Employees"></div>
</div>

【问题讨论】：

请使用angular.js 而不是angular.min.js 并提供完整错误消息。
0x800a139e - JavaScript 运行时错误：[$injector:modulerr] 无法实例化模块 EmpApp，原因是：错误：[$compile:baddir] 指令/组件名称“EmpRecord”无效。第一个字符必须是小写字母
我更新了指令的命名约定。现在我在控制器上收到错误：TypeError: Unable to get property 'GetData' of undefined or null reference
@GAURAVMAHAJAN 你确定你将服务注入控制器，不应该是.controller('EmpController', ['$scope', 'EmpFact', EmpController])，当然在控制器功能本身你也必须包含它：var EmpController = function ($scope, EmpFact) {
我现在投票结束这个问题，因为这个问题太宽泛了。您已经解决了您提出的问题，然后更改了问题，然后解决了该问题，然后再次更改了问题以提出第三个完全不同的问题。您已将问题转变为故障排除会话，这对其以后的其他人没有帮助。

标签： angularjs angular-factory

【解决方案1】：

好的，正如我在评论中建议的那样，因为错误意味着您没有将EmpFact工厂注入EmpController，正在更改

.controller('EmpController', ['$scope', EmpController])

进入：

.controller('EmpController', ['$scope', 'EmpFact', EmpController])

并将其注入控制器功能：

var EmpController = function ($scope, EmpFact) { ... };

让错误消失了，但现在你说“数据不来”。

我建议在您的工厂中进行另一个更改，而不是您当前的代码，试试这个：

var EmpFact = function ($http) {
    return {
        GetData: function () {
            // return a promise which resolve with the actual data returned from the server
            return $http.get('http://localhost/EmployeeApi/api/Emp').then(
                function (response) {
                    // return the actual results, instead of the whole response from the server
                    return response.data;
                }
            );
        }
    }
};

现在，在您的控制器中，您应该能够像这样获取数据：

var EmpController = function ($scope, EmpFact) {
    // Call the "GetData" from the factory, which return a promise with the actual results returned from the server
    EmpFact.GetData().then(
        function(data) {
             // in the resolve callback function, save the results data in 
             // any $scope property (I used "$scope.Employees" so it will be 
             // available in the view via {{ Employees | json }})
             $scope.Employees = data;
        }
    );
};

通过返回一个承诺，您可以保证能够处理从异步请求 (AJAX) 返回的结果。您应该能够像这样在视图中使用结果：

 <div emp-Record ng-repeat="e in Employees"></div>

（注意上面的 HTML sn-p 取自这个答案下面的 cmets）

编辑：

查看您的指令，它看起来不像是构建表格的正确方法。将 emp-Record 更改为 emp-record 并将其包装在 <table> 标记中以使其成为有效的 HTML：

<table>
    <tr emp-record ng-repeat="e in Employees"></tr>
</table>

在你的指令模板中确保你关闭行标签（添加</tr>）：

.directive('empRecord', function () {
    return {
        template: "<tr><td>{{e.empid}}</td><td>{{e.empName}}</td><td>{{e.empEmail}}</td><td>{{e.empSalary}}</td></tr>"
    }
});

【讨论】：

更改后我收到错误：TypeError: Unable to get property 'then' of undefined or null reference。在 EmpController (localhost:65196/Scripts/app/EmpController.js:2:5)
var EmpController = function ($scope, EmpFact) { $scope.records = EmpFact.GetData().then(function(result){return result.data}); }
@GAURAVMAHAJAN 你确定你给控制器注入了“EmpFact”吗？
@AlonEitan 你的 GetData() 方法没有做正确的事情。你可能忘记了return。
var EmpFact = function ($http) { return { GetData: function () { $http.get('localhost/EmployeeApi/api/Emp') .then(function (response) { return response.data; },函数（响应）{返回响应；}）； }}}

【解决方案2】：

感谢 Alon 的帮助，因为我是 Angular 新手，将我的 ASP.NET MVC 代码仅转换为 HTML5/Angular。

终于可以解决了。

数据服务/工厂：

 var EmpFact = function ($http) {
    return {
        GetData: function () {
            return $http.get('http://localhost/EmployeeApi/api/Emp');
        }
    }
 }

控制器：

var EmpController = function ($scope, EmpFact) {
//EmpFact.GetData() is a promise.
EmpFact.GetData().then(
    function (result) {

       $scope.Employees= result.data;
    }
    );
}

【讨论】：