Currently I am working WCF project.I am trying to consuming Wcf service in Anjular JavaScript by using MVC. I am getting following error when I lunch developer tools in Google Chrome. I am following this tutorial which will be found on this link http://www.c-sharpcorner.com/uploadfile/rahul4_saxena/crud-operation-in-mvc4-using-angularjs-and-wcf-rest-services/. But when I run application in Google Chrome its gives me following errors and unable to display data from database and can not perform insert update and delete operation.
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
My wcf service is working fine but AngularJS application is not working. I also added AngularJS JavaScript package in my project .This is code for Controller. The name of the controller is 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);
});
}
This is the code for Module .The name of the Module is RESTClientModule
/// <reference path="../angular.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", []);
})();
This is code for Service
/// <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;
}
});
Here is screen shot of result when I run the application.
You are using app
before you have defined and initialised it.
app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService)
You define it further down in the code:
var app;
(function () {
app = angular.module("RESTClientModule", []);
})();
You should also be declaring it without being wrapped in the function.
var app = angular.module("RESTClientModule", []);
Then you can use, after it:
app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService)
Got through the browser console and methodically address each error in turn like this.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments