Event based communication between controllers.


Every angular application has a single root Scope ($rootScope). All the scopes are its descendants.

Scopes can generate an  events by emitting ($emit) or broadcasting ($broadcast). Apart from generating events, scope can listen to events as well. Its is achieved by using the $scope.$on 

$emit, $broadcast and $on follow the standard "publish / subscribe" design pattern.


Understanding the $scope methods for event based communication between angular controllers

How to debug minified JavaScript files


We can debug JavaScript files by placing the debug / break points in the dev tools. Generally the JavaScript files on the production are minified.

To debug such minified files, Web browsers provides the "Pretty print" feature which un-minifies the source file.

• How to un-minify JavaScript file in Chrome

• How to un-minify JavaScript file in Firefox

• How to un-minify JavaScript file in Internet Explorer

(function(){
 'use strict';
 angular.module('ngDialog',[]);
})();
(function(){
 'use strict';
 angular.module('ngDialog').directive('ngDialog',
  directiveFunc);
 directiveFunc.$inject = [ '$templateCache','$filter'];
 
 function directiveFunc($templateCache,$filter) {
  var dialogBoxConfig = {
   theme: 'bootstrap',
  };
  return {
   restrict : 'AE',
   transclude: true,
   scope : {
    id :"@dialogid",
    header:"@header",
    message:"@message",
    button: "@button",
    theme : "@theme"
   },
   link : function(scope,element,attr) { 
    var buttonAttributeText = attr.button;
    if(buttonAttributeText!= undefined && buttonAttributeText!=''){ 
     var buttonList = null;
     var buttonListJSON = [];
     if(buttonAttributeText.indexOf(",") > 0) {
      buttonList = buttonAttributeText.split(",")
     }else {
      buttonList = createArrayFromObject(buttonAttributeText);
     }
     angular.forEach(buttonList,function(buttonDetails,index){
      var buttonAttributes = null;
      if(buttonDetails.indexOf("|") > 0 ){
       buttonAttributes = buttonDetails.split("|");
      }else {
       //debugger;
       buttonAttributes = createArrayFromObject(buttonDetails.trim()); 
      }      
      buttonListJSON.push({'buttonLabel':buttonAttributes[0],'buttonClickEventFunction':buttonAttributes[1]});
      scope.buttonListJSON = buttonListJSON;
     });
    }else {
     throw "No buttons provided. e.g  ";     
    }
    var messageAttributeText = attr.message;
    if(messageAttributeText!=undefined && messageAttributeText!=''){ 
     var messageList = null;
     var messageListJSON = [];
     if(messageAttributeText.indexOf(",") > 0) {
      messageList = messageAttributeText.split(",")
     }else {
      messageList = createArrayFromObject(messageAttributeText);
     }
     angular.forEach(messageList,function(buttonDetails,index){
      
      var messageAttributes = createArrayFromObject(buttonDetails.trim()); 
      messageListJSON.push({'messageLabel':messageAttributes[0]});
      scope.messageListJSON = messageListJSON;
     });
    }else {
     throw "No dialog message body provided. e.g  ";
    }
   },
   //templateUrl : config.modalsDir+'ngDialog.html',
   //templateUrl: 'tmpls/'+theme+'.html',
    templateUrl: function(tElement, tAttrs) {
     var _theme  = '';
     if(tAttrs.theme === undefined ){
      _theme = 'BOOTSTRAP';
     }else {
      _theme = $filter('uppercase')(tAttrs.theme);
     }      
       if (_theme === 'STANDARD') {  return 'tmpls/standard.html';}
       if (_theme === 'CUSTOM') {  return 'tmpls/'+tAttrs.theme+'.html';}
       if (_theme === 'BOOTSTRAP') {  return 'tmpls/bootstrap.html' };
   },
   controller : function($scope) {
    if($scope.theme === undefined){
     $scope.theme = 'bootstrap';
    }
    $scope.hasValue = function(val){
     var value = $scope.$parent[val.trim()];
     return (value !== null && angular.isDefined(value) && value !== '');
    }
    $scope.myclose = function(arg){
     $("#" + $scope.id).css({
      display : "none"
     });
     if(angular.isDefined(arg) && $scope.hasValue(arg)){
      var funcCall = "$scope.$parent."+arg+"()"; 
      $()
      var retValue = eval(funcCall);
     }
    }
   },
  };
 }
})();

angular.module('ngDialog')
 .run(['$templateCache',function($templateCache){
  $templateCache.put('tmpls/standard.html',
   '

'
    +'


' 
    + '


' 
    + '


 {{ header}}
' 
    + '


' 
    + '


{{messageAttributes.messageLabel}}
' 
    + '
' 
    + '

' 
    + '{{buttonAttributes.buttonLabel }}' 
    + '

' 
    + '
' 
    + '
' 
    + '
');
   $templateCache.put('tmpls/bootstrap.html',
   '

'
    +'


'
    + '


' 
    +  '


' 
    +   '×' 
    +    '


{{header}}
'
    +  '
' 
    +  '


{{message}}' 
    +  '
'
    +  '


' 
    +       '{{buttonAttributes.buttonLabel }}'
    +  '
' 
    + '
' 
    +'
' 
   +'
');

 }]);
 
 function createArrayFromObject(object) {
  var result = [];
  if (angular.isArray(object)) {
   //it is array
   result = object;
  }else if (object) {
   result.push(object);
  }
  return result;
 }
 

CSS :

.ng-dlg-bg > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.ng-dlg {
    text-align: left;
    background: #eaeced;
    width: 350px;
    box-shadow: 0 7px 15px #80898f;
    border-radius: 2px;
    margin: 0 auto;
    display: table;
    position: relative;
}
.ng-dlg > h3 {
    font-weight: normal;
    padding: 15px 20px 10px 20px;
    border-radius: 2px 2px 0 0;
    background: #fff;
    border-bottom: 1px solid #dadcdd;
    font-size: 18px;
    color: #676a6f;
    margin: 0;
}
.ng-dlg > p {
    text-align: right;
    padding: 15px 20px;
    margin: 0;
}
.ng-dlg > p > button {
    width: auto;
    padding: 5px 25px;
    min-width: 80px;
    margin: 0 0 0 5px;
}
.ng-dlg > div {
    margin: 15px 20px 0 20px;
}
.ng-dlg > div > p {
    margin: 7px 0 0 0;
    padding: 0;
}

.ng-dlg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 500;
}
.ng-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #73808c;
    z-index: 499;
    display: none;
}

