Fundamentals of Objects

Introduction

In your AngularJS component, you may want to create one or more objects. Consider the following function and its local variables:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ESCAPE - Customer Record</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>ESCAPE - Customer Record</h1>

<form name="CustomerRecord" method="get" ng-app="appModule">
    <table ng-controller="CustomersController as client">
        <tr>
            <td style="font-weight: 600; width: 100px">Account #:</td>
            <td>{{client.accountNumber}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">First Name:</td>
            <td>{{client.firstName}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Last Name:</td>
            <td>{{client.lastName}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Address:</td>
            <td>{{client.address}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">City:</td>
            <td>{{client.city}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">County:</td>
            <td>{{client.county}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">State:</td>
            <td>{{client.state}}</td>
        </tr>
    </table>
</form>

<script>
    var appModule = angular.module("appModule", []);
    appModule.controller("CustomersController", present);

    function present() {
        this.accountNumber = "85-2853-74";
        this.firstName = "Elijah";
        this.lastName = "Neheman";
        this.address = "6804 West Cliff Rd";
        this.city = "Rockville";
        this.county = "Montgomery";
        this.state = "MD";
    }
</script>
</body>
</html>

If you have many variables that can be used in a group, you can put them in an object and use the group as one.

Practical LearningPractical Learning: Introducing Objects

  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 CableCompany5
  4. Click OK
  5. In the New ASP.NET Web Application dialog box, click the MVC icon
  6. Click OK
  7. To create a new CSS file, in the Solution Explorer, right-click Content -> Add -> New Item...
  8. 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
  9. Change the file Name to CableCompany
  10. Click Add
  11. 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; }
  12. In the Solution Explorer, right-click CableCompany5 and click Manage NuGet Packages...
  13. Click the Browser button.
    Do a search on angularjs (you must be connected to the Internet)
  14. In the list, click angularjs:

    Microsoft Visual Studio - AngularJS Installation

  15. In the middle-right frame, click Install. If a dialog box comes up, read it and click OK:

    Preview

  16. In the Solution Explorer, right-click Scripts -> Add -> New Item...
  17. In the left frame of the Add New Item dialog box, click Web and, in the middle frame, click JavaScript File
  18. Change the Name of the file to BillPreparation
  19. Click Add
  20. Change the document as follows:
    var appCableCompany = angular.module('appCableCompany', []);
    appCableCompany.controller("BillsController", function () {
        this.estimateCableBill = function () {
            var accountFee = 0.00;
            var packageFee = 0.00;
            var additionalBoxesFee = 0.00;
    
            var dvr = this.DVRService;
            var sport = this.SportsPackage;
            var category = this.packageType; // 10 Channels, Standard (140 Channels), Performance (220)
            var boxes = this.numberOfBoxes;
            var acntType = this.acntCategory;
    
            if (category === 'Standard') {
                packageFee = 34.50;
            }
            else if (category === 'Performance') {
                packageFee = 51.85;
            }
            else {
                packageFee = 29.25;
            }
    
            if (boxes === 1) {
                additionalBoxesFee = 15.27;
            } else if (boxes === 2) {
                additionalBoxesFee = 2 * 12.93;
            } else if (boxes === 3) {
                additionalBoxesFee = 3 * 10.46;
            } else { // if (boxes >= 4)
                additionalBoxesFee = boxes * 9.97;
            }
    
            if (acntType === "smallBusiness") {
                accountFee = 6.55 * boxes;
            } else if (acntType === "hospital") {
                accountFee = 2.55 * boxes;
            } else if (acntType === "government") {
                accountFee = 8.55 * boxes;
            } else if (acntType === "hotel") {
                accountFee = 12.86 * boxes;
            } else { // if (acntType === "Home/Residential")
                accountFee = 9.92 * boxes;
            }
    
            var subTotal = packageFee + accountFee + additionalBoxesFee + 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.boxesFee = additionalBoxesFee;
            this.feeBasedOnAccount = accountFee;
            this.CableTVPackageFee = packageFee;
            this.paymentAmount = subTotal + fcc + local + state;
        }
    });
  21. In the Solution Explorer, expand App_Start and double-click BundleConfig.cs
  22. Change the document as follows:
    using System.Web;
    using System.Web.Optimization;
    
    namespace CableCompany5
    {
        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"));
            }
        }
    }
  23. In the Solution Explorer, click the button on the left of Views to expand it. In the same way, expand the Shared folder
  24. Under Shared, double-click _Layout.cshtml to open it
  25. 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>
  26. In the Solution Explorer, click the button on the left of Controllers to expand it
  27. Under Controllers, double-click HomeController.cs to open it
  28. Add a method named BillEvaluation as follows:
    using System.Web.Mvc;
    
    namespace CableCompany5.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() => View();
        }
    }
  29. In the class, right-click inside the BillEvaluation() method and click Add View...
  30. In the dialog box, make sure the text box displays BillEvaluation and click Add
  31. 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>
                        <tr>
                            <td style="width: 175px"><label for="Basic">Basic</label></td>
                            <td class="medium">
                                <input type="radio" name="rdoPackageType" id="Basic" value="Basic"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="Standard">Standard</label></td>
                            <td>
                                <input type="radio" name="rdoPackageType" id="Standard" value="Standard"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="Performance">Performance</label></td>
                            <td>
                                <input type="radio" name="rdoPackageType" id="Performance" value="Performance"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                    </table>
                </div>
    
                <div class="col-md-6">
                    <div class="bold">Account Category</div>
                    <table>
                        <tr>
                            <td style="width: 180px"><label for="home">Home</label></td>
                            <td class="medium">
                                <input type="radio" name="rdoAccountCategory" id="home" value="home"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="hotel">Hotel</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="hotel" value="hotel"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="hospital">Hospital</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="hospital" value="hospital"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="government">Government</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="government" value="government"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="smallBusiness">Small Business</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="smallBusiness" value="smallBusiness"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <label for="DVRService">DVR Service:</label>
                        <input type="number" id="DVRService" ng-model="pay.DVRService"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <label for="SportsPackage">Sports Package:</label>
                        <input type="number" id="SportsPackage" ng-model="pay.SportsPackage"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                </div>
            </div>
            <hr />
            <h3>Additional TV Boxes</h3>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <label for="nbrOfBoxes">Number of Boxes:</label>
                        <input type="number" id="nbrOfBoxes" ng-model="pay.numberOfBoxes"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                    <div>
                        &nbsp;
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <span class="caption bold">Box(es) Fee:</span>
                        <span class="resulting-value">{{pay.boxesFee | number:2}}</span>
                    </div>
                    <div>
                        <span class="caption bold">Category Unit Fee:</span>
                        <span class="resulting-value">{{pay.feeBasedOnAccount | number:2}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <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>
                <div class="col-md-6">
                    <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>
  32. To execute, on the main menu, click Debug -> Start Without Debugging:

    An Instance Name for a Controller

  33. Close the browser and return to your programming environment

Creating an Object

As done in JavaScript, you can create an object in a function. This concept also applies to the constructors (or functions) of a compponent. You have various options. To create an object in the function, apply a name to the this object and assign the curly brackets to it. Here is an example:

var appModule = angular.module("appModule", []);
appModule.controller("CustomersController", present);

function present() {
    this.customer = {
            
    };
}

The section from the opening curly bracket to the closing curly bracket is the body of the object.

The Properties of an Object

A property of an object is a value that describes an aspect of the object. To create a property, in the body of the object, type a name for the property, a colon, and a value for the property. If you want the property to hold a number, simply type that number. If you want the property to hold a Boolean value, use true or false as the value. If you want the property to hold a character or a string, provide the value in single or double-quotes. Here is an example of an object:

var appModule = angular.module("appModule", []);
appModule.controller("CustomersController", present);

function present() {
    this.customer = {
        accountNumber : "92-8379-64"
    };
}

If you want the object to have more than one property, end the definition of each property with a comma, except for the las property. Here is an example of an object with various properties:

var appModule = angular.module("appModule", []);
appModule.controller("CustomersController", present);

function present() {
    this.customer = {
        accountNumber : "92-8379-64",
        firstName : "Jonathan",
        lastName : "Kroeber",
        address : "7939 Epiphany Rd #D15",
        city : "Alexandria",
        county : "",
        state : "VA"
    };
}

After creating your object, in a webpage, to access a property in a {{}} placeholder, type the instance name of the controller, a period, the name of the object, a period, and the desired name of the property. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ESCAPE - Customer Record</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>ESCAPE - Customer Record</h1>

<form name="CustomerRecord" method="get" ng-app="appModule">
    <table ng-controller="CustomersController as client">
        <tr>
            <td style="font-weight: 600; width: 100px">Account #:</td>
            <td>{{client.customer.accountNumber}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">First Name:</td>
            <td>{{client.customer.firstName}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Last Name:</td>
            <td>{{client.customer.lastName}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Address:</td>
            <td>{{client.customer.address}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">City:</td>
            <td>{{client.customer.city}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">County:</td>
            <td>{{client.customer.county}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">State:</td>
            <td>{{client.customer.state}}</td>
        </tr>
    </table>
</form>

<script>
    var appModule = angular.module("appModule", []);
    appModule.controller("CustomersController", present);

    function present() {
        this.customer = {
            accountNumber : "92-8379-64",
            firstName : "Jonathan",
            lastName : "Kroeber",
            address : "7939 Epiphany Rd #D15",
            city : "Alexandria",
            county : "",
            state : "VA"
        };
    }
</script>
</body>
</html>

Practical LearningPractical Learning: Creating and Using an Object

  1. Click the BillPreparation.js tab to access the file and change the document as follows:
    var appCableCompany = angular.module('appCableCompany', []);
    appCableCompany.controller("BillsController", function () {
        this.estimateCableBill = function () {
            var accountFee = 0.00;
            var packageFee = 0.00;
            var additionalBoxesFee = 0.00;
    
            var dvr = this.DVRService;
            var sport = this.SportsPackage;
            var category = this.packageType; // 10 Channels, Standard (140 Channels), Performance (220)
            var boxes = this.numberOfBoxes;
            var acntType = this.acntCategory;
    
            if (category === 'Standard') {
                packageFee = 34.50;
            }
            else if (category === 'Performance') {
                packageFee = 51.85;
            }
            else {
                packageFee = 29.25;
            }
    
            if (boxes === 1) {
                additionalBoxesFee = 15.27;
            } else if (boxes === 2) {
                additionalBoxesFee = 2 * 12.93;
            } else if (boxes === 3) {
                additionalBoxesFee = 3 * 10.46;
            } else { // if (boxes >= 4)
                additionalBoxesFee = boxes * 9.97;
            }
    
            if (acntType === "smallBusiness") {
                accountFee = 6.55 * boxes;
            } else if (acntType === "hospital") {
                accountFee = 2.55 * boxes;
            } else if (acntType === "government") {
                accountFee = 8.55 * boxes;
            } else if (acntType === "hotel") {
                accountFee = 12.86 * boxes;
            } else { // if (acntType === "Home/Residential")
                accountFee = 9.92 * boxes;
            }
    
            var subTotal = packageFee + accountFee + additionalBoxesFee + dvr + sport;
            var fcc = subTotal * 0.00250881;
            var local = (subTotal + fcc) * 0.0372668;
            var state = (subTotal + fcc) * 0.0082493;
    
            this.cableBill = {
                packageType: category,
                accountType: acntType,
                packageFee: packageFee,
                numberOfBoxes: boxes,
                boxesFee : additionalBoxesFee,
                feeBasedOnAccount : accountFee,
                DVRService : dvr,
                SportsPackage: sport,
                fccFee : fcc,
                localTaxes : local,
                stateTaxes : state,
                subTotal : subTotal,
                CableTVPackageFee : packageFee,
                paymentAmount : subTotal + fcc + local + state
            };
        }
    });
  2. 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>
                        <tr>
                            <td style="width: 175px"><label for="Basic">Basic</label></td>
                            <td class="medium">
                                <input type="radio" name="rdoPackageType" id="Basic" value="Basic"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="Standard">Standard</label></td>
                            <td>
                                <input type="radio" name="rdoPackageType" id="Standard" value="Standard"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="Performance">Performance</label></td>
                            <td>
                                <input type="radio" name="rdoPackageType" id="Performance" value="Performance"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                    </table>
                </div>
    
                <div class="col-md-6">
                    <div class="bold">Account Category</div>
                    <table>
                        <tr>
                            <td style="width: 180px"><label for="home">Home</label></td>
                            <td class="medium">
                                <input type="radio" name="rdoAccountCategory" id="home" value="home"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="hotel">Hotel</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="hotel" value="hotel"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="hospital">Hospital</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="hospital" value="hospital"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="government">Government</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="government" value="government"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="smallBusiness">Small Business</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="smallBusiness" value="smallBusiness"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <label for="DVRService">DVR Service:</label>
                        <input type="number" id="DVRService" ng-model="pay.DVRService"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <label for="SportsPackage">Sports Package:</label>
                        <input type="number" id="SportsPackage" ng-model="pay.SportsPackage"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                </div>
            </div>
            <hr />
            <h3>Additional TV Boxes</h3>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <label for="nbrOfBoxes">Number of Boxes:</label>
                        <input type="number" id="nbrOfBoxes" ng-model="pay.numberOfBoxes"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                    <div>
                        &nbsp;
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <span class="caption bold">Box(es) Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.boxesFee | number:2}}</span>
                    </div>
                    <div>
                        <span class="caption bold">Category Unit Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.feeBasedOnAccount | number:2}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <span class="caption bold">Package Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.CableTVPackageFee.toFixed(2)}}</span>
                    </div>
                    <div>
                        <span class="caption bold">Sub-Total:</span>
                        <span class="resulting-value">{{pay.cableBill.subTotal.toFixed(2)}}</span>
                    </div>
                    <div>
                        <span class="caption bold">FCC Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.fccFee.toFixed(2)}}</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <span class="caption bold">Local Taxes:</span>
                        <span class="resulting-value">{{pay.cableBill.localTaxes | number:2}}</span>
                    </div>
                    <div>
                        <span class="caption bold">State Taxes:</span>
                        <span class="resulting-value">{{pay.cableBill.stateTaxes | number:2}}</span>
                    </div>
                    <div>
                        <span class="caption bold">Payment Amount:</span>
                        <span class="resulting-value">{{pay.cableBill.paymentAmount | number:2}}</span>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
  3. To execute, on the main menu, click Debug ->; Start Without Debugging
  4. Click DVR Service and type 8.24
  5. Click Sports Package and type 7.22
  6. Click the Number of Boxes text box and type 3
  7. Click the Government radio button:

    Introduction to Objects

  8. Click the Small Business radio button:

    Introduction to Objects

  9. Close the browser and return to your programming environment

An Empty Object

As another technique to create an object for your component, you can start with this., followed by the desired name of the object, the assignment operator =, empty curly brackets, and a semicolon. Here is an example:

var appModule = angular.module("appModule", []);
appModule.controller("CustomersController", present);

function present() {
    this.customer = {};
}

To create a property, in the body of the function, type this. followed by the name of the object, a period, the desired name of the property, the assignment operator, the desired value of the property, and a semicolon. Here are examples of properties:

var appModule = angular.module("appModule", []);
appModule.controller("CustomersController", present);

function present() {
    this.customer = {};
    this.customer.accountNumber = "62-3850-80";
    this.customer.firstName = "Patricia";
    this.customer.lastName = "Eboutou";
    this.customer.address = "10422 South Sailer Court";
    this.customer.city = "College Park";
    this.customer.county = "Prince George";
    this.customer.state = "MD";
}

The property would be accessed the same way as seen above. You can also start an object by assigning it the this object and create the properties as seen above. Here is an example:

var appModule = angular.module("appModule", []);
appModule.controller("CustomersController", present);

function present() {
    this.customer = this;
    this.customer.accountNumber = "29-8573-49";
    this.customer.firstName = "Diane";
    this.customer.lastName = "Yoshimotto";
    this.customer.address = "10982 Skinnson Str";
    this.customer.city = "Fairmont";
    this.customer.county = "Marion";
    this.customer.state = "WV";
}

The Methods of an Object

Introduction

In an object of a component, you can create a function. A method created in an object is called a method. To create a method in an object, type a name for the function, followed by a colon, and function() {} to it. Here is an example:

var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
    this.estimateCableBill = function () {        
        this.cableBill = {
            calculate : function () {
                
            }
        };
    }
});

