A Service as a Function

Introduction

You may remember that, in computer programming, a function is a piece of code that behaves like a service, that is, it addresses an issue and/or solves a problem. Examples are displaying a message in a webpage, multiplying a number by a constant, concatenating words and/or symbols to get an expression, opening a file, etc.

In AngularJS, you can create a function that provides a service, such as performing one or more specific operations that other components can use.

Practical Learning: Introducing AngularJS Services

1. Start Microsoft Visual Studio
2. On the main menu, click File -> New -> Project...
3. In the New Project dialog box, click ASP.NET Web Application (.NET Framework). Change project Name to PayrollPreparation1
4. Click OK
5. In the New ASP.NET Web Application dialog box, click the MVC icon and click OK
6. In the Solution Explorer, right-click PayrollPreparation1 and click Manage NuGet Packages...
7. Click the Browser button.
   Do a search on AngularJS (you must be connected to the Internet)
8. In the list, click angularjs:

   

9. In the middle-right frame, click Install. If a dialog box comes up, read it and click OK
10. To create a new CSS file, in the Solution Explorer, right-click Content -> Add -> New Item...
11. In the left frame of the Add New Item dialog box, click Web and click Markup under it. In the middle frame, click Style Sheet
12. Change the file Name to PayrollPreparation
13. Click Add
14. Change the document as follows:

    body {
        background-color: white;
    }
    
    .bold       { font-weight: 600   }
    .ng-model   { width:       100px }
    .large-text { width:       120px }
    .delimiter  { margin:      auto;
                  width:       700px }
    .common-font { font-family: Georgia, Garamond, 'Times New Roman', serif; }

15. In the Solution Explorer, expand App_Start and double-click BundleConfig.cs
16. Change the document as follows:

    using System.Web.Optimization;
    
    namespace PayrollPreparation1
    {
        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"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                // 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"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css",
                          "~/Content/PayrollPreparation.css"));
            }
        }
    }

17. In the Solution Explorer, expand Contollers and double-click HomeController.cs
18. In the class, create a method named PayrollEvaluation as follows:

    using System.Web.Mvc;
    
    namespace PayrollPreparation1.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult About()
            {
                ViewBag.Message = "Your application description page.";
    
                return View();
            }
    
            public ActionResult Contact()
            {
                ViewBag.Message = "Your contact page.";
    
                return View();
            }
    
            public ActionResult PayrollEvaluation()
            {
                return View();
            }
        }
    }

19. In the class, right-click return View(); under PayrollPreparation() -> Add View...
20. In the Add View dialog box, make sure the View Name text box displays PayrollPreparation. Click Add
21. Change the document as follows:

    @{
        ViewBag.Title = "Payroll Processing";
    }
    
    @Scripts.Render("~/bundles/jquery")
    
    <div ng-app>
        <h2 class="common-font text-center bold">Payroll Processing</h2>
    
        <hr />
    
        <div class="delimiter">
            <form name="PayrollEvaluation" method="post">
                <table>
                    <tr>
                        <td class="large-text bold">Hourly Salary:</td>
                        <td colspan="5"><input type="text" class="form-control ng-model" ng-model="HourlySalary" /></td>
                    </tr>
                    <tr>
                        <td class="large-text bold">&nbsp;</td>
                        <td class="bold text-center">Monday</td>
                        <td class="bold text-center">Tuesday</td>
                        <td class="bold text-center">Wednesday</td>
                        <td class="bold text-center">Thursday</td>
                        <td class="bold text-center">Friday</td>
                    </tr>
                    <tr>
                        <td class="bold">Time Worked:</td>
                        <td><input type="text" class="form-control ng-model" ng-model="Monday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="Tuesday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="Wednesday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="Thursday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="Friday" /></td>
                    </tr>
                    <tr>
                        <td class="bold">Daily Salary:</td>
                        <td>{{HourlySalary * Monday | number: 2}}</td>
                        <td>{{HourlySalary * Tuesday | number: 2}}</td>
                        <td>{{HourlySalary * Wednesday | number: 2}}</td>
                        <td>{{HourlySalary * Thursday | number: 2}}</td>
                        <td>{{HourlySalary * Friday | number: 2}}</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td class="bold">Weekly Salary:</td>
                        <td>{{((HourlySalary * Monday) + (HourlySalary * Tuesday) + (HourlySalary * Wednesday) + (HourlySalary * Thursday) + (HourlySalary * Friday)) | number: 2}}</td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

