@{
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>
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('!')
}]);
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;
});
};
});
@{
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>
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
Modul.js contains code for redirecting to child view from Index view of EmployeeInfo controller. Here EmployeeInfo is controller in which all the action methods are given
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
Modul.js contains code for redirecting to child view from Index view of EmployeeInfo controller. Here EmployeeInfo is controller in which all the action methods are given