The section from { to } is the body of the method. In the body, you can create the statements you want. If you want the method to return a value, before the closing curly bracket, type return followed by a value or an expression, and a semicolon.

After creating a method, in the code of a webpage, type the alias name of the controller, a period, the name of the method, and parentheses.

Practical LearningPractical Learning: Calling a Method of a Controller

  1. Click the BillPreparation.js tab and change the document as follows:
    var appCableCompany = angular.module('appCableCompany', []);
    appCableCompany.controller("BillsController", function () {
        this.estimateCableBill = function () {
            var dvr = this.DVRService;
            var sport = this.SportsPackage;
            var category = this.packageType; // 10 Channels, Standard (140 Channels), Performance (220)
            var boxes = this.numberOfBoxes;
            var acntType = this.acntCategory;
    
            this.cableBill = {
                packageType: category,
                accountType: acntType,
                calculatePackageFee: function () {
                    var fee = 0.00;
    
                    if      (category === 'Standard')    { fee = 34.50; }
                    else if (category === 'Performance') { fee = 51.85; }
                    else                                 { fee = 29.25; }
    
                    return fee;
                },
                numberOfBoxes: boxes,
                evaluateBoxesFee: function () {
                    var price = 0.00;
    
                    if (boxes === 1) {
                        price = 15.27;
                    } else if (boxes === 2) {
                        price = 2 * 12.93;
                    } else if (boxes === 3) {
                        price = 3 * 10.46;
                    } else { // if (boxes >= 4)
                        price = boxes * 9.97;
                    }
    
                    return price;
                },
                evaluateFeeBasedOnAccount: function () {
                    var fee = 0.00;
    
                    if (acntType === "smallBusiness") {
                        fee = 6.55 * boxes;
                    } else if (acntType === "hospital") {
                        fee = 2.55 * boxes;
                    } else if (acntType === "government") {
                        fee = 8.55 * boxes;
                    } else if (acntType === "hotel") {
                        fee = 12.86 * boxes;
                    } else { // if (acntType === "Home/Residential")
                        fee = 9.92 * boxes;
                    }
    
                    return fee;
                },
                DVRService : dvr,
                SportsPackage: sport,
                evaluateFCCFee: function () {
                    return this.calculateSubTotal() * 0.00250881;
                },
                calculateLocalTaxes: function () {
                    return (this.calculateSubTotal() + this.evaluateFCCFee()) * 0.0372668;
                },
                calculateStateTaxes: function () {
                    return (this.calculateSubTotal() + this.evaluateFCCFee()) * 0.0082493;
                },
                calculateSubTotal: function () {
                    return this.calculatePackageFee() + this.calculatePackageFee() + this.evaluateFeeBasedOnAccount() + dvr + sport;
                },
                calculatePaymentAmount: function () {
                    return this.calculateSubTotal() + this.evaluateFCCFee() + this.calculateLocalTaxes() + this.calculateStateTaxes();
                }
            };
        }
    });
  2. Access the BillEvaluation.cshtml file 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>
                        <tr>
                            <td style="width: 175px"><label for="Basic">Basic</label></td>
                            <td class="medium">
                                <input type="radio" name="rdoPackageType" id="Basic" value="Basic"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="Standard">Standard</label></td>
                            <td>
                                <input type="radio" name="rdoPackageType" id="Standard" value="Standard"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="Performance">Performance</label></td>
                            <td>
                                <input type="radio" name="rdoPackageType" id="Performance" value="Performance"
                                       ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                    </table>
                </div>
    
                <div class="col-md-6">
                    <div class="bold">Account Category</div>
                    <table>
                        <tr>
                            <td style="width: 180px"><label for="home">Home</label></td>
                            <td class="medium">
                                <input type="radio" name="rdoAccountCategory" id="home" value="home"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="hotel">Hotel</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="hotel" value="hotel"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="hospital">Hospital</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="hospital" value="hospital"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="government">Government</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="government" value="government"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="smallBusiness">Small Business</label></td>
                            <td>
                                <input type="radio" name="rdoAccountCategory" id="smallBusiness" value="smallBusiness"
                                       ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <label for="DVRService">DVR Service:</label>
                        <input type="number" id="DVRService" ng-model="pay.DVRService"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <label for="SportsPackage">Sports Package:</label>
                        <input type="number" id="SportsPackage" ng-model="pay.SportsPackage"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                </div>
            </div>
            <hr />
            <h3>Additional TV Boxes</h3>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <label for="nbrOfBoxes">Number of Boxes:</label>
                        <input type="number" id="nbrOfBoxes" ng-model="pay.numberOfBoxes"
                               ng-change="pay.estimateCableBill()" />
                    </div>
                    <div>
                        &nbsp;
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <span class="caption bold">Box(es) Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.evaluateBoxesFee() | number:2}}</span>
                    </div>
                    <div>
                        <span class="caption bold">Category Unit Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.evaluateFeeBasedOnAccount() | number:2}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <span class="caption bold">Package Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.calculatePackageFee().toFixed(2)}}</span>
                    </div>
                    <div>
                        <span class="caption bold">Sub-Total:</span>
                        <span class="resulting-value">{{pay.cableBill.calculateSubTotal().toFixed(2)}}</span>
                    </div>
                    <div>
                        <span class="caption bold">FCC Fee:</span>
                        <span class="resulting-value">{{pay.cableBill.evaluateFCCFee().toFixed(2)}}</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <span class="caption bold">Local Taxes:</span>
                        <span class="resulting-value">{{pay.cableBill.calculateLocalTaxes() | number:2}}</span>
                    </div>
                    <div>
                        <span class="caption bold">State Taxes:</span>
                        <span class="resulting-value">{{pay.cableBill.calculateStateTaxes() | number:2}}</span>
                    </div>
                    <div>
                        <span class="caption bold">Payment Amount:</span>
                        <span class="resulting-value">{{pay.cableBill.calculatePaymentAmount() | number:2}}</span>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
  3. To execute the project, press Ctrl + F5
  4. In the DVR Service text box, type 4.93
  5. In the Sports Package, type 9.28
  6. Click the Number of Boxes text box and type 1:

    Creating and Using an Object

  7. Click the Performance and the Home radio buttons

    Introduction to Objects

  8. Close the broser and return to your programming environment

