未捕获的 ReferenceError：应用程序未在 Controllers.js 中定义

Question

目前我正在工作 WCF 项目。我正在尝试使用 MVC 在 Anjular JavaScript 中使用 Wcf 服务。当我在 Google Chrome 中使用开发人员工具时出现以下错误。我正在关注本教程，该教程可在此链接http://www.c-sharpcorner.com/uploadfile/rahul4_saxena/crud-operation-in-mvc4-using-angularjs-and-wcf-rest-services/ 上找到。但是当我在谷歌浏览器中运行应用程序时，它给了我以下错误，无法显示数据库中的数据，也无法执行插入更新和删除操作。

Controllers.js:5 Uncaught ReferenceError: app is not defined
    at Controllers.js:5
Modules.js:7 Uncaught ReferenceError: angular is not defined
    at Modules.js:7
    at Modules.js:8

我的 wcf 服务工作正常，但 AngularJS 应用程序不工作。 我还在我的项目中添加了 AngularJS JavaScript 包。这是控制器的代码。控制器的名称是 CRUD_AngularJs_RESTController。

/// <reference path="../angular.min.js" />  
/// <reference path="Modules.js" />  
/// <reference path="Services.js" />  

app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService) {

$scope.OperType = 1;
//1 Mean New Entry  

GetAllRecords();
//To Get All Records  
function GetAllRecords() {
    var promiseGet = CRUD_AngularJs_RESTService.getAllStudent();
    promiseGet.then(function (pl) { $scope.Students = pl.data },
    function (errorPl) {
            $log.error('Some Error in Getting Records.', errorPl);
    });
}

//To Clear all input controls.  
function ClearModels() {
    $scope.OperType = 1;
    $scope.StudentID = "";
    $scope.Name = "";
    $scope.Email = "";
    $scope.Class = "";
    $scope.EnrollYear = "";
    $scope.City = "";
    $scope.Country = "";
}

//To Create new record and Edit an existing Record.  
$scope.save = function () {
    var Student = {
        Name: $scope.Name,
        Email: $scope.Email,
        Class: $scope.Class,
        EnrollYear: $scope.EnrollYear,
        City: $scope.City,
        Country: $scope.Country
    };
if ($scope.OperType === 1) {
    var promisePost = CRUD_AngularJs_RESTService.post(Student);
    promisePost.then(function (pl) {
        $scope.StudentID = pl.data.StudentID;
        GetAllRecords();

        ClearModels();
    }, function (err) {
            console.log("Some error Occured" + err);
        });
    } else {
        //Edit the record      
        debugger;
        Student.StudentID = $scope.StudentID;
        var promisePut = CRUD_AngularJs_RESTService.put($scope.StudentID, Student);
        promisePut.then(function (pl) {
        $scope.Message = "Student Updated Successfuly";
        GetAllRecords();
        ClearModels();
    }, function (err) {
            console.log("Some Error Occured." + err);
        });
    }
};

//To Get Student Detail on the Base of Student ID  
$scope.get = function (Student) {
    var promiseGetSingle = CRUD_AngularJs_RESTService.get(Student.StudentID);
    promiseGetSingle.then(function (pl) {
        var res = pl.data;
        $scope.StudentID = res.StudentID;
        $scope.Name = res.Name;
        $scope.Email = res.Email;
        $scope.Class = res.Class;
        $scope.EnrollYear = res.EnrollYear;
        $scope.City = res.City;
        $scope.Country = res.Country;
        $scope.OperType = 0;
    },
    function (errorPl) {
        console.log('Some Error in Getting Details', errorPl);
    });
}

这是 Module 的代码，Module 的名字是 RESTClientModule

/// <reference path="../angular.min.js" />  
var app;

(function () {
    app = angular.module("RESTClientModule", []);
})();  

这是服务代码

/// <reference path="../angular.min.js" />  
/// <reference path="Modules.js" />  

app.service("CRUD_AngularJs_RESTService", function ($http) {
//Create new record  
this.post = function (Student) {
    var request = $http({
        method: "post",
        url: "http://localhost:50028/StudentService.svc/AddNewStudent",
        data: Student
    });
    return request;
}

//Update the Record  
this.put = function (StudentID, Student) {
    debugger;
    var request = $http({
        method: "put",
        url: "http://localhost:50028/StudentService.svc/UpdateStudent",
        data: Student
    });
    return request;
}

this.getAllStudent = function () {
    return $http.get("http://localhost:50028/StudentService.svc/GetAllStudent");
};

//Get Single Records  
this.get = function (StudentID) {
    return $http.get("http://localhost:50028/StudentService.svc/GetStudentDetails/" + StudentID);
}

//Delete the Record  
this.delete = function (StudentID) {
    var request = $http({
        method: "delete",
        url: "http://localhost:50028/StudentService.svc/DeleteStudent/" + StudentID
    });
    return request;
    }
}); 

这是我运行应用程序时的结果屏幕截图。

Answer 1

您在定义和初始化之前使用app。

app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService)

您在代码中进一步定义它：

var app;

(function () {
   app = angular.module("RESTClientModule", []);
})(); 

你也应该声明它而不被包裹在函数中。

var app = angular.module("RESTClientModule", []);

那么你就可以在它之后使用了：

app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService)

通过浏览器控制台并有条不紊地依次解决每个错误。