Web API and AngularJS Services

Introduction

AngularJS provides services as objects that solve particular problems. The library provides many built-in services you can use directly in your code but you can also create your own services. In fact, most of the time, you will combine built-in and custom services to solve problems. As always, you have many options.

Practical LearningPractical Learning: Adding a Property to an Interface

  1. Start Microsoft Visual Studio
  2. On the main menu, click File -> New -> Project...
  3. In the New Project dialog box, make sure ASP.NET Web Application (.NET Framework) is selected in the middle list.
    Change the Name of the project to JustInPay2
  4. Click OK
  5. In the New ASP.NET Web Application dialog box, click the Web API icon and click OK
  6. In the Solution Explorer, right-click ChairExecs8 and click Manage NuGet Packages...
  7. Click the Browser button.
    Do a search on AngularJS
  8. In the list, click AngularJS.Route
  9. In the middle-right frame, click Install. If a dialog box comes up, read it and click OK
  10. In the Solution Explorer, right-click Content -> Add -> Style Sheet
  11. Type JustInPay as the name of the file
  12. Click Add
  13. Change the document as follows: 
    body {
    background-color: #FFF;
}

.bold          { font-weight:  bold;   }
.maroon        { color:        maroon; }
.medium        { width:        125px;  }
.x-large       { width:        350px;  }
.top-alignment { padding-top:  7px;    }
.empl-contents { margin:       auto;
                 width:        500px;  }
.form-control  { border-color: maroon; }
.common-font   {
    font-family: Georgia, Garamond, 'Times New Roman', serif; }
  14. If you are using Microsoft SQL Server for your database
    1. Start Microsoft SQL Server and login/connect to the database
    2. In the Object Explorer, right-click the computer name and click New Query
    3. Type the following code: 
      USE master;
GO
CREATE DATABASE JustInPay;
GO
USE JustInPay;
GO
    4. To execute, right-click inside the Code Editor and click Execute
    5. Click inside the Code Editor, press Ctrl + A to select everything, and press Delete
  15. If you are using a local database
    1. In the Solution Explorer of Microsoft Visual Studio, right-click App_Data -> Add -> New Item...
    2. In the left frame of the Add New Item dialog box, click Data. In the middle frame, click SQL Server Database. Change the database Name to JustInPay
    3. Click Add
    4. In the Solution Explorer, under App_Data, right-click JustInPay.mdf and click Open
    5. In the Server Explorer, right-click JustInPay.mdf and click New Query
  16. In both cases (the Query window in either Microsoft SQL Server or Microsoft Visual Studio), type the following code: 
    CREATE SCHEMA HumanResources;
GO
CREATE SCHEMA Accounting;
GO