22. In the Solution Explorer, expand Home and expand Shared
23. Double-click _Layout.cshtmnl to open the file
24. Change the document as follows:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Fun Department Store :: @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("Fun Department Store Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Payroll Evaluation", "PayrollEvaluation", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p class="text-center common-font">&copy; @DateTime.Now.Year - Fun Department Store (FDS)</p>
            </footer>
        </div>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>

25. To execute the application, press Ctrl + F5

    

26. Click the Payroll Evaluation link:

    

27. In the text boxes, type the following values:

    Hourly Rate: 15.16
    Monday:       9.50
    Tuesday:      8
    Wednesday:   10
    Thursday:     8.50
    Friday:      10.50

    

    

    

28. Close the browser and return to your programming environment
29. In the Solution Explorer, right-click Scripts -> Add -> New Item...
30. In the left frame of the Add New Item dialog box, click Web and, in the middle frame, click JavaScript File
31. Change the Name of the file to PayrollManagement
32. Click Add
33. Change the document as follows:

    var payrollApplication = angular.module("payrollApp", []);
    
    function processPayroll() {
    
    }
    
    payrollApplication.controller("PayrollController", processPayroll);

Creating a Service

To let you create a function-based service, AngularJS provides a method named service. As seen for a valued service, the syntax to use is:

service(string name, function function-definition

To create the service, call the service() method on the angular object. As seen for a controller or a value-based service, the first argument is the name of the service. The name can be anything but, to make it simple, follow the rules of names of JavaScript variables. Once again, the name can be included in single or double-quotes. The second argument is the constructor of the service as an object. As seen for a controller, you can define a function separately and pass its name as the second argument of the angular.service() method. Here is an example:

var app = angular.module("appTimeSheet", []);
app.service('tsService', announce);

function announce() {
        
}

As seen in our introduction to controllers, if you will not use the module in different places, you don't need a variable. You can just create the service by attaching it to the creation of the module or other component. In the same way, you can create the controller and attach it to the service() method. Here is an example:

angular.module('appTimeSheet', []).service('tsService', announce).controller("TimeSheetController", present);

To make your code easy to read, you can put each object on its own line. Here is an example:

angular.module('appTimeSheet', [])
    .service('tsService', announce)
    .controller("TimeSheetController", present);

You can also define the function in the second argument placeholder. Here is an example:

var app = angular.module("appTimeSheet", []);
app.service('tsService', function announce() {
        
});

In the same way, if you didn't declare a variable for the module, you can define the functions in their respective placeholders. Here is an example:

angular.module('appTimeSheet', [])
    .service('tsService', function () {

    })
    .controller("TimeSheetController", function () {

    });

In the body of the constructor, define what the service should do. For example, you can declare variables and create methods.

A File for a Service

As we saw for a controller, you can create a service in the same document that contains the code of your webpage. You can also create a service in the file that contains a controller. You can also create a service in its own file. In this case, create a JavaScript file, which is a file with the extension .js. Then add the necessary contents. To use the service in a webpage, make sure you create a link to its file.

Practical Learning: Introducing Services

1. Click the BundleConfig.cs tab and change the document as follows:

   using System.Web.Optimization;
   
   namespace PayrollPreparation1
   {
       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/PayrollManagement.js"));
   
               bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                           "~/Scripts/jquery.validate*"));
   
               // 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"));
   
               bundles.Add(new StyleBundle("~/Content/css").Include(
                         "~/Content/bootstrap.css",
                         "~/Content/site.css",
                         "~/Content/PayrollPreparation.css"));
           }
       }
   }

