By kswaughs | Monday, June 20, 2016

AngularJS Nested Directives Example

This post explains how to create custom nested directives in AngularJS application.

Nested Directive means a directive under another directive.

In this example, we will display birthdays of famous people born in a specific month.

HTML & AngularJS code
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
        
    var app = angular.module("NestedDirectiveExample",[])
    app.directive('month',function(){
        return{
            transclude:true,
            restrict:'E',
            scope: {
                nm: '@'
            },
            template:'<div class="start">'+
                     '<div class="mtitle">{{nm}}</div>'+
                     '<div ng-transclude></div>'+
                     '</div>'
            
        }
    });

    app.directive('entry',function(){
        return{
            restrict:'E',
            scope: {
                dt: '@',
                nm: '@',
                car:'@'
            },            
            template : '<div class="grid">'+
                       '<div class="grid-left">{{dt}}</div>'+
                       '<div class="grid-center">{{nm}}</div>'+
                       '<div class="grid-right">{{car}}</div>'+
                       '</div>'
           
        }
    });
</script>
</head>
<body>
    <H4>Birth Days of famous People</H4>
    <div ng-app="NestedDirectiveExample">
    <month nm="January">
        <entry  dt="6"  nm="Rowan Atkinson" car="Actor"></entry>
        <entry  dt="8"  nm="Stephen Hawking" car="Scientist"></entry>
        <entry  dt="11" nm="Rahul Dravid" car="Cricketer"></entry>
    </month>
    <month nm="April">
        <entry  dt="7"  nm="Jackie Chan" car="Actor"></entry>
        <entry  dt="24" nm="Sachin Tendulkar" car="Cricketer"></entry>
    </month>
    <month nm="December">
        <entry  dt="18"  nm="Steven Spielberg" car="Director"></entry>
        <entry  dt="19"  nm="Ricky Ponting" car="Cricketer"></entry>
        <entry  dt="22"  nm="Srinivasa Ramanujan" car="Scientist"></entry>
    </month>
    </div>
</body>
</html>

styles.css
.start{
    padding-bottom: 30px;
}
.mtitle{ 
    padding:10px 0px 10px 15px;
    width : 600px;
    font-weight : bold;
    font-family: Verdana, Geneva, sans-serif;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    background: #008000;
    color:#ffffff;
    font-size: 14px;
}
.grid{ 
    width: 600px; 
    padding:20px 0px 30px 0px;
    font-weight : bold;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
} 
.grid-left{ 
    width:45px; 
    float:left; 
    padding:10px 0px 10px 0px;
    background: #3399ff;
    color:#ffffff;
    border-radius: 5px;
    text-align : center;
} 
.grid-center{ 
    width:310px; 
    float:left; 
    padding:10px 0px 10px 15px;
    border-radius: 2px;
    margin-left:10px;
    background: #ff9966;
    color:#800000;
} 
 .grid-right{ 
    width:180px; 
    float:left; 
    padding:10px 0px 10px 15px;
    margin-left:10px;
    border-radius: 3px;
    background: #ff9999;
    color:#990000;
 }

Output

Birth Days of famous People


Recommend this on


By kswaughs | Monday, June 13, 2016

AngularJS Directive with arguments

An AngularJS Directive is an extension of HTML with new attributes.

AngularJS provides many built-in directives that offers functionality to our applications like ng-app, ng-repeat.

AngularJS also let us create our own directives. These new directives are created by using .directive function

Use Case

Below Example shows that a custom directive is used to print the list of blog posts available in www.kswaughs.com where the label of the blog post is passed as an attribute of that directive element in the HTML code.

This directive first displays the label that is passed and allows an on click event and calls a rest service to get available blog posts.


HTML & AngularJS code
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
    var app = angular.module('DirectiveExample', []);
    app.directive('blogPostSummary', function() {
    
        return {
     
            template: '<div class="ajtitle" ng-click="getBlogPosts()">'+
                      'Posts of {{label}}'+
                      '</div>' +
                      '<ul class="list">'+
                      '<li ng-repeat="entry in myData" >'+
                      '<a class="entry"'+
                      'ng-repeat="link in entry.link | filter:{rel: \'alternate\'}"' +
                      'href="{{link.href}}">{{entry.title.$t}}</a>'+
                      '</li>'+
                      '</ul>',
            scope: {
                label: '@'
            },
     
            link: function(scope, elem, attrs) {
            },
    
            controller : function($scope, $http) {

                $scope.getBlogPosts = function() {

                $http.get(
                    "http://www.kswaughs.com/feeds/posts/summary/-/"+ 
                    $scope.label + "?alt=json")
                    .then( function(response) {
                        $scope.myData = response.data.feed.entry;
                    });
                };
            },
        }; 
  
    });
</script>
</head>
<body>
    <div ng-app="DirectiveExample">
        <blog-post-summary label="AngularJS"></blog-post-summary>
        <blog-post-summary label="Camel"></blog-post-summary>
        <blog-post-summary label="Junit"></blog-post-summary>
    </div>
</body>
</html>

styles.css
.ajtitle { 
padding:10px 0px 10px 15px;
width : 550px;
font-weight : bold;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}

.entry {
text-decoration: none;
color : blue;
}

.list {
list-style: none;
width : 500px;
}

.list li{
 border-bottom:1px solid #e0e0e0;
 padding:10px 0px 10px 0px;
}

Demo : click on below tabs



Recommend this on


By kswaughs | Thursday, June 9, 2016

AngularJS Rest Service Example

Use Case
1. Display the list of topics available in www.kswaughs.com
2. Allows user to enter the topic and prints error message if topic is not available
3. Make a rest service call with GET method and print titles of requested topic blog posts

HTML & AngularJS code
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
    var app = angular.module('AngularRestApp', []);
    app.controller('restExample', function($scope, $http) {

        $scope.topics = [ 'Java', 'Camel', 'Apache-CXF', 'Junit', 'REST', 'spring' ];

        $scope.submit = function() {

            if ($scope.topics.indexOf($scope.topic) == -1) {
                $scope.error = 'Entered Topic is Not available.' +
                               ' Also, It is a Case sensitive';
            } else {
                $scope.error = '';
                $scope.getBlogPosts();
            }
        };

        $scope.getBlogPosts = function() {

            $http.get(
                    "http://www.kswaughs.com/feeds/posts/summary/-/"
                            + $scope.topic + "?alt=json").then(
                    function(response) {
                        $scope.myData = response.data.feed.entry;
                        $scope.myPost = $scope.topic;
                    });

        };

    });
</script>
</head>
<body>
    <div ng-app="AngularRestApp" ng-controller="restExample">
        <b>List of topics available in www.kswaughs.com</b>
            <ul>
                <li ng-repeat="x in topics">{{$index+1}} {{x}}</li>
            </ul>
            <br/>    
            <label>Topic:</label>
            <input type="text" ng-model="topic" placeholder="Enter topic here"> 
            <input type="button" value="Get Posts" ng-click="submit()" />

        <p ng-bind="error" style="color:red"></p>
        <hr />
        <p>
            <b>Posts of {{myPost}} </b>
        </p>
        <ul>
            <li ng-repeat="entry in myData">
                <a ng-repeat="link in entry.link | filter:{rel: 'alternate'}"
                href="{{link.href}}">{{entry.title.$t}}</a>
            </li>
        </ul>
    </div>
</body>
</html>

DEMO


List of topics available in www.kswaughs.com
  • {{$index+1}} {{x}}

 

Posts of {{myPost}}


Recommend this on


Subscribe to: Comments (Atom)