CREATE TABLE HumanResources.Employees
(
	  EmployeeID INT IDENTITY(1, 1),
	  EmployeeNumber NVARCHAR(20),
	  FirstName NVARCHAR(20),
    LastName NVARCHAR(20),
	  [Address]  NVARCHAR(40),
	  City  NVARCHAR(40),
    County  NVARCHAR(50),
	  [State] NVARCHAR(5),
    ZIPCode NVARCHAR(12),
	  HourlySalary  NVARCHAR(10),
    MaritalStatus NVARCHAR(20), 
    Exemptions NVARCHAR(10),
    FilingStatus NVARCHAR(25)
	  CONSTRAINT PK_Employees PRIMARY KEY(EmployeeID)
);
GO
CREATE TABLE Accounting.TimeSheets
(
	  TimeSheetID	  INT IDENTITY(1, 1),
	  EmployeeID	  INT,
    StartDate		  NVARCHAR(40),
    Week1Monday	  NVARCHAR(10),
    Week1Tuesday	  NVARCHAR(10),
    Week1Wednesday  NVARCHAR(10),
    Week1Thursday   NVARCHAR(10),
    Week1Friday     NVARCHAR(10),
    Week1Saturday   NVARCHAR(10),
    Week1Sunday     NVARCHAR(10),
    Week2Monday     NVARCHAR(10),
    Week2Tuesday    NVARCHAR(10),
    Week2Wednesday  NVARCHAR(10),
    Week2Thursday   NVARCHAR(10),
    Week2Friday     NVARCHAR(10),
    Week2Saturday   NVARCHAR(10),
    Week2Sunday     NVARCHAR(10),
	  CONSTRAINT PK_TimeSheets PRIMARY KEY(TimeSheetID),
	  CONSTRAINT FK_Employees FOREIGN KEY(EmployeeID) REFERENCES HumanResources.Employees(EmployeeID)
);
GO
CREATE TABLE Accounting.Payrolls
(
	  PayrollID                INT IDENTITY(1, 1),
	  TimeSheetID              INT,
    PayDate                  NVARCHAR(40),
    RegularTime              NVARCHAR(10),
    Overtime                 NVARCHAR(10),
    RegularPay               NVARCHAR(10),
    OvertimePay              NVARCHAR(10),
    GrossSalary              NVARCHAR(10),
    TaxableGrossWagesCurrent NVARCHAR(10),
    AllowancesCurrent        NVARCHAR(10),
    FederalIncomeTaxCurrent  NVARCHAR(10),
    SocialSecurityTaxCurrent NVARCHAR(10),
    StateIncomeTaxCurrent    NVARCHAR(10),
    TaxableGrossWagesYTD     NVARCHAR(10),
    AllowancesYTD            NVARCHAR(10),
    FederalIncomeTaxYTD      NVARCHAR(10),
    SocialSecurityTaxYTD     NVARCHAR(10),
    MedicareTaxYTD           NVARCHAR(10),
    StateIncomeTaxYTD        NVARCHAR(10),
	  CONSTRAINT PK_Payrolls   PRIMARY KEY(PayrollID),
	  CONSTRAINT FK_TimeSheets FOREIGN KEY(TimeSheetID) REFERENCES Accounting.TimeSheets(TimeSheetID)
);
GO
  17. To execute the code and create the tables, right-click inside the Query window and click Execute
  18. Close the Query window
  19. When asked whether you want to save, click No
  20. In the Solution Explorer, right-click Models -> Add -> New Item...
  21. In the left frame of the Add New Item dialog box, click Web and, in the middle frame, click ADO.NET Entity Data Model
  22. Change the model Name to PaySystemModel
  23. Click Add
  24. In the first page of the Entity Data Model Wizard, click EF Designer From Database

    Entity Data Model Wizard

    Click Next
  25. Click Next
  26. In the second page of the Entity Data Model Wizard
    • If you created your database in Microsoft SQL Server, click the New Connection button. In the Connection Properties dialog box, click the Change button, click Microsoft SQL Server, and click OK. In the Server Name text, type the name of the server or type (local). In the Select Or Enter A Database Name combo box, select JustInPay. Click OK.
    • If you created a local database in Microsoft Visual Studio, make sure the top text box displays JustInPay.mdf
  27. Click Next
  28. In the third page of the Entity Data Model Wizard, click the Tables check box

    Entity Data Model Wizard

  29. Click Finish

    Just-In-Pay: Form Design

  30. On the main menu, click Build -> Build SolutionIf the Security Warning message box comes up, read it and click OK
  31. In the Solution Explorer, right-click JustInPay2 -> Add -> New Folder
  32. Type PaySystemControllers
  33. In the Solution Explorer, right-click PaySystemControllers -> Add -> New Scaffolded Item...
  34. In the left frame of the Add Scaffold dialog box, click Web API
  35. In the middle frame of the dialog box, click Web API 2 Controller With Actions, Using Entity Framework

    Add Scaffold

  36. Click Add
  37. Click the arrow of the Model Class combo box and select Employee (JustInPay2.Models)
  38. Click the arrow of the Data Context Class and select JustInPayEntities (JustInPay2.Models)

    Add Controller

  39. Click Add
  40. In the Solution Explorer, right-click PaySystemControllers -> Add -> Controller...
  41. In the Add Scaffold dialog box, click Web API 2 Controller With Actions, Using Entity Framework
  42. Click Add
  43. In the Model Class combo box, select TimeSheet (JustInPay2.Models)
  44. In the Data Context Class combo box, make sure JustInPayEntities (JustInPay2.Models) is selected and click Add
  45. In the Solution Explorer, right-click PaySystemControllers -> Add -> Controller...
  46. In the Add Scaffold dialog box, make sure Web API 2 Controller With Actions, Using Entity Framework is select.
    Click Add
  47. In the Model Class combo box, select Payroll (JustInPay2.Models)
  48. In the Data Context Class combo box, make sure JustInPayEntities (JustInPay2.Models) is selected and click Add
  49. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
  50. Type JustInPay
  51. Click OK
  52. In the empty document, type the following line: 
    var appPayrollSystem = angular.module("payrollSystem", ["ngRoute"]);
  53. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
  54. Type EmployeesController
  55. Click OK
  56. In the empty document, type the following code: 
    appPayrollSystem.controller("EmployeesController", ["$scope", "$http", function ($scope, $http) {
    $scope.saveEmployeeRecord = function () {
        var employee = {
            EmployeeNumber: $scope.emplNbr,
            FirstName: $scope.fName,
            LastName: $scope.lName,
            Address: $scope.adrs,
            City: $scope.city,
            County: $scope.county,
            State: $scope.state,
            ZIPCode: $scope.zip,
            HourlySalary: $scope.hSalary,
            Exemptions: $scope.exemptions,
            MaritalStatus: $scope.mStatus,
            FilingStatus: $scope.fStatus
        };

        var connection = {
            method: 'POST',
            url: '/api/Employees',
            data: employee
        };

        $http(connection).
            then(function (response) {
                $scope.employees.push(response.data);
            },
            function (response) {
                $scope.error = "Something went wrong";
            });

        // After creating and saving the record, reset the form
        this.emplNbr = "";
        this.fName = "";
        this.lName = "";
        this.adrs = "";
        this.city = "";
        this.county = "";
        this.state = "";
        this.zip = "";
        this.hSalary = 0.00;
        this.exemptions = 0;
        this.mStatus = "";
        this.fStatus = "";
    }

    $http({
        method: 'GET',
        url: '/api/Employees'
    }).
        then(function (response) {
            $scope.employees = response.data;
        },
        function (response) {
            $scope.error = "Something went wrong";
        }
    );
}]);
  57. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  58. In the middle frame of the Add Scaffold dialog box, click MVC 5 Controller - Empty
  59. Click Add
  60. Type Employees to get EmployeesController
  61. Click Add
  62. In the class, add an ActionResult method named Create as follows: 
    using System.Web.Mvc;

namespace JustInPay2.Controllers
{
    public class EmployeesController : Controller
    {
        // GET: Employees
        public ActionResult Index()
        {
            return View();
        }

        // POST: Employees/Create
        public ActionResult Create()
        {
            return View();
        }
    }
}
  63. In the document, right-click Index() and click Add View...
  64. In the Add View dialog box, make sure the View Name text box displays Index. Click Add
  65. Change the document as follows: 
    @{
    ViewBag.Title = "Employees";
}

<h2 class="common-font text-center bold maroon">Employees</h2>

@Scripts.Render("~/bundles/jquery")

