Lesson 06: Introduction to Functions

Introduction to Functions

Fundamentals of Functions

Introduction

AngularJS is a library for the JavaScript language. The library primarily supports the concepts of its parent language. These concepts include the creation of objects and the use of functions.

Practical Learning: Introducing Functions

Start Microsoft Visual Studio
On the main menu, click File -> New -> Project...
In the New Project dialog box, click ASP.NET Web Application (.NET Framework). Change project Name to CableCompany3
Click OK
In the New ASP.NET Web Application dialog box, click the MVC icon
Click OK
To create a new CSS file, in the Solution Explorer, right-click Content -> Add -> New Item...
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
Change the file Name to CableCompany
Click Add

Change the document as follows:

body {
    background-color: white;
}

form                        { padding: 1em;
                              margin:           auto;
                              width:            550px;
                              background-color: #e0d4c0;
                              border:           1px solid maroon; }
form div                    { padding:          4px;
                              margin:           0 0 1px 0; }
input[type=number]          { width:            80px;
                              float:            right;
                              border:           1px solid maroon; }
input[type=number]:focus    { outline:          1px solid #ff6a00; }
input[type=button]          { border:           0;
                              border-radius:    10px;
                              font-size:        14px;
                              width:            130px;
                              margin-left:      100px;
                              background-color: brown;
                              padding:          0.75em;
                              color:            yellow; }
input[type=button]:hover    { color:            white;
                              cursor:           pointer;
                              background-color: chocolate; }
form > fieldset > div > div { margin:           0 0 5px 0; }
.bold                       { font-weight:      600;       }
.main-title                 { font-family:      'Times New Roman', Garamond, Georgia, serif;
                              color:            maroon; }
.caption                    { width:            11.45em;
                              display:          table-cell; }
.resulting-value            { width:            6em;
                              background-color: white;
                              display:          table-cell;
                              border:           1px solid maroon; }

In the Solution Explorer, right-click CableCompany3 and click Manage NuGet Packages...
Click the Browser button.
Do a search on angularjs (you must be connected to the Internet)
In the list, click angularjs:
In the middle-right frame, click Install. If a dialog box comes up, read it and click OK:
In the Solution Explorer, right-click Scripts -> Add -> New Item...
In the left frame of the Add New Item dialog box, click Web and, in the middle frame, click JavaScript File
Change the Name of the file to BillPreparation
Click Add

Change the document as follows:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", something);

In the Solution Explorer, expand App_Start and double-click BundleConfig.cs

Change the document as follows:

using System.Web;
using System.Web.Optimization;

namespace CableCompany3
{
    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/BillPreparation.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/CableCompany.css"));
        }
    }
}

In the Solution Explorer, click the button on the left of Views to expand it. In the same way, expand the Shared folder
Under Shared, double-click _Layout.cshtml to open it

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>ESCAPE - Bill Evaluation :: @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("ESCAPE", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Bill Evaluation", "BillEvaluation", "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">&copy; @DateTime.Now.Year - ESCAPE (Eastern Shore Company and Production Entertainment)</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

In the Solution Explorer, click the button on the left of Controllers to expand it
Under Controllers, double-click HomeController.cs to open it

Add a method named BillEvaluation as follows:

using System.Web.Mvc;

namespace CableCompany3.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 BillEvaluation()
        {
            return View();
        }
    }
}

In the class, right-click inside the BillEvaluation() method and click Add View...
In the dialog box, make sure the text box displays BillEvaluation and click Add

Change the document as follows:

@{
    ViewBag.Title = "Bill Evaluation";
}

<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>

