Angularjs Fehler bei der Verwendung mit C# ASP. NET CORE

Hallo Ich spiele derzeit mit Angularjs in einer ASP.NET Core Web Application.Ich bin neu bei Angularjs und möchte den Standard der Verwendung in ASP.NET korrekt erhalten. Mein app.js sieht wie folgt ausAngularjs Fehler bei der Verwendung mit C# ASP. NET CORE

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

und meine factory.js sieht aus wie

(function() { 
    'use strict'; 


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

ich grunzen bin mit und es schafft eine apps.js Datei in meinem wwwroot/lib Ordner das wie folgt aussieht

!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}();

Meine Ansicht sieht wie folgt aus

<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>

Beim Ausführen erhalte ich den folgenden Fehler.

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?

Ich hoffe, jemand kann mir dabei helfen.

Dank Ryan

Quelle

2016-12-17 Ryan Richard

Es gibt keine employeeapp Variable definiert ist, wird so employeeapp.controller nicht funktionieren.

Ändern Sie es zu angular.module("employeeapp").controller und der erste Fehler sollte verschwinden.

In Bezug auf den zweiten Fehler, Sie EmployeeService sowohl als Modul verwenden:

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

Und als Dienstleistung:

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

Aber Sie haben es nicht als weder registriert.

zu folgendem nicht als Modul auf sie angewiesen:

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

und registrieren Sie es als Dienst/Werk:

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

Um es nach minification funktioniert:

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

Und:

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

Quelle

2016-12-17 08:23:06 tasseKATT

Danke. Es scheint mein erstes Problem zu lösen. Jetzt wirft es diesen Fehler auf. –

Sorry, ich möchte den zweiten Fehler sagen –

@RyanRichard Sorry, ich habe den zweiten Fehler bei der Beantwortung verpasst. Wird bald aktualisiert. – tasseKATT

Angularjs Fehler bei der Verwendung mit C# ASP. NET CORE

Antwort

Verwandte Themen