<div class="common-font" ng-app="payrollSystem">
    <table class="table table-striped" ng-controller="EmployeesController">
        <tr class="bold">
            <td>Employee ID</td>
            <td>Employee #</td>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Address</td>
            <td>City</td>
            <td>County</td>
            <td>State</td>
            <td>ZIP Code</td>
            <td>Marital Status</td>
            <td>Filing Status</td>
            <td>Exemptions</td>
            <td>Hourly Salary</td>
        </tr>
        <tr ng-repeat="staff in employees">
            <td><span ng-bind="staff.EmployeeID"></span></td>
            <td><span ng-bind="staff.EmployeeNumber"></span></td>
            <td><span ng-bind="staff.FirstName"></span></td>
            <td><span ng-bind="staff.LastName"></span></td>
            <td><span ng-bind="staff.Address"></span></td>
            <td><span ng-bind="staff.City"></span></td>
            <td><span ng-bind="staff.County"></span></td>
            <td><span ng-bind="staff.State"></span></td>
            <td><span ng-bind="staff.ZIPCode"></span></td>
            <td><span ng-bind="staff.MaritalStatus"></span></td>
            <td><span ng-bind="staff.FilingStatus"></span></td>
            <td><span ng-bind="staff.Exemptions"></span></td>
            <td><span ng-bind="staff.HourlySalary"></span></td>
        </tr>
    </table>
</div>
<hr />
<p class="text-center common-font">@Html.ActionLink("New Employee", "Create")</p>
  66. In the Solution Explorer, under Controllers, double-click EmployeesController.cs to access the file
  67. In the document, right-click Create() and click Add View...
  68. In the Add View dialog box, make sure the View Name text box displays Create. Click Add
  69. Change the document as follows: 
    @{
    ViewBag.Title = "Just-In Pay - New Employee";
}

<h2 class="common-font text-center bold maroon">Just-In Pay - New Employee</h2>

@Scripts.Render("~/bundles/jquery")

<hr />
<div class="empl-contents" ng-app="payrollSystem">
    <form name="EmploymentApplication" method="post" ng-controller="EmployeesController">
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="emplNumber" class="top-alignment">Employee #:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="emplNumber" class="form-control medium" ng-model="emplNbr" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="firstName" class="top-alignment">First Name:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="firstName" class="form-control medium" ng-model="fName" />
            </div>
            <div class="col-md-3 text-right">
                <label for="lastName" class="top-alignment">Last Name:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="lastName" class="form-control medium" ng-model="lName" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="address" class="top-alignment">Address:</label>
            </div>
            <div class="col-md-9">
                <input type="text" id="address" class="form-control x-large" ng-model="adrs" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="city" class="top-alignment">City:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="city" class="form-control medium" ng-model="city" />
            </div>
            <div class="col-md-3 text-right">
                <label for="state" class="top-alignment">State:</label>
            </div>
            <div class="col-md-3">
                <select id="state" class="form-control medium" ng-model="state">
                    <option value="DC">DC</option>
                    <option value="MD">MD</option>
                    <option value="PA">PA</option>
                    <option value="VA">VA</option>
                    <option value="WV">WV</option>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="county" class="top-alignment">County:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="county" class="form-control medium" ng-model="county" />

            </div>
            <div class="col-md-3 text-right">
                <label for="zip" class="top-alignment">ZIP Code</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="zip" class="form-control medium" ng-model="zip" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="hSalary" class="top-alignment">Hourly Salary:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="hSalary" class="form-control medium" ng-model="hSalary" />
            </div>
            <div class="col-md-3 text-right">
                <label for="exemptions" class="top-alignment">Exemptions:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="exemptions" class="form-control medium" ng-model="exemptions" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="mStatus" class="top-alignment">Marital Status:</label>
            </div>
            <div class="col-md-3">
                <select name="mStatus" class="form-control medium" ng-model="mStatus">
                    <option value="Single">Single</option>
                    <option value="Married">Married</option>
                </select>
            </div>
            <div class="col-md-3 text-right">
                <label for="fStatus" class="top-alignment">Filing Status:</label>
            </div>
            <div class="col-md-3">
                <select name="fStatus" class="form-control medium" ng-model="fStatus">
                    <option value="Unknown">Any/Unknown</option>
                    <option value="Single">Single</option>
                    <option value="HeadOfHousehold">Head of Household</option>
                    <option value="MarriedFilingJointly">Married Filing Jointly</option>
                    <option value="MarriedFilingSeparately">Married Filing Separately</option>
                </select>
            </div>
        </div>
        <hr />
        <p class="text-center"><input type="button" value="Save Employee Record" class="btn btn-primary" ng-click="saveEmployeeRecord()" /></p>
    </form>
</div>
<hr />
<p class="text-center common-font">@Html.ActionLink("Employees", "Index")</p>
  70. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
  71. Type TimeSheetsController
  72. Click OK
  73. In the empty document, type the following code: 
    appPayrollSystem.controller("TimeSheetsController", ["$scope", "$http", function ($scope, $http) {
    $scope.saveEmployeeRecord = function () {
        var employee = {
            EmployeeNumber: $scope.emplNbr,
            FirstName: $scope.fName,
            LastName: $scope.lName,
            Address: $scope.adrs,
            City: $scope.city,
            County: $scope.county,
            State: $scope.state,
            ZIPCode: $scope.zip,
            HourlySalary: $scope.hSalary,
            Exemptions: $scope.exemptions,
            MaritalStatus: $scope.mStatus,
            FilingStatus: $scope.fStatus
        };

        var connection = {
            method: 'POST',
            url: '/api/Employees',
            data: employee
        };

        $http(connection).
            then(function (response) {
                $scope.employees.push(response.data);
            },
            function (response) {
                $scope.error = "Something went wrong";
            });

        // After creating and saving the record, reset the form
        this.emplNbr = "";
        this.fName = "";
        this.lName = "";
        this.adrs = "";
        this.city = "";
        this.county = "";
        this.state = "";
        this.zip = "";
        this.hSalary = 0.00;
        this.exemptions = 0;
        this.mStatus = "";
        this.fStatus = "";
    }

}]);
  74. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  75. In the middle frame of the Add Scaffold dialog box, click MVC 5 Controller - Empty
  76. Click Add
  77. Type TimeSheets to get TimeSheetsController
  78. Click Add
  79. In the class, add an ActionResult method named Create as follows: 
    using System.Web.Mvc;

