AngularJS Fundamentals – basic directive structure

What is AngularJS?

Google’s JavaScript MVC (Model-View-Controller) framework is a powerful tool in any web developer’s toolkit. Once you get over the steep learning curve and start thinking “the Angular way” you will appreciate its power to do so much with so little code.

Several new concepts like data binding, directives and dependency injection might seem esoteric at first (at least to non-Java developers), however after careful study, the “method to the madness” becomes clearer. Even though there will be quite a few frustrating – hair pulling moments, several subsequent aha moments make the pain of learning worthwhile.

Directives

AngularJS Directives help to abstract repetitive pieces of functionality such as form validation, data binding or even Google Maps API

Anatomy of a Directive

The directive typically has several important characteristics, such as the module which wraps it, the dependency injection, which imports other services that it requires, and also the controller and template.
The main directive function, which is similar to a Class constructor in OOP, has some important options, also known as the Directive Definition Object:

1. link: this function is normally used to manipulate the DOM
2. restrict: A – directive matches the attribute name; E – matches the element name; C – matches the class name
3. scope: isolate scope exists inside the directive only
4. templateUrl: the path to HTML template file or the hard coded HTML string
5. replace: replace the HTML element with directives content
6. transclude: process directive content in parent scope and insert the result in a designated part of the directive

Directive using HTML tag element:

<bare-bones attr1='number' attr2='string'>
</bare-bones>

Directive using tag attribute:

<div bare-bones="exp" attr1='number' attr2='string'>
</div>

Directive using CSS class:

<div class="bare-bones" attr1='number' attr2='string'>
</div>

A sample basic directive showing the most important methods and properties

// create a basic simple "barebones" directive
angular
.module("master")
.directive('bareBones', function () {
    'use strict';
     //declare directive variables here

        restrict: 'EAC', // directive can be initialized through Element, Attribute or CSS Class
        scope: { // creates an isolated scope for the directive
            attr1: '@', // destination attribute in directive tag is assigned to scope variable of same name
            attr2: '@',
            attr3: '=', // one way data binding from parent $scope in directive's controller to local scope variable zoom
        replace: true,
        templateUrl: '[Path to folder]/map-template.html',// relative path to the template HTML file
        compile: function (elem, attrs){
        // the compile function is executed before the directive is injected into the page. It does not have access to the directive scope

                 },
        link: function (scope, element, attrs) {
              scope.init = function () {
              //scope is the directives isolated scope
              //element is the HTML element created by the directive
              // attrs is the list of attributes (attr1, attr2, attr3) defined in the directive tag
            };  // close scope.init
            scope.init();


        } // close link function
    };
       return;
  });

The next part of this post will cover AngularJS Controllers.