Hello friends, this article will provide you information about how to create AngularJS modules and link with each other, which is very easy and simple.
Modules are used to divide big application into smaller and understandable chunks. Which leads to understand and switch application modules very easily,
you can create packages with such modules like silver, gold, platinum packages.
Here we will create Admission, Fee, Exam and Transport modules. Combine these modules with each other and create another new module.
Step 1: We will create here four school modules i.e. Admission, Fee, Exam and Transport.
var swclassapp = angular.module("admissionModule", []);
swclassapp.controller("admissionModuleController", function ($scope) {
$scope.module = "Admission Module";
});
var swclassapp = angular.module("feeModule", []);
swclassapp.controller("feeModuleController", function ($scope) {
$scope.module = "Fee Module";
});
var swclassapp = angular.module("examModule", []);
swclassapp.controller("examModuleController", function ($scope) {
$scope.module = "Exam Module";
});
var swclassapp = angular.module("transportModule", []);
swclassapp.controller("transportModuleController", function ($scope) {
$scope.module = "Transport Module";
});
Step 2: We will create four packages i.e. Platinum, Silver, Gold and Diamond. Here we include different modules.
var swclassapp = angular.module("platinumPackage", ["admissionModule"]);
swclassapp.controller("platinumPackageController", function ($scope) {
$scope.package = "Package Includes Admission Module";
});
var swclassapp = angular.module("silverPackage", ["admissionModule","feeModule"]);
swclassapp.controller("silverPackageController", function ($scope) {
$scope.package = "Package Includes Admission, Fee Modules";
});
var swclassapp = angular.module("goldPackage", ["admissionModule", "feeModule", "examModule"]);
swclassapp.controller("goldPackageController", function ($scope) {
$scope.package = "Package Includes Admission, Fee and Exam Modules";
});
var swclassapp = angular.module("diamondPackage", ["admissionModule", "feeModule", "examModule", "transportModule"]);
swclassapp.controller("diamondPackageController", function ($scope) {
$scope.package = "Package Includes Admission, Fee, Exam and Transport Modules";
});
Step 3: Now we will use Diamond Package for our HTML view.
<div ng-app="diamondPackage">
<div ng-controller="admissionModuleController">
{{module}}
</div>
<div ng-controller="feeModuleController">
{{module}}
</div>
<div ng-controller="examModuleController">
{{module}}
</div>
<div ng-controller="transportModuleController">
{{module}}
</div>
<div ng-controller="diamondPackageController">
{{package}}
</div>
</div>
Finally Create new HTML file with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SW Class</title>
<style rel="stylesheet" href="/css/bootstrap.min.css"></style>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/angular.min.js"></script>
</head>
<body>
<div ng-app="diamondPackage">
<div ng-controller="admissionModuleController">
{{module}}
</div>
<div ng-controller="feeModuleController">
{{module}}
</div>
<div ng-controller="examModuleController">
{{module}}
</div>
<div ng-controller="transportModuleController">
{{module}}
</div>
<div ng-controller="diamondPackageController">
{{package}}
</div>
</div>
</body>
<script type="text/javascript">
var swclassapp = angular.module("admissionModule", []);
swclassapp.controller("admissionModuleController", function ($scope) {
$scope.module = "Admission Module";
});
var swclassapp = angular.module("feeModule", []);
swclassapp.controller("feeModuleController", function ($scope) {
$scope.module = "Fee Module";
});
var swclassapp = angular.module("examModule", []);
swclassapp.controller("examModuleController", function ($scope) {
$scope.module = "Exam Module";
});
var swclassapp = angular.module("transportModule", []);
swclassapp.controller("transportModuleController", function ($scope) {
$scope.module = "Transport Module";
});
var swclassapp = angular.module("platinumPackage", ["admissionModule"]);
swclassapp.controller("platinumPackageController", function ($scope) {
$scope.package = "Package Includes Admission Module";
});
var swclassapp = angular.module("silverPackage", ["admissionModule","feeModule"]);
swclassapp.controller("silverPackageController", function ($scope) {
$scope.package = "Package Includes Admission, Fee Modules";
});
var swclassapp = angular.module("goldPackage", ["admissionModule", "feeModule", "examModule"]);
swclassapp.controller("goldPackageController", function ($scope) {
$scope.package = "Package Includes Admission, Fee and Exam Modules";
});
var swclassapp = angular.module("diamondPackage", ["admissionModule", "feeModule", "examModule", "transportModule"]);
swclassapp.controller("diamondPackageController", function ($scope) {
$scope.package = "Package Includes Admission, Fee, Exam and Transport Modules";
});
</script>
</html>
The output will be as follows.
Admission Module
Fee Module
Exam Module
Transport Module
Includes Admission, Fee, Exam and Transport Modules
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.