Licence : MIT

Lifecycle of AngularJS directive. 

AngularJS comes with rich set of in built directives which adds a specific behavior to the HTML markes by transforming the DOM elements.
Some examples of directives are ngBind, ngModel.

AngularJS provides a way to create custom directives as well.

In this tutorial we will understand the directive life cycle and how we can create the custom directive in the consecutive one.

In case of ng-app directive, AngularJS is initialized automatically as soon as HTML document is loaded. AngularJS looks for the directive "ng-app" in the HTML elements. This element then becomes the root of the angular application. "ng-app" directive auto initializes the angular application. This process is called "auto bootstrapping" although we can manually bootstrap angular application.

During the bootstrap process, AngularJS
1. Loads the angular module mentioned within the ng-app directive
2. Creates $injector service responsible for DI in the application.
3. Runs the $compile service.

Typical flow diagram having three directive

1.The compilation Phase:

$compile service looks at the text and attributes of the DOM element. Identifies the directives and embedded expressions. Registers watch for these expressions and updates the UI during angular digest cycle. The compile service compiles the DOM from root element and traverse down the DOM by using depth first traversal algorithm.
During this phase DOM element and its attributes are identified as directive. The directive names are normalized using camleCase. e.g.

• 1. ng-app is normalized as ngApp,
• 2. my-custom-directive is normalized as myCustomDirective
• 3. x-my-custom-directive is normalized as myCustomDirective
• 4. data-my-custom-directive is normalized as myCustomDirective
• 5. x: my: custom: directive is normalized as myCustomDirective
• 6. data:my:custom:directive is normalized as myCustomDirective

':', '-' characters are converted to the camelCase
'data', 'x' are removed from the element and attributes.

Linking phase:

2.  Controller functions: 
After compilation controller and followed by pre-linking function is executed respectively for each directive.
controller facilitates the communication between child and parent directive.  The significance of the controller inside the directive is to
1. modify the $scope of the template and
2 if requested by the child controller, this controller function / object is passed to the child controller and both the controllers can communicate with each other

3. Pre link functions :
After this pre-link function is called. This function can be used manipulate the directive template by appending or prepending.  The pre link function always has the private context with its own directive and can't be accessed by the child controllers.

4. . Post link function ;
Finally post-link function is called for each directive. The order of calling this function is exactly opposite to the compile function. Its starts from the last node and moves up till the root element. In most of the cases we can use this function to apply the CSS to the directive templates.

Typical directive example

customDirective.js having compile function

 

 var app = angular.module("demo",[]);
 app.controller("demoCntrl", function($scope,$q,utilService){
  console.log("inside main controller");
  $scope.tableOptions = {
   headerTemplate: true,
   footerTemplatle: true,
   data : [
    {name:'John'},
    {name:'Varghese'},
    {name:'Mike'}
   ]
  }
 });
 app.directive("myCustomTable", ['$compile','utilService', function($compile,utilService){
   return {
  scope :{
   model:"=",
  },
  transclude : false,
  templateUrl : 'tmpl/tablerow.html',
  compile: function($element, $attributes){
   return {
    pre : function($scope, $element, $attributes, controller, transcludeFn) {
     if($scope.model.headerTemplate !== undefined && $scope.model.headerTemplate === true){
     var template = utilService.getTemplate('tmpl/tableHeader.html');
      var x = $compile(template)($scope);
      $element.prepend(x);
     }
     if($scope.model.footerTemplatle !== undefined && $scope.model.footerTemplatle === true){
      var tmpl = utilService.getTemplate('tmpl/tablefooter.html');
      console.log(tmpl);
      var x = $compile(tmpl)($scope);
      $element.append(x);
     }

    },
    post : function($scope, $element, $attributes, controller, transcludeFn){
     
     $element.addClass(".myCustomTable");
    }
   }
  },
  controller : function($scope,$templateCache,$q,$interpolate){
   if($scope.model.footerTemplatle == undefined ){
    $scope.model.footerTemplatle = false;
   }    
  },
   };
 }])
 .run(['$templateCache',function($templateCache){
 $templateCache.put('tmpl/tablerow.html','

{{record.name}}

');
 
  $templateCache.put('tmpl/tablefooter.html',
    "showing {{model.data.length}} items"
  );
  $templateCache.put('tmpl/tableHeader.html','Name

');
 }]);
 
  app.factory('utilService',[ '$templateCache','$interpolate','$q',function($templateCache,$interpolate,$q){
   var utilService = {};
  utilService.getTemplate =  function(templatePath){
   var template = $templateCache.get(templatePath);
   var startSym = $interpolate.startSymbol(),
   endSym = $interpolate.endSymbol();
   if (startSym !== '{{' || endSym !== '}}') {
    template = template.replace(/\{\{/g, startSym);
    template = template.replace(/\}\}/g, endSym);
   }
   return template;
  };
  return utilService;
   }]);