Adding a Method to an Object

You can create a method ouside an object instead of in its body. To create a method outside an object, type this., followed by the name of the object, a period, a name for the method, and = function(){}. In the body of the method, create the desired statement(s).

You can add a new method to an existing object, that is, a method not available when the object was created. To add a method to an object, outside the object, type this., followed by the name of the object, a period, a name for the method, and = function(){}. In the body of the method, create the desired statement(s).

Practical LearningPractical Learning: Creating Methods Outside an Object

  1. Access the BillPrepation.js document and change it as follows:
    var appCableCompany = angular.module('appCableCompany', []);
    appCableCompany.controller("BillsController", function () {
        this.estimateCableBill = function () {
            var dvr = this.DVRService;
            var sport = this.SportsPackage;
            var category = this.packageType; // 10 Channels, Standard (140 Channels), Performance (220)
            var boxes = this.numberOfBoxes;
            var acntType = this.acntCategory;
    
            this.cableBill = {};
            this.cableBill.packageType = category;
            this.cableBill.accountType = acntType;
            this.cableBill.calculatePackageFee = function () {
                var fee = 0.00;
    
                if      (category === 'Standard')    { fee = 34.50; }
                else if (category === 'Performance') { fee = 51.85; }
                else                                 { fee = 29.25; }
    
                return fee;
            };
            this.cableBill.numberOfBoxes = boxes;
            this.cableBill.evaluateBoxesFee = function () {
                var price = 0.00;
    
                if      (boxes === 1) { price = 15.27;     }
                else if (boxes === 2) { price = 2 * 12.93; }
                else if (boxes === 3) { price = 3 * 10.46; }
                else                  { price = boxes * 9.97; }
    
                return price;
            };
            this.cableBill.evaluateFeeBasedOnAccount = function () {
                var fee = 0.00;
    
                if (acntType === "smallBusiness") {
                    fee = 6.55 * boxes;
                } else if (acntType === "hospital") {
                    fee = 2.55 * boxes;
                } else if (acntType === "government") {
                    fee = 8.55 * boxes;
                } else if (acntType === "hotel") {
                    fee = 12.86 * boxes;
                } else { // if (acntType === "Home/Residential")
                    fee = 9.92 * boxes;
                }
    
                return fee;
            };
            this.cableBill.DVRService = dvr;
            this.cableBill.SportsPackage = sport;
            this.cableBill.evaluateFCCFee = function () { return this.calculateSubTotal() * 0.00250881; };
            this.cableBill.calculateLocalTaxes = function () {
                return (this.calculateSubTotal() + this.evaluateFCCFee()) * 0.0372668;
            };
            this.cableBill.calculateStateTaxes = function () {
                return (this.calculateSubTotal() + this.evaluateFCCFee()) * 0.0082493;
            };
            this.cableBill.calculateSubTotal = function () {
                return this.calculatePackageFee() + this.calculatePackageFee() +
                       this.evaluateFeeBasedOnAccount() + dvr + sport;
            };
            this.cableBill.calculatePaymentAmount = function () {
                return this.calculateSubTotal() + this.evaluateFCCFee() +
                       this.calculateLocalTaxes() + this.calculateStateTaxes();
            };
        }
    });
  2. Click the BillEvaluation.cshtml tab to activate the file
  3. To execute, press Ctrl + F5
  4. Close the browser and return to your programming environment