2. Click the PayrollManagement.js tab and change the document as follows:

   var payrollApplication = angular.module("payrollApp", []);
   
   function calculateSalary() {
   
   }
   
   payrollApplication.service("something", calculateSalary);
   
   function processPayroll() {
   
   }
   
   payrollApplication.controller("PayrollController", processPayroll);

Introduction to Using a Service

After creating a service, you can use it in a controller. To do this, pass the name of the service to the constructor of the controller.

Practical Learning: Using a Service

• Change the PayrollManagement.js document as follows:

  var payrollApplication = angular.module("payrollApp", []);
  
  function calculateSalary() {
  
  }
  
  payrollApplication.service("payrollService", calculateSalary);
  
  function processPayroll(payrollService) {
  
  }
  
  payrollApplication.controller("PayrollController", processPayroll);

Primary Characteristics of a Service

Variables

In the constructor of a service or a controller, you can declare a variable using the var keyword followed by a name for the variable. Initialize the variable or, at any time, change its value. AngularJS primarily follows the techniques of variables of the JavaScript language.

Practical Learning: Declaring Variable in a Service

• Change the PayrollManagement.js file as follows:

  var payrollApplication = angular.module("payrollApp", []);
  
  function calculateSalary() {
      var hSal = 16.05;
  }
  
  payrollApplication.service("payrollService", calculateSalary);
  
  function processPayroll(payrollService) {
  }
  
  payrollApplication.controller("PayrollController", processPayroll);

The Properties of a Service

If you want to create a value that would be accessed outside a service, define that value as a property preceded by this. Here is an example:

var app = angular.module("appTimeSheet", []);
app.service('tsService', announce);

function announce() {
    this.message = "Welcome to the Fun Department Store.";
}

To access a property that is defined in the constructor of a service, in the constructor of the controller, type the name of the service, a period, and the property. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Koko Bank</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="appTimeSheet">
<script>
    var app = angular.module('appTimeSheet', []);
    app.service('tsService', announce);
    app.controller("TimeSheetController", present);

    function announce() {
        this.wrongUsername = "The username you provided doesn't match anything in our records.";
    }

    function present(tsService) {
        this.user = tsService.wrongUsername;
    }
</script>

<p ng-controller="TimeSheetController as tsc"><b>Error:</b> {{tsc.user}}</p>
</body>
</html>

Remember that you can also create the function directly in the placeholder of the service's second argument. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="appTimeSheet">
<script>
    var app = angular.module('appTimeSheet', []);
    app.service('tsService', function announce() {
        this.wrongUsername = "The username you provided doesn't match anything in our records.";
    });
    app.controller("TimeSheetController", present);

    function present(tsService) {
        this.user = tsService.wrongUsername;
    }
</script>

<p ng-controller="TimeSheetController as tsc"><b>Error:</b> {{tsc.user}}</p>
</body>
</html>

In the same way, you can create as many properties as you want in the constructor of a service, and then access those properties in the controller as seen above. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="appTimeSheet">
<script>
    var app = angular.module('appTimeSheet', []);
    app.service('tsService', announce);
    app.controller("TimeSheetController", present);

    function announce() {
        this.wrongUsername = "The username you provided doesn't match anything in our records.";
        this.passwordMatch = "The passwords you provided do not match. Make sure you type the exact same password in both text boxes.";
        this.combination = "The combination of the username and password you typed do not match our records.";
    }

    function present(tsService) {
        this.user =  tsService.wrongUsername;
        this.pass =  tsService.passwordMatch;
        this.combo = tsService. combination;
    }
</script>
<div ng-controller="TimeSheetController as tsc">
    <p><b>Error:</b> {{tsc.user}}</p>
    <p><b>Warning:</b> {{tsc.pass}}</p>
    <p><b>Message:</b> {{tsc.combo}}</p>
</div>

</body>
</html>

Practical Learning: Accessing a Value from a Service

1. Change the PayrollManagement.js document as follows:

   var payrollApplication = angular.module("payrollApp", []);
   
   function calculateSalary() {
       var hSal = 16.05;
   
       this.baseRate = hSal;
   }
   
   payrollApplication.service("payrollService", calculateSalary);
   
   function processPayroll(payrollService) {
       this.HourlySalary = payrollService.baseRate;
   }
   
   payrollApplication.controller("PayrollController", processPayroll);

