Angularjs 错误使用 C# ASP.net 核心

标签: Asp.net AngularJS C#
发布时间: 2017/2/24 23:24:31
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

嗨我正在玩与 Angularjs 在 ASP.NET 核心 Web 应用是新来的 Angularjs,想要得到在 ASP.NET 中正确使用它的标准。我 app.js 如下所示

(function () {
    'use strict';
    angular.module('employeeapp', ['EmployeeService']);
})();

My controller.js looks like 

(function () {
    'use strict';
    employeeapp.controller('employeeController', function ($scope, EmployeeService) {

        EmployeeService.getEmployees()
        .then(function (response) {
            $scope.employees = response.data;
            console.log($scope.employees);
        }, function (error) {
            console.log(error);
        });
    })
})();

和我的 factory.js 看起来像

(function () {
    'use strict';


    var EmployeeService = {};
    EmployeeService.getEmployees = function () {
        return $http.get('/Home/GetDetails');
    };
    return EmployeeService;
})();

我使用的呼噜声和它看上去像我 wwwroot/lib 文件夹中创建的 apps.js 文件

!function(){"use strict";angular.module("employeeapp",["EmployeeService"])}(),function(){"use strict";employeeapp.controller("employeeController",function(a,b){b.getEmployees().then(function(b){a.employees=b.data,console.log(a.employees)},function(a){console.log(a)})})}(),function(){"use strict";var a={};return a.getEmployees=function(){return $http.get("/Home/GetDetails")},a}();

我的看法如下所示

<html ng-app="employeeapp">
@{
    ViewBag.Title = "Details";
}
<head>
</head>
<body ng-controller="employeeController">

    <table style="width: 99%; background-color:#FFFFFF; border solid 2px #6D7B8D; padding 5px;width 99%;table-layout:fixed;" cellpadding="2" cellspacing="2">

        <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
            <td width="40" align="center"><b>Employee ID</b></td>
            <td width="60" align="center"><b>Employee Code</b></td>
            <td width="100" align="center"><b>Employee First Name</b></td>
            <td width="120" align="center"><b>Employee Last Name</b></td>

        </tr>
        <tbody ng-repeat="details in EmployeeService">
            <tr>

                <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
                    <span style="color:#9F000F">
                        {{details.EmployeeId}}
                    </span>
                </td>

                <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
                    <span style="color:#9F000F">
                        {{details.EmployeeCode}}
                    </span>
                </td>

                <td valign="top" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
                    <span style="color:#9F000F">
                        {{details.FirstName}}
                    </span>
                </td>

                <td valign="top" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
                    <span style="color:#9F000F">
                        {{details.LastName}}
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

当运行我收到下面的错误。

app.js:1 Uncaught ReferenceError: employeeapp is not defined
    at app.js:1
    at app.js:1
angular.js:4587 Uncaught Error: [$injector:modulerr] Failed to instantiate module employeeapp due to:
Error: [$injector:modulerr] Failed to instantiate module EmployeeService due to:
Error: [$injector:nomod] Module 'EmployeeService' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.5/$injector/nomod?p0=EmployeeService
    at http://localhost:24842/lib/angular/angular.js:68:12
    at http://localhost:24842/lib/angular/angular.js:2070:17
    at ensure (http://localhost:24842/lib/angular/angular.js:1994:38)
    at module (http://localhost:24842/lib/angular/angular.js:2068:14)
    at http://localhost:24842/lib/angular/angular.js:4564:22
    at forEach (http://localhost:24842/lib/angular/angular.js:322:20)
    at loadModules (http://localhost:24842/lib/angular/angular.js:4548:5)
    at http://localhost:24842/lib/angular/angular.js:4565:40
    at forEach (http://localhost:24842/lib/angular/angular.js:322:20)
    at loadModules (http://localhost:24842/lib/angular/angular.js:4548:5)
http://errors.angularjs.org/1.5.5/$injector/modulerr?

希望有人能帮我了。

感谢瑞安

解决方法 1:

有没有 employeeapp 变量定义的那么 employeeapp.controller 将不工作。

将其更改为 angular.module("employeeapp").controller 的第一个错误应该消失。

关于第二个错误,您正在使用 EmployeeService 作为一个模块的两个︰

angular.module('employeeapp', ['EmployeeService']);

作为一种服务︰

employeeapp.controller('employeeController', function ($scope, EmployeeService)

但是你还没有注册它既。

更改为以下要取决于它作为一个模块︰

angular.module('employeeapp', []);

并将其注册为某厂服务︰

angular.module("employeeapp").factory('EmployeeService', function($http) {
  var EmployeeService = {};
  EmployeeService.getEmployees = function() {
    return $http.get('/Home/GetDetails');
  };
  return EmployeeService;
});

使它缩小后的工作︰

employeeapp.controller('employeeController', ['$scope', 'EmployeeService', function($scope, EmployeeService) {

  EmployeeService.getEmployees()
    .then(function(response) {
      $scope.employees = response.data;
      console.log($scope.employees);
    }, function(error) {
      console.log(error);
    });
}]);

:

angular.module("employeeapp").factory('EmployeeService', ['$http', function($http) {
  var EmployeeService = {};
  EmployeeService.getEmployees = function() {
    return $http.get('/Home/GetDetails');
  };
  return EmployeeService;
}]);
赞助商