Introduction to Objects
Introduction to Objects
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 Learning: Introducing Objects
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; }
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;
}
});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"));
}
}
}<!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">© @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>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();
}
}@{
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>
</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>
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 Learning: Creating and Using an Object
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
};
}
});@{
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>
</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>
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 Learning: Calling a Method of a Controller
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();
}
};
}
});@{
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>
</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>
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 Learning: Creating Methods Outside an Object
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();
};
}
});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 Learning: Ending the Lesson
|
|
||
| Previous | Copyright © 2017-2022, FunctionX | Next |
|
|
||