2. Click the PayrollEvaluation.cshtml tab and change its document as follows:

   @{
       ViewBag.Title = "Payroll Processing";
   }
   
   @Scripts.Render("~/bundles/jquery")
   
   <div ng-app="payrollApp">
       <h2 class="common-font text-center bold">Payroll Processing</h2>
   
       <hr />
   
       <div class="delimiter" ng-controller="PayrollController as pay">
           <form name="PayrollEvaluation" method="post">
               <table>
                   <tr>
                       <td class="large-text bold">Hourly Salary:</td>
                       <td colspan="5"><input type="text" class="form-control ng-model" ng-model="pay.HourlySalary" /></td>
                   </tr>
               </table>
           </form>
       </div>
   </div>

3. To execute the application, press Ctrl + F5:

   

4. Close the browser and return to your programming environment
5. Click the PayrollManagement.js tab and change its document as follows:

   var payrollApplication = angular.module("payrollApp", []);
   
   function calculateSalary() {
       var hSal = 16.05;
       var mon = 10.50;
   
       var monRegSal = hSal * mon;
   
       this.baseRate = hSal;
       this.monWork = mon;
       this.monRegularSal = monRegSal;
   }
   
   payrollApplication.service("payrollService", calculateSalary);
   
   function processPayroll(payrollService) {
       this.HourlySalary = payrollService.baseRate;
       this.Monday = payrollService.monWork;
       this.MondayRegularSalary = payrollService.monRegularSal;
   }
   
   payrollApplication.controller("PayrollController", processPayroll);

6. Click the PayrollEvaluation.cshtml tab and change its document as follows:

   @{
       ViewBag.Title = "Payroll Processing";
   }
   
   @Scripts.Render("~/bundles/jquery")
   
   <div ng-app="payrollApp">
       <h2 class="common-font text-center bold">Payroll Processing</h2>
   
       <hr />
   
       <div class="delimiter" ng-controller="PayrollController as pay">
           <form name="PayrollEvaluation" method="post">
               <table class="table table-striped">
                   <tr>
                       <td class="large-text bold">Hourly Salary:</td>
                       <td colspan="5"><input type="text" class="form-control ng-model" ng-model="pay.HourlySalary" /></td>
                   </tr>
                   <tr>
                       <td class="large-text bold">&nbsp;</td>
                       <td class="bold text-center">Monday</td>
                       <td class="bold text-center">Tuesday</td>
                       <td class="bold text-center">Wednesday</td>
                       <td class="bold text-center">Thursday</td>
                       <td class="bold text-center">Friday</td>
                   </tr>
                   <tr>
                       <td class="bold">Time Worked:</td>
                       <td><input type="text" class="form-control ng-model" ng-model="pay.Monday" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                   </tr>
                   <tr>
                       <td class="bold">Daily Salary:</td>
                       <td>{{pay.MondayRegularSalary | number: 2}}</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                   </tr>
               </table>
           </form>
       </div>
   </div>

7. To execute the project, press Ctrl + F5:

   

8. Close the browser and return to your programming environment

Conditional Statements in a Service

In the body of the constructor of a controller or the constructor of a service, you can use conditional expressions to examine all types of conditions. The conditional statements are formulated and used as done in JavaScript.

Practical Learning: Checing Conditions in a Servive

1. Access the PayrollManagement.js document and change it as follows:

   var payrollApplication = angular.module("payrollApp", []);
   
   function calculateSalary() {
       var hSal = 16.05;
       var mon = 10.50;
       var monRegTime = 0.00;
       var monOver = 0.00;
       var overtimeRate = hSal * 1.50;
   
       var monRegSal = hSal * mon;
   
       if (mon <= 8.00)
           monRegTime = mon;
       else
           monRegTime = 8.00;
   
       if (mon <= 8.00)
           monOver = 0.00;
       else
           monOver = mon - 8.00;
   
       this.baseRate = hSal;
       this.monWork = mon;
       this.monRegularTime = monRegTime;
       this.monRegularPay = hSal * monRegTime;
       this.monOvertime = monOver;
       this.monOverPay = overtimeRate * monOver;
   }
   
   payrollApplication.service("payrollService", calculateSalary);
   
   function processPayroll(payrollService) {
       this.HourlySalary = payrollService.baseRate;
       this.Monday = payrollService.monWork;
       this.MondayRegularTime = payrollService.monRegularTime;
       this.MondayRegularSalary = payrollService.monRegularPay;
       this.MondayOvertime = payrollService.monOvertime;;
       this.MondayOvertimeSalary = payrollService.monOverPay;
   }
   
   payrollApplication.controller("PayrollController", processPayroll);

