Hi All,
I am trying SPA in MVC with angular for simple CRUD operation.My Index
view has two links which redirect to child view
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html ng-app="ApplicationModule">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js";></script>
<script src="~/MyScripts/DisplayAllEmployeesController.js"></script>
<script src="~/MyScripts/CreateEmployeeController.js"></script>
<script src="~/MyScripts/Module.js"></script>
<script src="~/MyScripts/Service.js"></script>
</head>
<body>
<h2>Index</h2>
<div>
<div>
<table>
<tr>
<td><a href="displayemployees"> View
Employee </a></td>
<td>|</td>
<td><a href="createemployee"> Add Employee
</a></td>
</tr>
</table>
</div>
<div>
<div ng-view></div>
</div>
</div>
</body>
</html>
Modul.js contains code for redirecting to child view. Here EmployeeInfo is
controller in which all the action methods are
given
var app = angular.module("ApplicationModule", []);
app.factory("ShareData", function () {
return { value: 0 }
});
//Defining Routing
app.config(['$routeProvider', '$locationProvider', function
($routeProvider, $locationProvider) {
$routeProvider.when('/displayemployees',
{
templateUrl: 'EmployeeInfo/DisplayAllEmployees',
controller: 'DisplayAllEmployeesController'
});
$routeProvider.when('/createemployee',
{
templateUrl: 'EmployeeInfo/CreateEmployee',
controller: 'CreateEmployeeController'
});
$routeProvider.when("/editemployee",
{
templateUrl: 'EmployeeInfo/EditEmployee',
controller: 'EditEmployeeController'
});
$routeProvider.when('/deleteemployee',
{
templateUrl: 'EmployeeInfo/DeleteEmployee',
controller: 'DeleteEmployeeController'
});
$routeProvider.otherwise(
{
redirectTo: '/'
});
// $locationProvider.html5Mode(true);
$locationProvider.html5Mode(true).hashPrefix('!')
}]);
Service.js contains code for angular service, service is used to call WEB
API for communicating with database
var app = angular.module("ApplicationModule", []);
app.service("SinglePageCRUDService", function ($http) {
//Function to Read All Employees
this.getEmployees = function () {
return $http.get("/api/EmployeeInfoes");
};
//Fundction to Read Employee based upon id
this.getEmployee = function (id) {
return $http.get("/api/EmployeeInfoes/" + id);
};
//Function to create new Employee
this.post = function (Employee) {
var request = $http({
method: "post",
url: "/api/EmployeeInfoes",
data: Employee
});
return request;
};
//Function to Edit Employee based upon id
this.put = function (id, Employee) {
var request = $http({
method: "put",
url: "/api/EmployeeInfoes/" + id,
data: Employee
});
return request;
};
//Function to Delete Employee based upon id
this.delete = function (id) {
var request = $http({
method: "delete",
url: "/api/EmployeeInfoes/" + id
});
return request;
};
});
CreateEmployeeController.js contains code for controller associated with
child view for creating new employee.
var app = angular.module("ApplicationModule", []);
app.controller('AddEmployeeController', function ($scope,
SinglePageCRUDService) {
$scope.EmpNo = 0;
//The Save scope method used to define the Employee object and
//post the Employee information to the server by making call to the
Service
$scope.save = function () {
var Employee = {
EmpNo: $scope.EmpNo,
EmpName: $scope.EmpName,
Salary: $scope.Salary,
DeptName: $scope.DeptName,
Designation: $scope.Designation
};
var promisePost = SinglePageCRUDService.post(Employee);
promisePost.then(function (pl) {
$scope.EmpNo = pl.data.EmpNo;
alert("EmpNo " + pl.data.EmpNo);
},
function (errorPl) {
$scope.error = 'failure loading Employee', errorPl;
});
};
});
CreateEmployeeController.cshtml contains view associated with above
controller
@{
ViewBag.Title = "CreateEmployee";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>New Employee</h2>
<div ng-controller="CreateEmployeeController">
<div>
<table>
<tr>
<td>EmpNo</td>
<td><input type="text" ng-model="EmpNo" /> </td>
</tr>
<tr>
<td>EmpName</td>
<td><input type="text" ng-model="EmpName" /> </td>
</tr>
<tr>
<td>Salary</td>
<td><input type="text" ng-model="Salary" /> </td>
</tr>
<tr>
<td>DeptName</td>
<td><input type="text" ng-model="DeptName" /> </td>
</tr>
<tr>
<td>Designation</td>
<td><input type="text" ng-model="Designation" />
</td>
</tr>
</table>
</div>
<input type="button" ng-click="click()" value="Click">
</div>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/db28f8bb-535f-4e8e-8221-ff2037f36b87%40googlegroups.com.
