In this tutorial, we are going to create a simple application using angularjs-directives. This application will contain the following feature.
- Display all the available themes product.
- Each theme product contains a product image, show features button, price, features section, Hide Features and Buy Themes buttons.
- When a user clicks on a product’s Show Features button, the features section will be displayed and Show Features button would be hidden.
- And when user will click on Hide Features button available under features section, the feature section will be hide and Show features button will appear again.
- Features section also contains a Buy Theme buttons will redirect users to the related product page for purchasing.
So, let’s begin and have a look at the AngularJS Directives.
AngularJS Directive
AngularJS directives are the commands which communicate with angular library and tell angular to do a job on the HTML tags.
Since this task is performed on the HTML tags, hence directives have written in the HTML tags as an attribute containing ng- prefix.
e.g: – ng-app, ng-model, ng-repeat, ng-controller etc.
There are a number of inbuilt directives available in AngularJS with various functionalities. But in this blog, we will cover some of the important and commonly used directives.
For better and clear understanding, we have created a demo using these directives which are available downward.
Watch the live demo or download code from the link given below.
Let’s understand the functionality and uses of these directives one by one: –
ng-app:
ng-app directive tells angular to load the angular library in the application. It plays the key role in the application so should be used as an attribute to the root element of the application such as, HTML tag or body tag.
For example: –
<html ng-app="myProduct">Here myProduct is name of the application that we used in this blog. This name is defined in the module which is written inside the myController.js file of the js folder.
Modules helps to break the angularjs code into parts so that codes can be read, managed and used properly inside the application. Modules can be written in the following way:-
var myProduct = angular.module('myProduct', []);For more information about Modules, keep reading our blogs. We will include it in our next article.
But, if you don’t have any module, you can leave the application name empty.
<html ng-app="">ng-model:
ng-model directive is basically used to bind the users input. Hence, it is used with input, select, textarea and other tags which help users to provide input.
For example: –
<input type="text" ng-model="data"/>
<p>Entered Data: {{data}}</p>
Here, ng-model bind user’s input with data variable and will show the user’s entered data in the paragraph tag where {{data}} is written.
Note: – In angular, {{ expression }} is called as expression and is used to display the values.
ng-controller:
ng-Controller directive helps to use the controller in the HTML tags.
For example: –
<div class="product-wrapper row" ng-controller="productController">
...
...
</div>Here, productController is the name of controller we have used in this blog. This name is defined in the module which is written inside the myController.js file of the js folder.
Controllers are used to add behaviour to the html tags using functions and values.
// AngularJS module for the application var myProduct = angular.module('myProduct', []); // Controller for the application myProduct.controller('productController', ['$scope', function($scope) { ... ... });Note: – You can read about controllers in our upcoming blog.
ng-repeat:
ng-repeat directive is used to extract data from the javascript object array or JSON array.
Here, we have a json data name products which contains array containing different product values.
// AngularJS module for the application
var myProduct = angular.module('myProduct', []);
// Controller for the application
myProduct.controller('productController', ['$scope', function($scope) {
$scope.products = [
{ "prod_name": "Foogo-PRO Theme","prod_img": "Foogo-PRO_Theme","prod_price": "$59" ,"detail_status": false,"detail_hide_status": false },
...
...
{ "prod_name": "Colorway Theme", "prod_img": "Colorway_theme","prod_price": "$75", "detail_status": false,"detail_hide_status": false}
]
}]);To access each product names from products array, you can use ng-repeat as:-
<div ng-repeat="product in products">
<p class="prod_title">{{product.prod_name}}</p>
</div>ng-src:
ng-src directive used to add src in the image tags. These src should be generated or used in the angularjs application.
For example: –
<div class="single-product" ng-repeat="product in products">
<img class="prod_img" ng-src="img/{{product.prod_img}}.png"/>
</div> Here, product.prod_img variable contains the name of the each product image which is available in img folder of the application. prod_img is defined in the json array just above under ng-repeat directive section.
Traditional src attribute cannot be used in angularjs application because angularjs loads after the DOM(Document Object Model). So, will generate a javascript error while loading the page.
ng-click:
ng-click directive triggers an event when a click action is performed on the HTML tags in which ng-click is used as an attribute.
For example: –
<div class="single-product" ng-repeat="product in products">
...
<button ng-click="showFeature($index)">Show Features</button>
...
</div>Here, ng-click is used in button tag as an attribute. So, whenever this button will be clicked, showFeature() function will be called passing an argument $index.
Note: – $index is the index number of the product available in the products array.
showFeature() function is defined in the controller which is written inside the myController.js file of the js folder.
// AngularJS module for the application
var myProduct = angular.module('myProduct', []);
// Controller for the application
myProduct.controller('productController', ['$scope', function($scope) {
...
...
$scope.showFeature = function(index) {
for (var i = 0; i < $scope.products.length; i++) {
$scope.products[i].detail_status = false;
$scope.products[i].detail_hide_status = false;
$scope.products[index].detail_status = true;
$scope.products[index].detail_hide_status = true;
}
}
}]);showFeature() basically updates the values of detail_status and detail_hide_status variable of each product. Their status are used inside ng-show and ng-hide directives to show/hide the details of the products.
ng-show:
ng-show directive controls the displaying behaviour of an HTML element. It shows or hide the element based on the values of the expression used in the ng-show directive.
For example: –
<div class="single-product" ng-repeat="product in products">
...
<button ng-show="product.detail_status">Hide Features</button>
...
</div>Here, the button Hide Features will be displayed when the detail_status variable of the product will be true. detail_status variable is defined in the json array just above under ng-repeat directive section.
ng-hide:
Like ng-show directive, ng-hide directive also controls the displaying behaviour of an HTML element but, works in reverse i.e, when the expression contains true value, it will hide that HTML element and will show the element when the value is false.
For example: –
<div class="single-product" ng-repeat="product in products">
...
<div ng-hide="product.detail_hide_status">Price {{product.prod_price}}</div>
...
</div>Here, the price of the product will be hidden when the detail_hide_status variable of the product will be true. detail_hide_status variable is defined in the json array just above under ng-repeat directive section.
Now, let’s have a look at the application coding part.
First, be careful about the directive structures of the application. Every file should be in their proper place so that we can build the application easily in proper and managed way.
Please follow the image given below and make your application directory accordingly.
Now, follow the steps given below.
Step 1: – In index.php file, write the following code: –
index.php
It is the core file for this single page application. It contains all the used Angular directives along with related HTML tags.
<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">
<!-- Show Features button -->
<button class="btn btn-info details" ng-click="showFeature($index)" ng-hide="product.detail_hide_status">Show Features</button>
<!-- Retrieving price of each product -->
<div class="btn btn-success details" ng-hide="product.detail_hide_status">Price {{product.prod_price}}</div>
</div>
<ul class="prod_details col-md-12" ng-show="product.detail_status">
<!-- Retrieving features of each product -->
<li class="feature" ng-repeat="feature in product.prod_feature"><span class="glyphicon glyphicon-ok"></span>
{{feature}}
</li>
</ul>
<div class="button-group form-group">
<!-- Hide Features button -->
<button class="btn btn-danger details" ng-click="hideFeature($index)" ng-show="product.detail_status">Hide Features</button>
<!-- Buy Theme button -->
<a href="{{product.download_link}}" class="btn btn-warning details" ng-show="product.detail_status">Buy Theme</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Include controller -->
<script src="js/myController.js"></script>
</body>
</html>Step 2: – In myController.js file, write the following code: –
myController.js
It contains the main controller of the application and also have different modules in it. All the functions and variables accessed by directives have written 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",
"prod_feature": ["Awesome Slider",
"Completely Responsive",
"Full Documentation",
"Styling Option",
"Custom Templates",
"Custom Widgets",
"Social Icons",
"Compatibility"
],
"download_link": "https://www.inkthemes.com/market/foogo-pro-wordpress-business-theme/",
"detail_status": false,
"detail_hide_status": false
},
{
"prod_name": "Video Member Theme",
"prod_img": "Video_Member_Theme",
"prod_price": "$119",
"prod_feature": ["Awesome Slider",
"Completely Responsive",
"Full Documentation",
"Styling Option",
"Custom Templates",
"Custom Widgets",
"Social Icons",
"Compatibility"
],
"download_link": "https://www.inkthemes.com/market/video-membership-wordpress-theme/",
"detail_status": false,
"detail_hide_status": false
},
{
"prod_name": "Real Photography Theme",
"prod_img": "Real_Photography_Theme",
"prod_price": "$59",
"prod_feature": ["Awesome Slider",
"Completely Responsive",
"Full Documentation",
"Styling Option",
"Custom Templates",
"Custom Widgets",
"Social Icons",
"Compatibility"
],
"download_link": "https://www.inkthemes.com/market/real-photography-wordpress-theme/",
"detail_status": false,
"detail_hide_status": false
},
{
"prod_name": "Colorway Theme",
"prod_img": "Colorway_theme",
"prod_price": "$75",
"prod_feature": ["Awesome Slider",
"Completely Responsive",
"Full Documentation",
"Styling Option",
"Custom Templates",
"Custom Widgets",
"Social Icons",
"Compatibility"
],
"download_link": "https://www.inkthemes.com/market/colorway-wp-theme/",
"detail_status": false,
"detail_hide_status": false
},
{
"prod_name": "Geocraft Theme",
"prod_img": "geocraft_theme",
"prod_price": "$97",
"prod_feature": ["Awesome Slider",
"Completely Responsive",
"Full Documentation",
"Styling Option",
"Custom Templates",
"Custom Widgets",
"Social Icons",
"Compatibility"
],
"download_link": "https://www.inkthemes.com/market/geocraft-directory-listing-wordpress-theme/",
"detail_status": false,
"detail_hide_status": false
},
{
"prod_name": "BlackRiders Theme",
"prod_img": "Black_Riders_theme",
"prod_price": "$59",
"prod_feature": ["Awesome Slider",
"Completely Responsive",
"Full Documentation",
"Styling Option",
"Custom Templates",
"Custom Widgets",
"Social Icons",
"Compatibility"
],
"download_link": "https://www.inkthemes.com/market/lead-generation-wordpress-theme/",
"detail_status": false,
"detail_hide_status": false
},
{
"prod_name": "Videcraft Theme",
"prod_img": "Videcraft_theme",
"prod_price": "$97",
"prod_feature": ["Awesome Slider",
"Completely Responsive",
"Full Documentation",
"Styling Option",
"Custom Templates",
"Custom Widgets",
"Social Icons",
"Compatibility"
],
"download_link": "https://www.inkthemes.com/market/videocraft-wordpress-theme/",
"detail_status": false,
"detail_hide_status": false
},
{
"prod_name": "Variant Landing Page Theme",
"prod_img": "Variant_Landing_Page_Theme",
"prod_price": "$77",
"prod_feature": ["5 Layouts, 1 Dashboard",
"Create Desired Form",
"Powerful admin Panel",
"Instant Setup",
"Amazing features",
"Conversion Optimized"
],
"download_link": "https://www.inkthemes.com/market/landing-page-wordpress-theme/",
"detail_status": false,
"detail_hide_status": false
}
]
$scope.showFeature = function(index) {
for (var i = 0; i < $scope.products.length; i++) {
$scope.products[i].detail_status = false;
$scope.products[i].detail_hide_status = false;
$scope.products[index].detail_status = true;
$scope.products[index].detail_hide_status = true;
}
}
$scope.hideFeature = function(index) {
$scope.products[index].detail_status = false;
$scope.products[index].detail_hide_status = false;
}
}]);Step 3: – In style.css file, write the following code: –
style.css
Includes basic styling of HTML elements.
@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;
}
ul.prod_details {
background: #F3D8D8;
padding: 10px 10%;
font-family: 'Raleway', sans-serif;
}
li.feature{
width: 100%;
margin-bottom: 5px;
}
.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;
}
}Now, run the code and enjoy the application.
Conclusion: –
Hope this blog will give you a clear idea about the AngularJS Directives. Keep reading our blogs for more interesting topics on AngularJS. Let us know about your feedback from the space given below.