2. Access the PayrollEvaluation.cshtml document and change it as follows:

   @{
       ViewBag.Title = "Payroll Processing";
   }
   
   @Scripts.Render("~/bundles/jquery")
   
   <div ng-app="payrollApp">
       <h2 class="common-font text-center bold">Payroll Processing</h2>
   
       <hr />
   
       <div class="delimiter" ng-controller="PayrollController as pay">
           <form name="PayrollEvaluation" method="post">
               <table class="table table-striped">
                   <tr>
                       <td class="large-text bold">Hourly Salary:</td>
                       <td colspan="5"><input type="text" class="form-control ng-model" ng-model="pay.HourlySalary" /></td>
                   </tr>
                   <tr>
                       <td class="large-text bold">&nbsp;</td>
                       <td class="bold text-center">Monday</td>
                       <td class="bold text-center">Tuesday</td>
                       <td class="bold text-center">Wednesday</td>
                       <td class="bold text-center">Thursday</td>
                       <td class="bold text-center">Friday</td>
                   </tr>
                   <tr>
                       <td class="bold">Time Worked:</td>
                       <td><input type="text" class="form-control ng-model" ng-model="pay.Monday" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                       <td><input type="text" class="form-control ng-model" /></td>
                   </tr>
                   <tr>
                       <td class="bold">Daily Salary:</td>
                       <td>{{pay.MondayRegularSalary | number: 2}}</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                   </tr>
                   <tr>
                       <td class="bold">Regular Salary:</td>
                       <td>{{pay.MondayRegularSalary | number: 2}}</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                   </tr>
                   <tr>
                       <td class="bold">Overtime:</td>
                       <td>{{pay.MondayOvertime | number: 2}}</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                   </tr>
                   <tr>
                       <td class="bold">Overtime Salary:</td>
                       <td>{{pay.MondayOvertimeSalary | number: 2}}</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                       <td>&nbsp;</td>
                   </tr>
               </table>
           </form>
       </div>
   </div>

3. To execute the application, press Ctrl + F5:

   

