Introduction to Modules
Introduction to Modules
Fundamentals of Modules
A module is a group of objects and functions that solve a specific problem. To get a module, you must create it by writing JavaScript code. You have various options. You can create a module in the webpage where it is needed or you can create it in its own file. In the same way, you can create and use as many modules as you need for your web project.
Practical Learning: Introducing AngularJS Controllers
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; }
using System.Web;
using System.Web.Optimization;
namespace CableCompany1
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/angular.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/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" ng-app>
@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 CableCompany1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult BillEvaluation()
{
return View();
}
}
}@{
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">
<fieldset>
<legend>Cable TV Services</legend>
<div class="row">
<div class="col-md-6">
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" ng-model="CableTVBasicFee" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" ng-model="DVRService" />
</div>
<div>
<label for="SportsPackage">Sports Package:</label>
<input type="number" id="SportsPackage" ng-model="SportsPackage" />
</div>
<div>
<span class="caption bold">Sub-Total:</span>
<span class="resulting-value">{{(CableTVBasicFee + DVRService + SportsPackage).toFixed(2)}}</span>
</div>
</div>
<div class="col-md-6">
<div>
<span class="caption bold">FCC Fee:</span>
<span class="resulting-value">{{((CableTVBasicFee + DVRService + SportsPackage) * 0.00250881).toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">County Taxes:</span>
<span class="resulting-value">{{((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0072668) | number:2}}</span>
</div>
<div>
<span class="caption bold">State Taxes:</span>
<span class="resulting-value">{{((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0042493) | number:2}}</span>
</div>
<div>
<span class="caption bold">Payment Amount:</span>
<span class="resulting-value">{{(CableTVBasicFee + DVRService + SportsPackage + fccFee + ((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0072668) + ((CableTVBasicFee + DVRService + SportsPackage + fccFee) * 0.0042493)) | number:2}}</span>
</div>
</div>
</div>
</fieldset>
</form>
<!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")
<script src="~/Scripts/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/CableCompany.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
. . .
</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>
@{
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>
<fieldset>
<legend>Cable TV Services</legend>
<div class="row">
. . .
</div>
</fieldset>
</form>Cable TV Basic Fee: 28.57 DVR Service: 5.25 Sports Package: 7.86
A Local Module
A module is local if it is created in the webpage (or view) that will use it. In this case, you must create a section delimited by the SCRIPT tag as done in JavaScript. Here is an example:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
@Scripts.Render("~/bundles/jquery")
<script>
</script>
In the SCRIPT tag, you can optionally add the TYPE attribute and set its value as TEXT/JAVASCRIPT.
In the SCRIPT tag, you will write the desired JavaScript code. The primary formula to create a module is:
angular.module('module-name', []);
When creating a module, you must give it a name. The name is included in single or double-quotes. The name can be anything: it doesn't follow the rules of names of variables or objects. Here is an example:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
@Scripts.Render("~/bundles/jquery")
<script>
angular.module("Water Distribution Company", . . .);
</script>
To make it simple, you should use one-word names. If the name is made of different words, you should use the camelNotation. Here is an example:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
@Scripts.Render("~/bundles/jquery")
<script>
angular.module('appWaterDistributionCompany', . . .);
</script>
The [] symbol is a placeholder. Below the line that creates the module, you will write the necessary code.
If you are planing to use a module in more than one place, you can declare a variable and assign the module statement to it. The variable is declared as done in JavaScript, using the var keyword. Here is an example:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
@Scripts.Render("~/bundles/jquery")
<div ng-app="customized">
</div>
<script>
var appModule = angular.module('appBusiness', []);
</script>
Of course, you can declare other variables in the script section.
An External Module
If you create a module in a document, that module can be accessed only in that webpage. If you want to use a module in more than one document, you can create it in a file. If you are working in Microsoft Visual Studio, in the Solution Explorer, right-click Scripts -> Add -> New Item... In the left frame of the Add New Item dialog box, click Web and, in the middle frame, click JavaScript file. Give a name to the file and click Add. Otherwise, start a document and type the necessary code without the <script> section. Here is an example:
var appModule = angular.module('toysModule', []);
In this case, save the file with a .js extension. After creating the file, before using the module, you must create a link to the file. The link is created as done in JavaScript. That link must come after the link for AngularJS. This means that, one way or another, you must make sure the interpreter/compiler will be aware of the AngularJS library/link before reaching the module's external file. One way you can take care of this is that, in your HTML document, first provide a link to AngularJS, followed by a link to your module file. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Children Toys Store</title>
<script src="Scripts/angular.min.js"></script>
<script src="toys.js"></script>
</head>
<body>
<h1>Children Toys Store</h1>
</body>
</html>
In a typical ASP.NET application (or by tradition, and this is not a requirement), you save/put your script files in a folder named Scripts. In any case, make sure you provide the appropriate path to the file. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Children Toys Store</title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/toys.js"></script>
</head>
<body>
<h1>Children Toys Store</h1>
</body>
</html>
Using a Module
To use a module, in the document, you can assign the name of the module to an ng-app in the desired tag. Here is an example:
<!DOCTYPE html>
<html ng-app="toysModule">
<head>
<meta charset="utf-8" />
<title>Children Toys Store</title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/toys.js"></script>
</head>
<body>
<h1>Children Toys Store</h1>
</body>
</html>
In an ASP.NET MVC application, if you want to use the module throughout the website, you can open the _Layout.cshtml file and assign the module to the ng-app attribute. Here is an example:
<!DOCTYPE html>
<html ng-app="validation">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
. . .
</body>
</html>
If you want to use the module in only some webpages, open the webpage and assign the module name to the ng-app attribute you will have applied. Here is an example:
@{
ViewBag.Title = "Exercise";
}
<h2>Exercise</h2>
@Scripts.Render("~/bundles/jquery")
<div ng-app="customized">
</div>
<script>
angular.module('customized', []);
</script>
Practical Learning: Introducing Modules
var billModule = angular.module('evaluationModule', []);@{
ViewBag.Title = "Bill Evaluation";
}
<script src="~/Scripts/BillPreparation.js"></script>
<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="evaluationModule">
<fieldset>
<legend>Cable TV Services</legend>
. . .
</fieldset>
</form>|
|
||
| Previous | Copyright © 2017-2022, FunctionX | Next |
|
|
||