namespace JustInPay2.Controllers
{
    public class TimeSheetsController : Controller
    {
        // GET: TimeSheets
        public ActionResult Index()
        {
            return View();
        }

        // POST: TimeSheets/Create
        public ActionResult Create()
        {
            return View();
        }
    }
}
  80. In the document, right-click Index() and click Add View...
  81. In the Add View dialog box, make sure the View Name text box displays Index. Click Add
  82. Change the document as follows: 
    @{
    ViewBag.Title = "Employees";
}

<h2 class="common-font text-center bold maroon">Employees</h2>

@Scripts.Render("~/bundles/jquery")

<div class="common-font" ng-app="payrollSystem">
    <table class="table table-striped" ng-controller="EmployeesController">
        <tr class="bold">
            <td>Employee ID</td>
            <td>Employee #</td>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Address</td>
            <td>City</td>
            <td>County</td>
            <td>State</td>
            <td>ZIP Code</td>
            <td>Marital Status</td>
            <td>Filing Status</td>
            <td>Exemptions</td>
            <td>Hourly Salary</td>
        </tr>
        <tr ng-repeat="staff in employees">
            <td><span ng-bind="staff.EmployeeID"></span></td>
            <td><span ng-bind="staff.EmployeeNumber"></span></td>
            <td><span ng-bind="staff.FirstName"></span></td>
            <td><span ng-bind="staff.LastName"></span></td>
            <td><span ng-bind="staff.Address"></span></td>
            <td><span ng-bind="staff.City"></span></td>
            <td><span ng-bind="staff.County"></span></td>
            <td><span ng-bind="staff.State"></span></td>
            <td><span ng-bind="staff.ZIPCode"></span></td>
            <td><span ng-bind="staff.MaritalStatus"></span></td>
            <td><span ng-bind="staff.FilingStatus"></span></td>
            <td><span ng-bind="staff.Exemptions"></span></td>
            <td><span ng-bind="staff.HourlySalary"></span></td>
        </tr>
    </table>
</div>
<hr />
<p class="text-center common-font">@Html.ActionLink("New Employee", "Create")</p>
  83. In the Solution Explorer, under Controllers, double-click TimeSheetsController.cs to access the file
  84. In the document, right-click Create() and click Add View...
  85. In the Add View dialog box, make sure the View Name text box displays Create. Click Add
  86. Change the document as follows: 
    @{
    ViewBag.Title = "Just-In Pay - New Employee";
}

<h2 class="common-font text-center bold maroon">Just-In Pay - New Employee</h2>

@Scripts.Render("~/bundles/jquery")

<hr />
<div class="empl-contents" ng-app="payrollSystem">
    <form name="EmploymentApplication" method="post" ng-controller="EmployeesController">
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="emplNumber" class="top-alignment">Employee #:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="emplNumber" class="form-control medium" ng-model="emplNbr" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="firstName" class="top-alignment">First Name:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="firstName" class="form-control medium" ng-model="fName" />
            </div>
            <div class="col-md-3 text-right">
                <label for="lastName" class="top-alignment">Last Name:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="lastName" class="form-control medium" ng-model="lName" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="address" class="top-alignment">Address:</label>
            </div>
            <div class="col-md-9">
                <input type="text" id="address" class="form-control x-large" ng-model="adrs" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="city" class="top-alignment">City:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="city" class="form-control medium" ng-model="city" />
            </div>
            <div class="col-md-3 text-right">
                <label for="state" class="top-alignment">State:</label>
            </div>
            <div class="col-md-3">
                <select id="state" class="form-control medium" ng-model="state">
                    <option value="DC">DC</option>
                    <option value="MD">MD</option>
                    <option value="PA">PA</option>
                    <option value="VA">VA</option>
                    <option value="WV">WV</option>
                </select>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="county" class="top-alignment">County:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="county" class="form-control medium" ng-model="county" />

            </div>
            <div class="col-md-3 text-right">
                <label for="zip" class="top-alignment">ZIP Code</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="zip" class="form-control medium" ng-model="zip" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="hSalary" class="top-alignment">Hourly Salary:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="hSalary" class="form-control medium" ng-model="hSalary" />
            </div>
            <div class="col-md-3 text-right">
                <label for="exemptions" class="top-alignment">Exemptions:</label>
            </div>
            <div class="col-md-3">
                <input type="text" id="exemptions" class="form-control medium" ng-model="exemptions" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-3 text-right">
                <label for="mStatus" class="top-alignment">Marital Status:</label>
            </div>
            <div class="col-md-3">
                <select name="mStatus" class="form-control medium" ng-model="mStatus">
                    <option value="Single">Single</option>
                    <option value="Married">Married</option>
                </select>
            </div>
            <div class="col-md-3 text-right">
                <label for="fStatus" class="top-alignment">Filing Status:</label>
            </div>
            <div class="col-md-3">
                <select name="fStatus" class="form-control medium" ng-model="fStatus">
                    <option value="Unknown">Any/Unknown</option>
                    <option value="Single">Single</option>
                    <option value="HeadOfHousehold">Head of Household</option>
                    <option value="MarriedFilingJointly">Married Filing Jointly</option>
                    <option value="MarriedFilingSeparately">Married Filing Separately</option>
                </select>
            </div>
        </div>
        <hr />
        <p class="text-center"><input type="button" value="Save Employee Record" class="btn btn-primary" ng-click="saveEmployeeRecord()" /></p>
    </form>
</div>
<hr />
<p class="text-center common-font">@Html.ActionLink("Employees", "Index")</p>
  87. In the Solution Explorer, expand App_Start and double-click BundleConfig.cs
  88. Change the document as follows: 
    using System.Web.Optimization;