4. Close the browser and return to your programming environment
5. In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
6. Type PayrollEvaluation as the name of the file
7. Click OK
8. In the empty document, type the following:

   function calculateSalary() {
       function calculateRegularTime(time) {
           if (time <= 8.00)
               return time;
           else
               return 8.00;
       }
       function calculateOvertime(time) {
           if (time <= 8.00)
               return 0.00;
           else
               return time - 8.00;
       }
   
       var hSal = 16.29;
       var overtimeRate = hSal * 1.50;
       var mon = 10.50, tue = 9.00, wed = 7.50, thu = 9.50, fri = 6.00;
   
       var monRegTime = calculateRegularTime(mon);
       var tueRegTime = calculateRegularTime(tue);
       var wedRegTime = calculateRegularTime(wed);
       var thuRegTime = calculateRegularTime(thu);
       var friRegTime = calculateRegularTime(fri);
   
       var monRegSal = hSal * monRegTime;
       var tueRegSal = hSal * tueRegTime;
       var wedRegSal = hSal * wedRegTime;
       var thuRegSal = hSal * thuRegTime;
       var friRegSal = hSal * friRegTime;
   
       var monOver = calculateOvertime(mon);
       var tueOver = calculateOvertime(tue);
       var wedOver = calculateOvertime(wed);
       var thuOver = calculateOvertime(thu);
       var friOver = calculateOvertime(fri);
   
       var monOverPay = overtimeRate * monOver;
       var tueOverPay = overtimeRate * tueOver;
       var wedOverPay = overtimeRate * wedOver;
       var thuOverPay = overtimeRate * thuOver;
       var friOverPay = overtimeRate * friOver;
   
       this.baseRate = hSal;
       this.monWork = mon;
       this.tueWork = tue;
       this.wedWork = wed;
       this.thuWork = thu;
       this.friWork = fri;
   
       this.monRegularTime = function () { return monRegTime; }
       this.tueRegularTime = function () { return tueRegTime; }
       this.wedRegularTime = function () { return wedRegTime; }
       this.thuRegularTime = function () { return thuRegTime; }
       this.friRegularTime = function () { return friRegTime; }
   
       this.monRegularPay = function () { return monRegSal; }
       this.tueRegularPay = function () { return tueRegSal; }
       this.wedRegularPay = function () { return wedRegSal; }
       this.thuRegularPay = function () { return thuRegSal; }
       this.friRegularPay = function () { return friRegSal; }
   
       this.monOvertime = function () { return monOver; }
       this.tueOvertime = function () { return tueOver; }
       this.wedOvertime = function () { return wedOver; }
       this.thuOvertime = function () { return thuOver; }
       this.friOvertime = function () { return friOver; }
   
       this.monOverPay = function () { return monOverPay; }
       this.tueOverPay = function () { return tueOverPay; }
       this.wedOverPay = function () { return wedOverPay; }
       this.thuOverPay = function () { return thuOverPay; }
       this.friOverPay = function () { return friOverPay; }
   
       this.weeklySalary = monRegSal + tueRegSal + wedRegSal + thuRegSal + friRegSal + monOverPay + tueOverPay + wedOverPay + thuOverPay + friOverPay;
   }
   
   payrollApplication.service("payrollService", calculateSalary);

9. Click the BundleConfig.cs tab and change the document as follows:

   using System.Web.Optimization;
   
   namespace PayrollPreparation1
   {
       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/PayrollManagement.js",
                           "~/Scripts/PayrollManagement.js"));
   
               bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                           "~/Scripts/jquery.validate*"));
   
               // 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"));
   
               bundles.Add(new StyleBundle("~/Content/css").Include(
                         "~/Content/bootstrap.css",
                         "~/Content/site.css",
                         "~/Content/PayrollPreparation.css"));
           }
       }
   }

10. Click the PayrollManagement.js tab to access its document
11. To experiment with further nested functions, include the whole content in a nsted function named prepare and call it thereafter as follows:

    var payrollApplication = angular.module("payrollApp", []);
    
    function processPayroll(payrollService) {
        this.prepare = function () {
            this.HourlySalary = payrollService.baseRate;
    
            this.Monday = payrollService.monWork;
            this.Tuesday = payrollService.tueWork;
            this.Wednesday = payrollService.wedWork;
            this.Thursday = payrollService.thuWork;
            this.Friday = payrollService.friWork;
    
            this.MondayRegularTime = payrollService.monRegularTime();
            this.TuesdayRegularTime = payrollService.tueRegularTime();
            this.WednesdayRegularTime = payrollService.wedRegularTime();
            this.ThursdayRegularTime = payrollService.thuRegularTime();
            this.FridayRegularTime = payrollService.friRegularTime();
    
            this.MondayRegularSalary = payrollService.monRegularPay();
            this.TuesdayRegularSalary = payrollService.tueRegularPay();
            this.WednesdayRegularSalary = payrollService.wedRegularPay();
            this.ThursdayRegularSalary = payrollService.thuRegularPay();
            this.FridayRegularSalary = payrollService.friRegularPay();
    
            this.MondayOvertime = payrollService.monOvertime();
            this.TuesdayOvertime = payrollService.tueOvertime();
            this.WednesdayOvertime = payrollService.wedOvertime();
            this.ThursdayOvertime = payrollService.thuOvertime();
            this.FridayOvertime = payrollService.friOvertime();
    
            this.MondayOvertimeSalary = payrollService.monOverPay();
            this.TuesdayOvertimeSalary = payrollService.tueOverPay();
            this.WednesdayOvertimeSalary = payrollService.wedOverPay();
            this.ThursdayOvertimeSalary = payrollService.thuOverPay();
            this.FridayOvertimeSalary = payrollService.friOverPay();
    
            this.NetPay = payrollService.weeklySalary;
        }
    
        this.prepare();
    }
    
    payrollApp.controller("PayrollController", processPayroll);

