module:
var myapp;
(function () {
myapp = angular.module('my-employees', []);
}
)();
service:
myapp.service('employeeService', function ($http)
{
this.getAllEmployees = function ()
{
return $http.get('/Home/GetAllEmployee');
}
});
controller:
myapp.controller('employee-controller', function ($scope, employeeService)
{
//Loads all Employee records when page loads
loadEmployees();
function loadEmployees()
{
var EmployeeRecords = employeeService.getAllEmployees();
EmployeeRecords.then(function (d)
{
$scope.Employees = d.data;
},
function ()
{
alert("Error occured while fetching employee list...");
});
}
});
Index:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app="my-employees" ng-controller="employee-controller">
<div class="row">
<br />
<br />
<input type="search" ng-model="search" class="form-control"/>
</div>
<table class="table table-responsive table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>SALARY</th>
<th>DEPARTMENT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in Employees|filter:search">
<td>{{x.emp_id}}</td>
<td>{{x.emp_name|uppercase}}</td>
<td>{{x.emp_salary |currency}}</td>
<td>{{x.dep_name}}</td>
</tr>
</tbody>
</table>
</div>
<script src="~/AngularJSapp/Module.js"></script>
<script src="~/AngularJSapp/Service.js"></script>
<script src="~/AngularJSapp/controller.js"></script>
