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 LearningPractical Learning: Introducing AngularJS Controllers

  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 CableCompany1
  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 CableCompany1 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

    In the Solution Explorer, expand Scripts and notice the angular files
  16. In the Solution Explorer, expand App_Start and double-click BundleConfig.cs
  17. Change the document as follows:
    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"));
            }
        }
    }
  18. In the Solution Explorer, click the button on the left of Views to expand it. In the same way, expand the Shared folder
  19. Under Shared, double-click _Layout.cshtml to open it
  20. 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" ng-app>
            @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>
  21. In the Solution Explorer, click the button on the left of Controllers to expand it
  22. Under Controllers, double-click HomeController.cs to open it
  23. Add a method named BillEvaluation as follows:
    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();
            }
        }
    }
  24. In the class, right-click inside the BillEvaluation() method and click Add View...
  25. In the dialog box, make sure the text box displays BillEvaluation and click Add
  26. 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">
        <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>
  27. To execute the project, press Ctrl + F5

    AngularJS Fundamentals

  28. In the Cable TV Basic Fee text box, type 24.50

    Introduction to Controllers in AngularJS

  29. In the DVR Service text box, type 4.68

    Introduction to Controllers in AngularJS

  30. In the Sports Package, type 7.74

    Introduction to Controllers in AngularJS

  31. Close the browser and return to your programming environment
  32. Click the _Layout.cshtml tab to access it
  33. Remove the ng-app attribute from the bottom div tag:
    <!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">&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>
    
  34. Click the BillEvaluation.cshtml tab to access it
  35. Add the ng-app attribute to the FORM tag:
    @{
        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>
  36. To execute, press Ctrl + F5
  37. Enter some values as follows:
    Cable TV Basic Fee: 28.57
    DVR Service: 5.25
    Sports Package: 7.86

    Introduction to Controllers in AngularJS

  38. Close the browser and return to your programming environment

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 LearningPractical Learning: Introducing Modules

  1. In the Solution Explorer, right-click Scripts -> Add -> New Item...
  2. In the left frame of the Add New Item dialog box, click Web and, in the middle frame, click JavaScript File
  3. Change the Name of the file to BillPreparation
  4. Click Add
  5. Change the document as follows:
    var billModule = angular.module('evaluationModule', []);
  6. Click the BillEvaluation.cshtml tab to access the file
  7. From the Scripts folder of the Solution Explorer, drag BillPreparation and drop it in the BillEvaluation.cshtml document above the h1 line
  8. Still in the document, assign "evaluationModule" to the ng-app attribute:
    @{
        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>
  9. To save the file, press Ctrl + S
  10. Close your programming environment

Previous Copyright © 2017-2019, FunctionX Next