<form name="BillEvaluation" method="post" ng-app="appCableCompany">
    <fieldset ng-controller="BillsController">
        <legend>Cable TV Services</legend>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <label for="CableTVBasicFee">Cable TV Basic Fee:</label>
                    <input type="number" id="CableTVBasicFee" ng-model="CableTVBasicFee" />
                </div>
                <div>
                    <label for="DVRService">DVR Service:</label>
                    <input type="number" id="DVRService" ng-model="DVRService" />
                </div>
                <div>
                    <label for="SportsPackage">Sports Package:</label>
                    <input type="number" id="SportsPackage" ng-model="SportsPackage" />
                </div>
                <div>
                    <span class="caption bold">Sub-Total:</span>
                    <span class="resulting-value">{{(CableTVBasicFee + DVRService + SportsPackage).toFixed(2)}}</span>
                </div>
            </div>
            <div class="col-md-6">
                <div>
                    <span class="caption bold">FCC Fee:</span>
                    <span class="resulting-value">{{((CableTVBasicFee + DVRService + SportsPackage) * 0.00250881).toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">County Taxes:</span>
                    <span class="resulting-value">{{((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0072668) | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">State Taxes:</span>
                    <span class="resulting-value">{{((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0042493) | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">Payment Amount:</span>
                    <span class="resulting-value">{{(CableTVBasicFee + DVRService + SportsPackage + fccFee + ((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0072668) + ((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0042493)) | number:2}}</span>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Introduction to the Constructor of a Controller

We know that the second argument of a controller presents some options. For most components, the second argument is a callback function. That's the case for a controller:

.controller('controller-name', function);

The role of that function is similar to starting an object from a function. Therefore, this function is the constructor of the component. For a controller, that function is the constructor of the controller. You can first define the constructor as a function and then pass its name as the second argument of the component. Here is an example:

@{
    ViewBag.Title = "Exercise";
}

<h2>Exercise</h2>

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

<script>
    function calculate() {

    }

    var appModule = angular.module('customized', []);
    appModule.controller('EmployeesController', calculate);
</script>

Defining the Constructor of a Component

You can also define the callback function directly in the placeholder of the second argument of the component. Remember that the function must have its own parentheses and its own body delimited by curly brackets. You can give a name to the function. Here is an example:

var appModule = angular.module('toysModule', []);
appModule.controller('ToysController', function inventorize() {

});

Or you can create the constructor as an anonymous function (without a name). Here is an example:

var appModule = angular.module('toysModule', []);
appModule.controller('ToysController', function () {});

If you are not storing the module in a variable, you don't need a variable, create the function either way. Here is an example:

<script>
    function calculate() {

    }

    angular.module('customized', []).controller('EmployeesController', calculate);
</script>

Remember that you can define the function as the second argument of the component. Here is an example:

<script>
    angular
    .module('customized', [])
    .controller('EmployeesController', function calculate() {

    });
</script>

After creating a controller and its function, you can use the module and the controller. Here is an example:

@{
    ViewBag.Title = "Exercise";
}

<h2>Exercise</h2>

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

<div ng-app="customized">
    <div ng-controller="EmployeesController">

    </div>
</div>

<script>
    angular
        .module('customized', [])
        .controller('EmployeesController', function calculate() {
    });
</script>

Variables in a Component Constructor

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

We have already seen AngularJS's own support for variables that can be used in a {{}} placeholder.

Practical Learning: Declaring Variables

Click the BillPreparation.js tabs to access it

In the function, declare some variables as follows:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
    var packageType = 'Basic';
    var packageFee = 0.00;
    var dvr = 8.75;
    var sport = 9.95;

    var subTotal = packageFee + dvr + sport;
    var fcc = subTotal * 0.00250881;
    var local = (subTotal + fcc) * 0.0372668;
    var state = (subTotal + fcc) * 0.0082493;
});

An Instance of a Controller

An instance of a class is an object created from that class. In the constructor of a controller, if you create a property using the this object, to access that property in the webpage that uses that controller, you must create an instance of the controller. It is as if you are declaring a variable of the controller class so you can use that variable where the controller is needed.

To create an instance of a controller, in the tag where you are adding the ng-controller directive, set the value using the following formula:

controller-name as instance-name

Start with the name of the controller you had created. This is followed by the as keyword and the desired instance name. The instance-name must follow the rules of names of variables.

After creating an instance of a controller, to apply it, for the value of an ng-model directive, type the instance name, a period, and the name of the ng-model directive. In a {{}} placeholder, type the instance name, a period, and the name of the property that was created in the constructor of the controller.

Practical Learning: Creating and Using an Instance of a Controller

Access the BillEvaluation.cshtml document and change it as follows:

@{
    ViewBag.Title = "Bill Evaluation";
}

<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>

<form name="BillEvaluation" method="post" ng-app="appCableCompany">
    <fieldset ng-controller="BillsController as pay">

        . . .
        
    </fieldset>
</form>

Charactestics of Functions

Accessing a Bound Model

When you associate the instance of a controller to the name of an ng-model directive in a webpage, you are said to bind the Web control or tag. This binding also allows you to access that ng-model control in the constructor of your component.

In the constructor of a controller, to access the value of a Web control that uses a ng-model directive, use this. followed by the name of the ng-model value used in the webpage without the instance name of the controller. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>

<section ng-app="appExercise">
    <table ng-controller="ExerciseController as ec">
        <tr>
            <td>First Name:</td>
            <td><input type="text" ng-model="ec.firstName" /></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><input type="text" ng-model="ec.lastName" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="button" value="Get Full Name" /></td>
        </tr>
        <tr>
            <td>Full Name:</td>
            <td><span>{{ec.fullName}}</span></td>
        </tr>
    </table>
</section>

<script type="text/javascript">
    var appExercise = angular.module("appExercise", []);
    appExercise.controller("ExerciseController", function produce() {
        this.result = function () {
            var fName = this.firstName;
            var lName = this.lastName;
            this.fullName = fName + ' ' + lName;
        }
    });
</script>
</body>
</html>

Practical Learning: Accessing a Bound Model

Click the BillPreparation.js tab to access the file and change it follows:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
    var packageFee = 26.58;
    var dvr = 8.75;
    var sport = 9.95;

    var subTotal = packageFee + dvr + sport;
    var fcc = subTotal * 0.00250881;
    var local = (subTotal + fcc) * 0.0372668;
    var state = (subTotal + fcc) * 0.0082493;

    this.fccFee = fcc;
    this.DVRService = dvr;
    this.localTaxes = local;
    this.stateTaxes = state;
    this.subTotal = subTotal;
    this.SportsPackage = sport;
    this.CableTVPackageFee = packageFee;
    this.paymentAmount = subTotal + fcc + local + state;
});

Click the BillPreparation.cshtml tab and change the file as follows:

@{
    ViewBag.Title = "Bill Evaluation";
}

<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>

<form name="BillEvaluation" method="post" ng-app="appCableCompany">
    <fieldset ng-controller="BillsController as pay">
        <legend>Cable TV Services</legend>

        <div class="row">
            <div class="col-md-6">
                <div class="bold">Cable TV Package Type</div>
                <table class="tbl-package">
                    <tr>
                        <td style="width: 175px"><label for="Basic">Basic</label></td>
                        <td class="text-left"><input type="radio" name="rdoPackageType" id="Basic" value="Basic" /></td>
                    </tr>
                    <tr>
                        <td><label for="Standard">Standard</label></td>
                        <td class="text-left"><input type="radio" name="rdoPackageType" id="Standard" value="Standard" /></td>
                    </tr>
                    <tr>
                        <td><label for="Performance">Performance</label></td>
                        <td class="text-left"><input type="radio" name="rdoPackageType" id="Performance" value="Performance" /></td>
                    </tr>
                </table>
                <div>
                    <label for="DVRService">DVR Service:</label>
                    <input type="number" id="DVRService" ng-model="pay.DVRService" />
                </div>
                <div>
                    <label for="SportsPackage">Sports Package:</label>
                    <input type="number" id="SportsPackage" ng-model="pay.SportsPackage" />
                </div>
            </div>
            <div class="col-md-6">
                <div>
                    <span class="caption bold">Package Fee:</span>
                    <span class="resulting-value">{{pay.CableTVPackageFee.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">Sub-Total:</span>
                    <span class="resulting-value">{{pay.subTotal.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">FCC Fee:</span>
                    <span class="resulting-value">{{pay.fccFee.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">Local Taxes:</span>
                    <span class="resulting-value">{{pay.localTaxes | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">State Taxes:</span>
                    <span class="resulting-value">{{pay.stateTaxes | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">Payment Amount:</span>
                    <span class="resulting-value">{{pay.paymentAmount | number:2}}</span>
                </div>
            </div>
        </div>
    </fieldset>
</form>

To execute, on the main menu, click Debug -> Start Without Debugging:
Close the browser and return to your programming environment

Adding a Function to a Component

As you may know already, JavaScript supports nested functions. If you want to add a function to a component, you can nest one or more functions in the constructor of the component. To do this, in the body of the constructor, type this., followed by the name of the function, and followed by = function () { }. Here is an example:

<script>
    var appCableCompany = angular.module('appCableCompany', []);
    appCableCompany.controller('BillsController', calculate);

    function calculate() {
        this.EvaluateTaxes = function () {

        }
    }
</script>

The section from the opening curly bracket of the function to its closing curly bracket is the body of the function. In that body, you can create the desired statement(s). In your webpage, you can call the function using the instance of the constructor.

Calling a Function in a Constructor

A function created in an AngularJS component can be called like any JavaScript function. For example, if necessary, you can call one function in the body of another. Here is an example:

var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function produce() {
    function exists() {
        return "This is a terrible idea...";
    }

    function proof() {
        exists();
    }
});

Calling a Function in a Web Page

To call a function of a component in a webpage, you have many options. First, when creating the function in the body of the constructor of the component, create a name using this. and assign function() {} to it. As one technique to call the function in a webpage, in a {{}} placeholder, use the instance name of the controller, a period, and the name of the function. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>

<section ng-app="appExercise">
    <section ng-controller="ExerciseController as ec">
        <p>Proposition: {{ec.subject()}}</p>
    </section>
</section>

<script type="text/javascript">
    var appExercise = angular.module("appExercise", []);
    appExercise.controller("ExerciseController", function produce() {
        function exists() {
            return "This is a terrible idea...";
        }

        this.subject = function proof() {
            
        }
    });
</script>
</body>
</html>

Accessing a Controller Automatically

In JavaScript and AngularJS, you can create a function that executes automatically. To create a function that runs immediately as soon as the controller is accessed in a webpage, include its whole definition in the curly brackets of an anonymous function. The formula to follow is:

(function () { Define the function here })();

Here is an example:

(function () {
    var appCableCompany = angular.module('appCableCompany', []);
    appCableCompany.controller("BillsController", function () {
        . . .
    });
})();

Parameters and Arguments

A parameter is a value that a function needs in order to complete its operation. Such a value must be provided when the function is called. When creating the function, if you want it to use a parameter, provide a name for the parameter in the parentheses of the function. In the body of the function, you can use or ignore the parameter. When calling the function, make sure you provide a valid value for the parameter. Such a value is called an argument. Here is an example:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
    this.estimate = function (boxes) {    
        var additionalBoxesFee = 0.00;
        var packageType = 24.50;

        var subTotal = packageFee * boxes;
    }
});

In the same way, you can create a function that uses more than one parameter. In the function, ignore or use the parameter(s). When calling the function, make sure you pass the appropriate number of arguments in the right order. Here is an example:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
    this.estimate = function (accountType, boxes) {
        accountType = "Small Business"
        var packageFee = 22.50;
        var subTotal = packageFee + (packageFee * boxes;
    }
});

AngularJS Events

Introduction

An event is an action that occurs on an HTML tag while a user is doing something on a webpage. When the visitor does something on ab object in a webpage, the object reacts in a certain way, depending on the event. In this case, the object is said to fire the event.

While JavaScript supports events, AngularJS has its own support for them. The library does this through various directives. There are various types of events. Some of them are more regularly used than some others. To specify an event that should fire on a tag, add its directive as an attribute. The attribute/event needs a value.

A Function for an Event

One of the primary ways to call a function in a webpage is by using an event of a particular control on the webpage. To make this happen, you specify the value of an event as a function defined in the constructor of a component. As one way to do this, in a {{}} placeholder in the webpage, type the controller instance, a period, the name of the function, and parentheses.

The Click Event

When the user clicks something on a webpage, the object that was clicked fires an event commonly known as Click. In AngularJS, the directive that handles the Click event is named ng-click. To use it, set its value as a function that performs the necessary operation. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>

<section ng-app="appExercise">
    <table ng-controller="ExerciseController as ec">
        <tr>
            <td>First Name:</td>
            <td><input type="text" ng-model="ec.firstName" /></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><input type="text" ng-model="ec.lastName" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="button" value="Get Full Name" ng-click="ec.result()" /></td>
        </tr>
        <tr>
            <td>Full Name:</td>
            <td><span>{{ec.fullName}}</span></td>
        </tr>
    </table>
</section>

<script type="text/javascript">
    var appExercise = angular.module("appExercise", []);
    appExercise.controller("ExerciseController", function produce() {
        this.result = function () {
            var fName = this.firstName;
            var lName = this.lastName;
            this.fullName = fName + ' ' + lName;
        }
    });
</script>
</body>
</html>

Practical Learning: Introducing the Click Event

Click the BillPreparation.js tab and change the document as follows:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
    this.estimateCableBill = function () {
        var packageFee = 26.58;
        var dvr = 8.75;
        var sport = 9.95;

        var subTotal = packageFee + dvr + sport;
        var fcc = subTotal * 0.00250881;
        var local = (subTotal + fcc) * 0.0372668;
        var state = (subTotal + fcc) * 0.0082493;

        this.fccFee = fcc;
        this.DVRService = dvr;
        this.localTaxes = local;
        this.stateTaxes = state;
        this.subTotal = subTotal;
        this.SportsPackage = sport;
        this.CableTVPackageFee = packageFee;
        this.paymentAmount = subTotal + fcc + local + state;
    }
});

Click the BillEvaluation.cshtml tab change the document as follows:

@{
    ViewBag.Title = "Bill Evaluation";
}

<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>

<form name="BillEvaluation" method="post" ng-app="appCableCompany">
    <fieldset ng-controller="BillsController as pay">
        <legend>Cable TV Services</legend>

        <div class="row">
            <div class="col-md-6">
                <div class="bold">Cable TV Package Type</div>
                <table class="tbl-package">
                    <tr>
                        <td style="width: 175px"><label for="Basic">Basic</label></td>
                        <td class="text-left">
                            <input type="radio" name="rdoPackageType" id="Basic" value="Basic"
                                    ng-click="pay.estimateCableBill()" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="Standard">Standard</label></td>
                        <td class="text-left">
                            <input type="radio" name="rdoPackageType" id="Standard" value="Standard"
                                    ng-click="pay.estimateCableBill()" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="Performance">Performance</label></td>
                        <td class="text-left">
                            <input type="radio" name="rdoPackageType" id="Performance" value="Performance"
                                    ng-click="pay.estimateCableBill()" />
                        </td>
                    </tr>
                </table>
                <div>
                    <label for="DVRService">DVR Service:</label>
                    <input type="number" id="DVRService" ng-model="pay.DVRService" />
                </div>
                <div>
                    <label for="SportsPackage">Sports Package:</label>
                    <input type="number" id="SportsPackage" ng-model="pay.SportsPackage" />
                </div>
            </div>
            <div class="col-md-6">
                <div>
                    <span class="caption bold">Package Fee:</span>
                    <span class="resulting-value">{{pay.CableTVPackageFee.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">Sub-Total:</span>
                    <span class="resulting-value">{{pay.subTotal.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">FCC Fee:</span>
                    <span class="resulting-value">{{pay.fccFee.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">Local Taxes:</span>
                    <span class="resulting-value">{{pay.localTaxes | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">State Taxes:</span>
                    <span class="resulting-value">{{pay.stateTaxes | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">Payment Amount:</span>
                    <span class="resulting-value">{{pay.paymentAmount | number:2}}</span>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Press Ctrl + F5 to execute
Click one of the radio buttons. Here is an example:
Close the browser and return to your programming environment

The Change Event

If a user makes a selecion on a control or changes the value of a control, the control fires an event named Change. To support that event, AngularJS provides a directive named ng-change.

Practical Learning: Introducing the Click Event

Click the BillPreparation.js tab and change the document as follows:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
    this.estimateCableBill = function () {
        var packageFee = 26.58;
        var dvr = this.DVRService;
        var sport = this.SportsPackage;

        var subTotal = packageFee + dvr + sport;
        var fcc = subTotal * 0.00250881;
        var local = (subTotal + fcc) * 0.0372668;
        var state = (subTotal + fcc) * 0.0082493;

        this.fccFee = fcc;
        this.DVRService = dvr;
        this.localTaxes = local;
        this.stateTaxes = state;
        this.subTotal = subTotal;
        this.SportsPackage = sport;
        this.CableTVPackageFee = packageFee;
        this.paymentAmount = subTotal + fcc + local + state;
    }
});

Click the BillEvaluation.cshtml tab and change the document as follows:

@{
    ViewBag.Title = "Bill Evaluation";
}

<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>

<form name="BillEvaluation" method="post" ng-app="appCableCompany">
    <fieldset ng-controller="BillsController as pay">
        <legend>Cable TV Services</legend>

        <div class="row">
            <div class="col-md-6">
                <div class="bold">Cable TV Package Type</div>
                <table class="tbl-package">
                    <tr>
                        <td style="width: 175px"><label for="Basic">Basic</label></td>
                        <td class="text-left">
                            <input type="radio" name="rdoPackageType" id="Basic" value="Basic"
                                    ng-click="pay.estimateCableBill()" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="Standard">Standard</label></td>
                        <td class="text-left">
                            <input type="radio" name="rdoPackageType" id="Standard" value="Standard"
                                    ng-click="pay.estimateCableBill()" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="Performance">Performance</label></td>
                        <td class="text-left">
                            <input type="radio" name="rdoPackageType" id="Performance" value="Performance"
                                    ng-click="pay.estimateCableBill()" />
                        </td>
                    </tr>
                </table>
                <div>
                    <label for="DVRService">DVR Service:</label>
                    <input type="number" id="DVRService" ng-model="pay.DVRService"
                           ng-change="pay.estimateCableBill()" />
                </div>
                <div>
                    <label for="SportsPackage">Sports Package:</label>
                    <input type="number" id="SportsPackage" ng-model="pay.SportsPackage"
                           ng-change="pay.estimateCableBill()" />
                </div>
            </div>
            <div class="col-md-6">
                <div>
                    <span class="caption bold">Package Fee:</span>
                    <span class="resulting-value">{{pay.CableTVPackageFee.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">Sub-Total:</span>
                    <span class="resulting-value">{{pay.subTotal.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">FCC Fee:</span>
                    <span class="resulting-value">{{pay.fccFee.toFixed(2)}}</span>
                </div>
                <div>
                    <span class="caption bold">Local Taxes:</span>
                    <span class="resulting-value">{{pay.localTaxes | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">State Taxes:</span>
                    <span class="resulting-value">{{pay.stateTaxes | number:2}}</span>
                </div>
                <div>
                    <span class="caption bold">Payment Amount:</span>
                    <span class="resulting-value">{{pay.paymentAmount | number:2}}</span>
                </div>
            </div>
        </div>
    </fieldset>
</form>

To execute the project, on the main menu, click Debug -> Start Without Debugging
Click DVR Service and type 27.84
Click Sports Package and type 7.26
Close the browserand return to your programming environment

The Keyboard Events

If the user accesses a text-based control, such as a text-box, when a key of a keyboard is pressed, the object fires an event represented in AngularJS as ng-keydown. When the user releases the key, the object fires an event known as Key Up. To support it, AngularJS provides a directive named ng-keyup.

Practical Learning: Ending the Lesson

Close your programming environment


Previous	Copyright © 2017-2022, FunctionX	Next