In this tutorial, we will give you conceptual and implementation information about AngularJS Module.
First we will explain the core concept of Modules and then we will create a simple application for the implementation understanding of the concept.
So, Let’s begin with the conceptual part.
AngularJS – Module
A module is a collection of the different block of codes which can be used in the angular application.
These codes contain information about directives, controllers, services, filters, different functions and values that can be used anywhere within the application.
Watch the live demo or download code from the link given below.
The basic syntax of a module is
angular.module('Module Name',[ 'Dependencies' ]);– Module Name: Name of the module to create. The same name will be used by the directive to retrieve module.
For example:-
// AngularJS module for the application
var myProduct = angular.module('myProduct', []);
// Controller for the application
myProduct.controller('productController', []);Here, there are two modules created. First module is created for the application with name myProduct and another module is created for the controller with name productController.
In application, these modules can be used by directives as,
<html ng-app="myProduct">
<head>
...
...
</head>
<body>
<div class="product-wrapper row" ng-controller="productController">
....
....
</div>
</body>
</html>– Dependencies: Sometimes a module depends upon another module, service or function. In such case, it is required to include it in the module as a dependency in order to use its functionality.
Dependencies should be written inside [] between quotes as,
// Controller for the application
myProduct.controller('productController', ['$scope', function($scope) {
// Product array containing values in JSON format
$scope.products = [
{
"prod_name": "Foogo-PRO Theme",
"prod_img": "Foogo_PRO_Theme",
"prod_price": "$59",
"download_link": "https://www.inkthemes.com/market/foogo-pro-wordpress-business-theme/",
},
{
"prod_name": "Video Member Theme",
"prod_img": "Video_Member_Theme",
"prod_price": "$119",
"download_link": "https://www.inkthemes.com/market/video-membership-wordpress-theme/",
}
]
}]); Here, the controller module depends upon $scope to store products information. So, $scope is included as a dependency and between quotes.
Important:
$scope is a special javascript object which connects controller with the view. The values stored by controller in the $scope object has accessed in the view part.
If you are using any function as a dependency then other included modules or services should be passed as an argument to the function.
For example: –
In above-mentioned code, $scope is included as a dependency in the controller and it is passed as an argument to the function to store products information.
That’s it.
Now, it time for the coding part. So, get ready.
First we will create a directory structure for the application. Follow the directory structure given below and create the same structure for your application.
Now, follow the steps given below:-
Step 1: – In index.php, write the code given below.
index.php
It is the core file of the single page application of angular. It will act as view and will display the content of the app.
<html ng-app="myProduct">
<head>
<title>AngularJS Directive Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Include AngularJS library -->
<script src="lib/angular/angular.min.js"></script>
<!-- Include jQuery library -->
<script src="js/jQuery/jquery.min.js"></script>
<!-- Include Bootstrap Javascript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="product-wrapper row" ng-controller="productController">
<a href="https://www.inkthemes.com/market/"><h1 class="wrapper-heading"><span><img src="img/inkthemes_logo.png" class="inkthemes_logo"></span>InkThemes Themes</h1></a>
<!-- Retieving each product data from the products array -->
<div class="single-product col-md-3 col-sm-6 col-xs-8 col-xs-offset-2 col-sm-offset-0" ng-repeat="product in products">
<div class="product col-md-12">
<p class="prod_title">{{product.prod_name}}</p>
<!-- Retrieving and using each product src in image tag -->
<img class="prod_img" ng-src="img/{{product.prod_img}}.png"/>
<div class="button-group form-group">
<!-- Retrieving price of each product -->
<div class="btn btn-success details">Price {{product.prod_price}}</div>
<!-- Show Buy Theme button -->
<a href="{{product.download_link}}" class="btn btn-warning details">Buy Theme</a>
</div>
</div>
</div>
</div>
</div>
<!-- Include controller -->
<script src="js/myController.js"></script>
</body>
</html>Step 2: – In myController.js, write the code given below.
myController.js
It is the main controller of the application. All modules and functions are defined in this file.
// AngularJS module for the application
var myProduct = angular.module('myProduct', []);
// Controller for the application
myProduct.controller('productController', ['$scope', function($scope) {
// Product array containing values in JSON format
$scope.products = [
{
"prod_name": "Foogo-PRO Theme",
"prod_img": "Foogo_PRO_Theme",
"prod_price": "$59",
"download_link": "https://www.inkthemes.com/market/foogo-pro-wordpress-business-theme/"
},
{
"prod_name": "Video Member Theme",
"prod_img": "Video_Member_Theme",
"prod_price": "$119",
"download_link": "https://www.inkthemes.com/market/video-membership-wordpress-theme/"
},
{
"prod_name": "Real Photography Theme",
"prod_img": "Real_Photography_Theme",
"prod_price": "$59",
"download_link": "https://www.inkthemes.com/market/real-photography-wordpress-theme/"
},
{
"prod_name": "Colorway Theme",
"prod_img": "Colorway_theme",
"prod_price": "$75",
"download_link": "https://www.inkthemes.com/market/colorway-wp-theme/"
},
{
"prod_name": "Geocraft Theme",
"prod_img": "geocraft_theme",
"prod_price": "$97",
"download_link": "https://www.inkthemes.com/market/geocraft-directory-listing-wordpress-theme/"
},
{
"prod_name": "BlackRiders Theme",
"prod_img": "Black_Riders_theme",
"prod_price": "$59",
"download_link": "https://www.inkthemes.com/market/lead-generation-wordpress-theme/"
},
{
"prod_name": "Videcraft Theme",
"prod_img": "Videcraft_theme",
"prod_price": "$97",
"download_link": "https://www.inkthemes.com/market/videocraft-wordpress-theme/"
},
{
"prod_name": "Variant Landing Page Theme",
"prod_img": "Variant_Landing_Page_Theme",
"prod_price": "$77",
"download_link": "https://www.inkthemes.com/market/landing-page-wordpress-theme/"
}
]
}]);Step 3:- Write the follwing CSS code in style.css.
Contain CSS for the Application design.
@import url(http://fonts.googleapis.com/css?family=Raleway);
ul{
list-style: none;
}
li{
display: block;
font-family: 'Raleway', sans-serif;
}
.product-wrapper {
padding-left: 45px;
padding-top: 10px;
padding-bottom: 10px;
min-height:900px;
font-family: 'Raleway', sans-serif;
}
.wrapper-heading{
text-align: center;
font-family: 'Raleway', sans-serif;
}
img.inkthemes_logo{
width: 50px;
margin-top: -5px;
margin-right: 5px;
}
.single-product{
vertical-align: top;
float: none;
display: inline-block;
}
.prod_img{
width: 100%;
margin-bottom: 10px;
}
.product {
background: #F1F1F1;
padding: 10px 10px 0 10px;
margin-left: -20px;
margin-bottom: 10px;
border-radius: 5px;
}
p.prod_title {
font-size: 16px;
font-weight: bold;
font-family: 'Raleway', sans-serif;
color: #615F5F;
}
.button-group{
text-align: center;
margin-bottom: 0;
}
.glyphicon-ok{
color:green;
}
.btn{
font-family: 'Raleway', sans-serif;
margin-bottom: 10px;
}
@media only screen and (max-width:480px){
.product-wrapper {
padding-left: 0;
}
.product {
min-width: 200px;
}
}
@media only screen and (max-width:991px) and (min-width: 481px){
.product-wrapper {
padding-left: 20px;
}
}Run the script and have fun!!!
Conclusion:
Keep reading our blog posts for more interesting concepts of AngularJS and provide us your feedback from the space given below.