Parameters and Arguments to a Controller Method

A method of an object of a component can use one or more parameters. When creating the method, if you want it to use a parameter, provide a name for the parameter in the parentheses of the method. In the body of the method, you can use or ignore the parameter. When calling the method, make sure you pass an (appropriate) argument.

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

A Project with many AngularJS Controllers

Introduction

In an AngularJS webpage, you can use one or more controllers. You can use one controller for all webpages of your project. You can create and use a different controller for each webpage, or you can use many controllers in the same webpage.

Creating Various Controllers

We already know how to use one controller in a webpage. In the same way, you can create as many controllers as you want. Remember that, to register a controller, you can attach the controller() function to the creation of a module. Here is an example:

angular.module("trafficSystem", []).
    controller("CamerasController", function () {
        this.cameraNbr = 949586;
        this.make = 'Davis Central';
        this.model = 'DT-9739';
        this.resolution = '3296 x 2472';
	});

In the same way, you can attach the controller() function to create another controller. Here is an example:

angular.module("trafficSystem", []).
    controller("CamerasController", function () {
        this.cameraNbr = 949586;
        this.make = 'Davis Central';
        this.model = 'DT-9739';
        this.resolution = '3296 x 2472';
    }).controller("DriversController", function () {
        this.driversLicNbr = '397-304-957';
        this.firstName = 'Henry';
        this.lastName = 'Sandt';
        this.vehicleMake = 'Ford';
        this.vehicleModel = 'Escort';
        this.vehicleYear = 2012;
    });

