AngularJS Directives

AngularJS: Def: AngularJS is a JavaScript framework. It can be added to an HTML page with a

<script> tag.

Basics of AngularJS: directives, expressions, filters, modules, and controllers. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. You can implement the following types of directives: Element directives Attribute directives CSS class directives Comment directives Of these, AngularJS recommends that you try to use element and attribute directives, and leave the CSS class and comment directives. Extending Directives Lets say you want to use a 3rd-party directive, but you want to extend it without modifying it. There are several ways you can go about doing this. Global Configurations Some well-designed directives (such as those found in AngularUI) can be configured globally so that you do not have to pass in your options into every instance. Require Directives Create a new directive that assumes the first directive has already been applied. You can require it on a parent DOM element, OR on the same DOM element. If you need to access functionality found in the primary directive, make it exposed via the directive controller (this may require submitting a Pull Request or feature request to the plugin developer).

// <div a b></div>
ui.directive('a', function(){
  return {
    controller: function(){
      this.data = {}
      this.changeData = function( ... ) { ... }
    },
    link: ($scope, $element, $attributes, controller) {
    controller.data = { ... }
    }
 }
})
myApp.directive('b', function(){
  return {
    require: 'a',
    link: ($scope, $element, $attributes, aController) {
      aController.changeData()
      aController.data = { ... }
    }
  }
})

Stacking Directives You can create a new directive with the exact same name as the original directive. Both directives will be executed. However, you can use the priority to control which directive fires first (again, may require a Pull Request or feature request)

ui.directive('a', ... )
myApp.directive('a', ... )

Templating You can leverage or simply create a directive that generates the HTML with the primary directive attached.

   // <div b></div>
ui.directive('a', ... )
myApp.directive('b', function(){
  return {
    template: '<div a="someOptions"></div>'
  }
})

Specialized the Directive Configuration Sometimes you want create a specialized version of a directive with a new name that has different configuration options (such as templateUrl), while leaving the original directive available. Any directive that is registered makes available a special service with the name 'Directive' appended to it. If you registered (with the name 'myDir') it will create a service called 'myDirDirective'. If you inject that into a new directive provider function, you will get an array of directive configurations (in priority order, presumably). Choose the one you want (usually the first), make a shallow copy of it, modify the configuration and return it.

// <div b></div>
ui.directive('a', ... )
myApp.directive('b', function(aDirective){
   return angular.extend({}, aDirective[0], { templateUrl: 
'newTemplate.html' });
})

AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, and textarea) to application data. The ng-bind directive binds application data to the HTML view. The ng-init directive initializes AngularJS application variables. Note: You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

AngularJS expressions are written inside double braces: {{expression}}. AngularJS will "output" data exactly where the expression is written:

AngularJS modules define AngularJS applications. AngularJS controllers control AngularJS applications. The ng-app directive defines the application; the ng-controller directive defines the controller. AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables. Example {{ 5 + 5 }} or {{ firstName + " " + lastName }} If you remove the ng-app directive, HTML will display the expression as it is, without solving it: The ng-repeat directive repeats an HTML element:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
   <li ng-repeat="x in names">
     {{ x }}
</li>
</ul>
</div>

The ng-repeat directive used on an array of objects:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
 <li ng-repeat="x in names">
   {{ x.name + ', ' + x.country }}
 </li>
 </ul>

</div>