namespace JustInPay2
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/angular.js",
                        "~/Scripts/angular-route.js",
                        "~/Scripts/JustInPay.js",
                        "~/Scripts/EmployeesController.js",
                        "~/Scripts/TimeSheetsController.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/JustInPay.css"));
        }
    }
}

Introduction to Creating and Using a Service

As you may know already, AngularJS supports various types of services. The creation of the service can be done by calling the necessary method on a module variable. You can also attach the creation of a service on the method that creates a module or other component.

One of the techniques to create a service is to call the value() method. Its service can contain a value or an object. If you want a service that can contain values, objects, functions, or arrays, call the service() method. That service is created as a function that plays the role of a constructor of an object. In the body of that constructor, you can create all types of values, objects, arrays, or nested functions. This makes a service()-based service the perfect place to perform various types of opetations for your AngularJS project.

The service() method takes two arguments. The first argument is the name of the service. To apply the service, you will pass that name as one of the arguments of a controller. That is, you will "inject" the service to a controller that would simply benefit from that arduous work from a service. The second argument of the service() method is the function that will contain the whole service.

Practical LearningPractical Learning: Creating and Using a Service

  1. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
  2. Type TimeSheetsController as the name of the file
  3. Press Enter
  4. In the empty document, type: 
    5. 
  
  5. In the Solution Explorer, right-click Controllers -> Add -> Controller...
    6. 
  
  6. In the middle frame of the Add Scaffold dialog box, make sure MVC 5 Controller - Empty is selected
    
      Click Add
    7. 
  
  7. Type TimeSheets to get TimeSheetsController
    8. 
  
  8. Click Add
    9. 
  
  9. In the class, add an ActionResult method named Create as follows:


    using System.Web.Mvc;

namespace JustInPay27.Controllers
{
    public class TimeSheetsController : Controller
    {
        // GET: TimeSheets
        public ActionResult Index()
        {
            return View();
        }

        // POST: TimeSheets/Create
        public ActionResult Create()
        {
            return View();
        }
    }
}
    10. 
  
  10. In the document, right-click Create() and click Add View...
    11. 
  
  11. In the Add View dialog box, make sure the View Name text box displays Create
    
  
  12. Click OK
    13. 
  
  13. Change the document as follows:
    

    function createCustomerOrder($scope, $http, customerOrderService) {
    $scope.firstCategories = customerOrderService.basicTypes;
    $scope.secondCategories = customerOrderService.intermediateTypes;
    $scope.thirdCategories = customerOrderService.advancedTypes;

    $scope.processOrder = function () {
        var qty1 = Number($scope.type1Quantity || 0);
        var qty2 = Number($scope.type2Quantity || 0);
        var qty3 = Number($scope.type3Quantity || 0);

        var chair1 = customerOrderService.getValues($scope.type1Name);
        var chair2 = customerOrderService.getValues($scope.type2Name);
        var chair3 = customerOrderService.getValues($scope.type3Name);
        $scope.type1UnitWeight = chair1[0];
        $scope.type1UnitPrice  = chair1[1];
        $scope.type2UnitWeight = chair2[0];
        $scope.type2UnitPrice  = chair2[1];
        $scope.type3UnitWeight = chair3[0];
        $scope.type3UnitPrice  = chair3[1];

        $scope.type1TotalWeight = customerOrderService.multiply($scope.type1UnitWeight, qty1);
        $scope.type2TotalWeight = customerOrderService.multiply($scope.type2UnitWeight, qty2);
        $scope.type3TotalWeight = customerOrderService.multiply($scope.type3UnitWeight, qty3);
        $scope.type1SubTotal    = customerOrderService.multiply($scope.type1UnitPrice, qty1);
        $scope.type2SubTotal    = customerOrderService.multiply($scope.type2UnitPrice, qty2);
        $scope.type3SubTotal    = customerOrderService.multiply($scope.type3UnitPrice, qty3);

        var invoiceValues = customerOrderService.evaluateInvoice($scope.type1TotalWeight, $scope.type1SubTotal,
                                             $scope.type2TotalWeight, $scope.type2SubTotal,
                                             $scope.type3TotalWeight, $scope.type3SubTotal);

        $scope.totalWeight = invoiceValues[0];
        $scope.subTotal = invoiceValues[1];
        $scope.discountRate = invoiceValues[2];
        $scope.discountAmount = invoiceValues[3];
        $scope.shippingAndHandling = invoiceValues[4];
        $scope.orderTotal = invoiceValues[5];
    }

    function resetForm() {
        $scope.type1Name           = "";
        $scope.type1UnitWeight     = 0;
        $scope.type1UnitPrice      = 0.00;
        $scope.type1Quantity       = 0;
        $scope.type1TotalWeight    = 0;
        $scope.type1SubTotal       = 0.00;
        $scope.type2Name           = "";
        $scope.type2UnitWeight     = 0;
        $scope.type2UnitPrice      = 0.00;
        $scope.type2Quantity       = 0;
        $scope.type2TotalWeight    = 0;
        $scope.type2SubTotal       = 0.00;
        $scope.type3Name           = "";
        $scope.type3UnitWeight     = 0;
        $scope.type3UnitPrice      = 0.00;
        $scope.type3Quantity       = 0;
        $scope.type3TotalWeight    = 0;
        $scope.type3SubTotal       = 0;
        $scope.totalWeight         = 0;
        $scope.subTotal            = 0.00;
        $scope.discountRate        = 0.00;
        $scope.discountAmount      = 0.00;
        $scope.shippingAndHandling = 0.00;
        $scope.orderTotal          = 0.00;
    }

    $scope.saveCustomerOrder = function () {
        var custOrder = {
            Type1Name           : $scope.type1Name,
            Type1UnitWeight     : $scope.type1UnitWeight,
            Type1UnitPrice      : $scope.type1UnitPrice,
            Type1Quantity       : $scope.type1Quantity,
            Type1TotalWeight    : $scope.type1TotalWeight,
            Type1SubTotal       : $scope.type1SubTotal,
            Type2Name           : $scope.type2Name,
            Type2UnitWeight     : $scope.type2UnitWeight,
            Type2UnitPrice      : $scope.type2UnitPrice,
            Type2Quantity       : $scope.type2Quantity,
            Type2TotalWeight    : $scope.type2TotalWeight,
            Type2SubTotal       : $scope.type2SubTotal,
            Type3Name           : $scope.type3Name,
            Type3UnitWeight     : $scope.type3UnitWeight,
            Type3UnitPrice      : $scope.type3UnitPrice,
            Type3Quantity       : $scope.type3Quantity,
            Type3TotalWeight    : $scope.type3TotalWeight,
            Type3SubTotal       : $scope.type3SubTotal,
            TotalWeight         : $scope.totalWeight,
            SubTotal            : $scope.subTotal,
            DiscountRate        : $scope.discountRate,
            DiscountAmount      : $scope.discountAmount,
            ShippingAndHandling : $scope.shippingAndHandling,
            OrderTotal          : $scope.orderTotal	};
        	
        $http.post("../api/CustomerOrders", custOrder).
            then(function (response) {
                $scope.CustomerOrders.push(response.data);
            }, function (response) {
                response.errorMessage = "For some strange reason, the record was not saved...";
            });

        resetForm();
    }
}

