Question

我通过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>

Answer 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;
        }
    );
};

通过返回一个promise，您可以保证能够处理从异步请求（AJAX）返回的结果。您应该能够在视图中使用结果，如下所示：

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

（请注意，上面的HTML代码段取自此答案下面的评论）

修改

查看您的指令，它看起来不像构造表的正确方法。将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>" } });

Answer 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;
    }
    );
}

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

2 个答案: