1.Open visual studio Click on new project select Asp.net MVC web application as shown below
2.then add controller give name as Home
3.write JsonResult method in Home controller as shown below.
public JsonResult GetPersons()
{
angularDBEntities e = new angularDBEntities();
var result = e.EmpTBs.ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
GetPersons() returns employee list,here we used entityframework to interact with database.
EmpTB is the table name
4.add one js file give name as Employee.js
var EmpApp = angular.module('EmpApp', [])--
EmpApp.factory('EmpService', ['$http', function ($http) {
var EmpService = {};
EmpService.getEmps = function () {
return $http.get('/Home/GetPersons');
};
return EmpService;
}]);
here,$http.get() calls controller method getpersons()
In AngularJS world, the services are singleton objects or functions that carry out specific tasks. It holds some business logic. Separation of concern is at the heart while designing an AngularJS application. Your controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or manipulating it.
AngularJS can manage these service objects. Wherever we want to use the service, we just have to specify its name and AngularJS auto-magically inject these objects
We saw there are two ways of defining an angularjs service. Using module.factory and module.service.
module.service( 'serviceName', function );module.factory( 'factoryName', function ); |
When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService(). This object instance becomes the service object that AngularJS registers and injects later to other services / controllers if required.
When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.
---> create angular js controller with in this scope call service bind employee list to Emps
EmpApp.controller('EmpController', function ($scope,
EmpService) {
$scope.Emps = [];
getEmps();
function getEmps() {
EmpService.getEmps()
.success(function (emps) {
$scope.Emps = emps;
console.log($scope.Emps);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log($scope.status);
});
}
});