appBusiness.controller("CustomerOrderController", ['$scope', '$http', 'customerOrderService', createCustomerOrder ]);
    14. 
  
  14. In the Solution Explorer, under CustomersOrders, double-click PostCustomerOrder.html to access it
    15. 
  
  15. Change the document as follows:


    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chair Executives - New Customer Order</title>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../Content/ChairExecs.css" rel="stylesheet" />
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ChairExecs.js"></script>
<script src="../Scripts/CustomersOrdersController.js"></script>
<script src="../Scripts/CustomerOrderService.js"></script>
</head>
<body ng-app="chairExecs">
    <div class="controls-contents serif-font" ng-controller="CustomerOrderController">
        <h2 class="text-center serif-font bold">Chair Executives - New Customer Order</h2>

        <form name="CustomerOrder" method="post">
            <table class="table table-striped">
                <tr>
                    <td class="large heading bold text-center" style="border-right: 3px solid silver">Item Definition</td>
                    <td class="heading bold text-center">Sale Description</td>
                </tr>
            </table>
            <table class="table table-bordered">
                <tr>
                    <td class="medium bold">Chair Name</td>
                    <td class="bold">Weight(Lbs)</td>
                    <td class="bold">Unit Price</td>
                    <td class="bold">Quantity</td>
                    <td class="bold">Weight(Lbs)</td>
                    <td class="bold">Sub-Total</td>
                </tr>
                <tr>
                    <td>
                        <select class="form-control" ng-model="type1Name" ng-change="processOrder()">
                            <option ng-repeat="chair in firstCategories">{{chair}}</option>
                        </select>
                    </td>
                    <td>{{type1UnitWeight}}</td>
                    <td>{{type1UnitPrice | number : 2}}</td>
                    <td><input type="number" class="form-control small" ng-model="type1Quantity" ng-change="processOrder()" /></td>
                    <td>{{type1TotalWeight}}</td>
                    <td>{{type1SubTotal | number : 2}}</td>
                </tr>
                <tr>
                    <td>
                        <select id="type2Name" class="form-control" ng-model="type2Name" ng-change="processOrder()">
                            <option ng-repeat="chair in secondCategories">{{chair}}</option>
                        </select>
                    </td>
                    <td>{{type2UnitWeight}}</td>
                    <td>{{type2UnitPrice | number : 2}}</td>
                    <td><input type="number" class="form-control small" ng-model="type2Quantity" ng-change="processOrder()" /></td>
                    <td>{{type2TotalWeight}}</td>
                    <td>{{type2SubTotal | number : 2}}</td>
                </tr>
                <tr>
                    <td>
                        <select id="type3Name" class="form-control" ng-model="type3Name" ng-change="processOrder()">
                            <option ng-repeat="chair in thirdCategories">{{chair}}</option>
                        </select>
                    </td>
                    <td>{{type3UnitWeight}}</td>
                    <td>{{type3UnitPrice | number : 2}}</td>
                    <td><input type="number" class="form-control small" ng-model="type3Quantity" ng-change="processOrder()" /></td>
                    <td>{{type3TotalWeight}}</td>
                    <td>{{type3SubTotal | number : 2}}</td>
                </tr>
            </table>
            <hr />
            <table class="table table-striped">
                <tr>
                    <td class="medium bold">Total Weight (Lbs):</td>
                    <td class="medium">{{totalWeight}}</td>
                    <td>&nbsp;</td>
                    <td class="bold">Sub-Total:</td>
                    <td>{{subTotal | number : 2}}</td>
                </tr>
                <tr>
                    <td class="bold">Discount Rate (%):</td>
                    <td>{{discountRate}}</td>
                    <td>&nbsp;</td>
                    <td class="bold">Discount Amount:</td>
                    <td>{{discountAmount | number : 2}}</td>
                </tr>
                <tr>
                    <td class="bold">Shipping &amp; Handling:</td>
                    <td>{{shippingAndHandling | number : 2}}</td>
                    <td>&nbsp;</td>
                    <td class="bold">Order Total:</td>
                    <td>{{orderTotal | number : 2}}</td>
                </tr>
            </table>

            <hr />

            <p class="text-center">
                <input type="button" name="btnSaveCustomerOrder" value="Save Customer Order"
                       class="btn btn-primary" style="width: 200px" ng-click="saveCustomerOrder()" />
            </p>
        </form>
    </div>
    <hr />
    <p class="text-center">
        <a href="GetCustomerOrders.html">View Customers Orders</a> ::
        <a href="GetCustomerOrder.html">Review a Customer Order</a> ::
        <a href="PutCustomerOrder.html">Edit a Customer's Order</a> ::
        <a href="DeleteCustomerOrder.html">Delete a Customer Order</a> :: 
        <a href="../ChairsInventory/GetChairs.html">Chairs</a>
    </p>