As seen in previous introductions, to register a controller, you can attach the controller() function to a variable of a module creation. Here an example:

var appTrafficSystem = angular.module("trafficSystem", []).
        controller("CamerasController", function () {
            this.cameraNbr = 949586;
            this.make = 'Davis Central';
            this.model = 'DT-9739';
            this.resolution = '3296 x 2472';
        }).
        controller("DriversController", function () {
            this.driversLicNbr = '397-304-957';
            this.firstName = 'Henry';
            this.lastName = 'Sandt';
            this.vehicleMake = 'Ford';
            this.vehicleModel = 'Escort';
            this.vehicleYear = 2012;
        });

appTrafficSystem.controller("TrafficViolationsController", function () {
        this.violationNbr = 6813504;
        this.driversLicNbr = '397-304-957';
        this.cameraNbr = 949586;
        this.violationDate = '05/11/2018';
        this.violationTime = '14:22';
        this.category = 'Red Light';
        this.amountOwed = 75;
});

Using Various Controllers

Once again, to apply a controller, first decide on the area where you want to use its value. Then, in that area, use the instance name of the controller to access its members. Here are examples:

<!DOCTYPE html>
<html ng-app="trafficSystem">
<head>
<meta charset="utf-8" />
<title>Police Traffic System</title>
<script src="Scripts/angular.min.js"></script>
<style type="text/css">
.tbl-support  { border:      3px solid black;  }
.head-support { font-weight: bold;
                border:      1px solid black;   }