12. Access the PayrollEvaluation.cshtml document and change it as follows:

    @{
        ViewBag.Title = "Payroll Processing";
    }
    
    @Scripts.Render("~/bundles/jquery")
    
    <div ng-app="payrollApp">
        <h2 class="common-font text-center bold">Payroll Processing</h2>
    
        <hr />
    
        <div class="delimiter" ng-controller="PayrollController as pay">
            <form name="PayrollEvaluation" method="post">
                <table>
                    <tr>
                        <td class="large-text bold">Hourly Salary:</td>
                        <td colspan="5"><input type="text" class="form-control ng-model" ng-model="pay.HourlySalary" /></td>
                    </tr>
                </table>
    
                <table class="table table-striped">
                    <tr>
                        <td class="large-text bold">&nbsp;</td>
                        <td class="bold text-center">Monday</td>
                        <td class="bold text-center">Tuesday</td>
                        <td class="bold text-center">Wednesday</td>
                        <td class="bold text-center">Thursday</td>
                        <td class="bold text-center">Friday</td>
                    </tr>
                    <tr>
                        <td class="bold">Time Worked:</td>
                        <td><input type="text" class="form-control ng-model" ng-model="pay.Monday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="pay.Tuesday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="pay.Wednesday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="pay.Thursday" /></td>
                        <td><input type="text" class="form-control ng-model" ng-model="pay.Friday" /></td>
                    </tr>
                    <tr>
                        <td class="bold">Regular Time:</td>
                        <td>{{pay.MondayRegularTime | number: 2}}</td>
                        <td>{{pay.TuesdayRegularTime | number: 2}}</td>
                        <td>{{pay.WednesdayRegularTime | number: 2}}</td>
                        <td>{{pay.ThursdayRegularTime | number: 2}}</td>
                        <td>{{pay.FridayRegularTime | number: 2}}</td>
                    </tr>
                    <tr>
                        <td class="bold">Regular Salary:</td>
                        <td>{{pay.MondayRegularSalary | number: 2}}</td>
                        <td>{{pay.TuesdayRegularSalary | number: 2}}</td>
                        <td>{{pay.WednesdayRegularSalary | number: 2}}</td>
                        <td>{{pay.ThursdayRegularSalary | number: 2}}</td>
                        <td>{{pay.FridayRegularSalary | number: 2}}</td>
                    </tr>
                    <tr>
                        <td class="bold">Overtime:</td>
                        <td>{{pay.MondayOvertime | number: 2}}</td>
                        <td>{{pay.TuesdayOvertime | number: 2}}</td>
                        <td>{{pay.WednesdayOvertime | number: 2}}</td>
                        <td>{{pay.ThursdayOvertime | number: 2}}</td>
                        <td>{{pay.FridayOvertime | number: 2}}</td>
                    </tr>
                    <tr>
                        <td class="bold">Overtime Salary:</td>
                        <td>{{pay.MondayOvertimeSalary | number: 2}}</td>
                        <td>{{pay.TuesdayOvertimeSalary | number: 2}}</td>
                        <td>{{pay.WednesdayOvertimeSalary | number: 2}}</td>
                        <td>{{pay.ThursdayOvertimeSalary | number: 2}}</td>
                        <td>{{pay.FridayOvertimeSalary | number: 2}}</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td class="bold">Weekly Salary:</td>
                        <td>{{pay.NetPay | number: 2}}</td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

13. To execute the application, on the main menu, click Debug -> Start Without Debugging and click the Payroll Evaluation link

    

14. Close the browser and return to your programming environment
15. Close your programming environment

Previous	Copyright © 2017-2022, FunctionX	Next