</body>
</html>
    16. 
  
  16. To execute the application, on the main menu, click Debug and click Start Without Debugging:
    

    Introducing Services
    17. 
  
  17. Select from the combo boxes and enter some values in the text boxes as follows:
    
    

    


    

    
  
    
    Chair Name
    Quantity
  
    
  
    
    Essential
    6
  
    
  
    
	Executive
	3
  
    

    

    
    

    Introducing Services
    18. 
  
  18. Click Save Customer Order
    19. 
  
  19. Select from the combo box and enter a quantity value as follows:
    
    

    


    

    
  
    
    Chair Name:
    Director
  
    
  
    
    Quantity:
    8
  
    

    

    20. 
  
  20. Click Save Customer Order
    21. 
  
  21. Close the browser and return to your programming environment
    22. 
  
  22. In the left list, expand Web and click Razor
    23. 
    
  
  23. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
    24. 
  
  24. Type
    25. 
  
  25. In the empty document, type the following code:


    appTicketSystem.controller('DriversController', ['$scope', function ($scope) {
    $scope.driversTitle = "Vehicles Owners / Drivers";
    $scope.driversInfo = "Here is a limited list of vehicles owners/drivers.";

    $scope.drivers = owners;
}]);
    26. 
  
  26. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
    27. 
  
  27. Type VehiclesController
    28. 
  
  28. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
    29. 
  
  29. Type ViolationsController
    30. 
  
  30. Click OK
    31. 
  
  31. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
    32. 
  
  32. Type PaymentsController
    33. 
  
  33. Click OK
    34. 
  
  34. In the empty document, type the following code:


    35. 








  
  35. In the Solution Explorer, under Views, expand Shared and double-click _Layout.cshtml
    36. 
  
  36. Type the following code:


    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Traffic Ticket System :: @ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Traffic Ticket System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Tickets Management", "TicketsManagement", "Home", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
    </div>

        <footer class="top-border container">
            <p class="text-center common-font">&copy; @DateTime.Now.Year - Traffic Ticket System</p>
        </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
    37. 
  
  37. In the Solution Explorer, right-click TicketsManagement -> Add -> HTML Page
    38. 
  
  38. Type Cameras
    39. 
  
  39. Click Add
    40. 
  
  40. Change the document as follows:


    41. 
  
  41. Click Add
    42. 
  
  42. In the Solution Explorer, right-click Controllers -> Add -> Controller...
    43. 
  
  43. In the middle frame of the Add Scaffold dialog box, click MVC 5 Controller - Empty
    44. 
  
  44. Click Add
    45. 
  
  45. Type Violations to get ViolationsController
    46. 
  
  46. Click Add
    47. 




Combining Services



An AngularJS component, such as a service, can benefit from another service. To make this happen, inject one service to another (pass one service as argument to another service). In the same way, you can pass a built-in service to a service you are creating in your project. For example, if you are creating a service and you want to access information from a webpage, you can pass a $location object to your service. If you want to perform a browser or document operation, you can pass a $window object to your service. If you want to perform one or more AJAX operations in your service, pass an $http service to it.



ApplicationPractical Learning: Combining Services



    
  
  1. We need to add some records to the database (we should have created a webpage with a form to let a user create records but this could take some time):
	
      
      
    • If you had created your database in Microsoft SQL Server Management Studio, return to it. In the Object Explorer, right-click the name of the computer and click New Query. Type the following code:


      USE ChairExecs;
GO
      
        and press Enter
      • 
      
    • If you had created your database in Microsoft Visual Studio, in the Server Explorer, right-click ChairExecsEntities and click New Query
      • 
    
    
  
    2. 
  
  2. In both cases, type the following code:


    INSERT INTO Chairs(Category, ChairName,	ProductWeight, UnitPrice)
VALUES(N'Basic',        N'Standard',     28,  54.67),
	    (N'Basic',        N'Essential',    32,  73.94),
	    (N'Basic',        N'Instructor',   36,  92.86),
	    (N'Productivist', N'Scholar',      36, 126.38),
	    (N'Productivist', N'Director',     44, 147.92),
	    (N'Productivist', N'Gallant Mode', 66, 176.63),
	    (N'Execution',    N'Executive',    78, 228.76),
	    (N'Execution',    N'Dominance',    72, 306.59),
	    (N'Execution',    N'Excel Extent', 85, 446.82);
GO
    3. 
  
  3. Right-click inside the Query window and click Execute
    4. 
  
  4. In the Solution Explorer of Microsoft Visual Studio, right-click Scripts -> Add -> JavaScript File
    5. 
  
  5. Type InventoryService
    6. 
  
  6. Click OK
    7. 
  
  7. In the empty document, type the following code:
    

    // In the constructor of our service, pass the AngularJS's $http service for some AJAX operations.