.cell-support { border:      1px solid silver; }
</style>
</head>
<body>
<h1>Police Traffic System</h1>

<h2>Traffic Camera</h2>

<table class="tbl-support" ng-controller="CamerasController as cc">
    <tr class="head-support">
        <td class="head-support"><b>Camera #</b></td>
        <td class="head-support"><b>Make</b></td>
        <td class="head-support"><b>Model</b></td>
        <td class="head-support"><b>Resolution</b></td>
        <td class="head-support"><b>Location</b></td>
    </tr>
    <tr>
        <td class="cell-support">{{cc.cameraNbr}}</td>
        <td class="cell-support">{{cc.make}}</td>
        <td class="cell-support">{{cc.model}}</td>
        <td class="cell-support">{{cc.resolution}}</td>
        <td class="cell-support">{{cc.location}}</td>
    </tr>
</table>

<h2>Driver Information</h2>

<table class="tbl-support" ng-controller="DriversController as dc">
    <tr>
        <td class="head-support">Drv Lic #</td>
        <td class="head-support">Vehicle Owner</td>
        <td class="head-support">Vehicle</td>
    </tr>
    <tr>
        <td class="cell-support">{{dc.driversLicNbr}}</td>
        <td class="cell-support">{{dc.firstName}} {{dc.lastName}}</td>
        <td class="cell-support">{{dc.vehicleMake}} {{dc.vehicleModel}} {{dc.vehicleYear}}</td>
    </tr>
</table>

<h2>Traffic Violation Details</h2>

<table class="tbl-support" ng-controller="TrafficViolationsController as tvc">
    <tr class="head-support">
        <td class="head-support">Violation #</td>
        <td class="head-support">Drv Lic #</td>
        <td class="head-support">Camera #</td>
        <td class="head-support">Violation Date</td>
        <td class="head-support">Time</td>
        <td class="head-support">Type of Violation</td>
        <td class="head-support">Amount Owed</td>
    </tr>
    <tr>
        <td class="cell-support">{{tvc.violationNbr}}</td>
        <td class="cell-support">{{tvc.driversLicNbr}}</td>
        <td class="cell-support">{{tvc.cameraNbr}}</td>
        <td class="cell-support">{{tvc.violationDate}}</td>
        <td class="cell-support">{{tvc.violationTime}}</td>
        <td class="cell-support">{{tvc.category}}</td>
        <td class="cell-support">{{tvc.amountOwed}}</td>
    </tr>
</table>

<script type="text/javascript">
    var appTrafficSystem = angular.module("trafficSystem", []).
        controller("CamerasController", function () {
            this.cameraNbr = 949586;
            this.make = 'Davis Central';
            this.model = 'DT-9739';
            this.resolution = '3296 x 2472';
            this.location = 'Juanita Ave and Summer Side Str';
        }).
        controller("DriversController", function () {
            this.driversLicNbr = '397-304-957';
            this.firstName = 'Henry';
            this.lastName = 'Sandt';
            this.vehicleMake = 'Ford';
            this.vehicleModel = 'Escort';
            this.vehicleYear = 2012;
        });

    appTrafficSystem.controller("TrafficViolationsController", function () {
        this.violationNbr = 6813504;
        this.driversLicNbr = '397-304-957';
        this.cameraNbr = 949586;
        this.violationDate = '05/11/2018';
        this.violationTime = '14:22';
        this.category = 'Red Light';
        this.amountOwed = 75;
    });
</script>
</body>
</html>

In the same way, you can use a specific controller in a webpage of your choice.

Practical LearningPractical Learning: Ending the Lesson


Previous Copyright © 2017-2019, FunctionX Next