function workOnChairsInventory($http) {
    // This function gets the records from the Chairs table
    this.getAllChairs = function () {
        // We will produce the records as an array (an array of objects)
        var chairs = [];

        /* Use the $http service to perform an AJAX operation:
         * * Use the GET method to indicate that we want to SELECT some records
         * * Get the path of the Chairs table from the Web API controller class and use that path as URL.
         *   Since the Chairs list is in a different folder, make sure you provide a way to locate it. */
        $http({
            method: 'GET',
            url: '../api/Chairs'
        }).then(function (response) {
            // Get each Chairs record and put it in our "chairs" array variable
            for (var chair in response.data)
                chairs.push(response.data[chair]);
        }, function (response) {
        });

        // Now that we have an array of our Chairs records, return it
        return chairs;
    }

    // This function creates a list of chairs names whose Category is Basic
    this.createAListOfBasicChairs = function () {
        // We will produce the list as an array of objects.
        var basics = [];

        // Use the $http service to GET the records from the Web API controller class
        $http({
            method: 'GET',
            url: '../api/Chairs'
        }).then(function (response) {
            // If the $http service was able to find  the records, check each record.
            for (var chair in response.data) {
                // If you find out that the Category value of a record is Basic, ...
                if (response.data[chair].Category == "Basic") {
                    //. . . get the ChairName of that record and add it to our "basics" array variable.
                    basics.push(response.data[chair].ChairName);
                }
            }
        }, function (response) {
        });

        // Produce the list of records
        return basics;
    }

    // This function creates a list of chairs names whose Category is Productivist
    this.getProductivistChairs = function () {
        // We will produce the list as an array of objects.
        var products = [];
        
        $http.get('../api/Chairs').
            then(function (response) {
                for (var chair in response.data) {
                    if (response.data[chair].Category == "Productivist") {
                        products.push(response.data[chair].ChairName);
                }
            }
        }, function (response) {
        });
        
        return products;
    }

    // This function gets a list of Execution chairs
    this.produceExecutiveChairs = function () {
        // We will produce the list as an array of objects.
        var seats = [];

        $http.get('../api/Chairs').
            then(function (response) {
                for (var chair in response.data) {
                    if (response.data[chair].Category == "Execution") {
                        seats.push(response.data[chair].ChairName);
                    }
                }
            }, function (response) {
            });

        return seats;
    }
}
appBusiness.service('inventoryService', ['$http', workOnChairsInventory]);
    8. 
  
  8. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
    9. 
  
  9. type ChairsController
    10. 
  
  10. Click OK
    11. 
  
  11. In the empty document, type:


    function displayChairs($scope, inventoryService) {
    $scope.chairs = inventoryService.getAllChairs();
}

appBusiness.controller("ChairsController", ['$scope', 'inventoryService', displayChairs]);
/* var appExecutives = angular.module("appExecutives", ['chairExecs']);
 appExecutives.controller("ChairsController", ['$scope', 'inventoryService', displayChairs]); */
    12. 
  
  12. In the Solution Explorer, under ChairsInventory, double-click GetChairs.html to access it
    13. 
  
  13. Change the document as follows:


    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chair Executives - Chairs Inventory</title>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../Content/ChairExecs.css" rel="stylesheet" />
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ChairExecs.js"></script>
<script src="../Scripts/ChairsController.js"></script>
<script src="../Scripts/InventoryService.js"></script>
</head>
<body ng-app="chairExecs">
    <div class="inventory-contents" ng-controller="ChairsController">
        <h1 class="maroon serif-font text-center bold">Chair Executives</h1>
        <h2 class="blue serif-font text-center bold">Products Inventory</h2>

        <table class="table table-striped serif-font">
            <tr>
                <td class="bold">Chair ID</td>
                <td class="bold">Category</td>
                <td class="bold">Chair Name</td>
                <td class="bold">Weight</td>
                <td class="bold">Unit Price</td>
            </tr>
            <tr ng-repeat="seat in chairs">
                <td class="text-center">{{seat.ChairID}}</td>
                <td>{{seat.Category}}</td>
                <td>{{seat.ChairName}}</td>
                <td class="text-center">{{seat.ProductWeight}}</td>
                <td>{{seat.UnitPrice}}</td>
            </tr>
        </table>
    </div>
    <hr />
    <p class="text-center">
        <a href="../CustomersOrders/GetCustomerOrders.html">View Customers Orders</a> :: 
        <a href="../CustomersOrders/PostCustomerOrder.html">Process a New Customer Order</a> ::
        <a href="../CustomersOrders/GetCustomerOrder.html">Review a Customer Order</a> ::
        <a href="../CustomersOrders/PutCustomerOrder.html">Edit a Customer's Order</a> ::
        <a href="../CustomersOrders/DeleteCustomerOrder.html">Delete a Customer Order</a>
    </p>
</body>
</html>
    14. 
  
  14. To execute, on the main menu, click Debug -> Start Without Debugging


    Creating and Using AngularJS Services - Payroll System
    15. 
  
  15. Click the Employees link
    16. 
  
  16. Click the New Employee link
    17. 
  
  17. Enter the values for each of the following records and click Save Employee Record:

    


    
  
    
	Employee #
	First Name
	Last Name
	Address
	City
	County
	State
	ZIP Code
	Hourly Salary
	Marital Status
	Exemptions
	Filing Status
  
    
  
    
	941148
	Catherine
	Watts
	12004 Harrington Ave
    Baltimore
    Baltimore
    MD
    21206
    26.15
    Single
    0
    Head of Household
  
    
  
    
	927048
    Henry
    Meuer
    802 Wheeler Street
    York
    York
    PA
    17401
    12.97
    Single
    1
    Single
  
    
  
    
	606384
    Herbert
    Gibson
    10324 Marina Ave
    College Park
    Prince George
    MD
    20742
    22.25
    Married
    2
    Married Filing Jointly
  
    
  
    
	952748
    David
    Evans
    5102 Piedmont Rd
    Silver Spring
    Montgomery
    MD
    20910
    17.25
    Single
    1
    Head of Household
  
    

    18. 
  
  18. Close the browser and return to your programming environment
    19. 
  
  19. Close your programming environment
    20. 







  

    
      

    		
  

  

    Previous
    Copyright © 2018-2022, FunctionX
    Next