Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

BDOTNET AngularJs Directives - Uday


Published on

  • Be the first to comment

  • Be the first to like this

BDOTNET AngularJs Directives - Uday

  1. 1. HAPPY VALENTINES DAY express your love right here.
  2. 2. Directives & Services
  3. 3. Directives They teach HTML new tricks
  4. 4. Directives • Directives is a unique and powerful feature available only in Angular. • Directives let you invent your own HTML syntax, specific to your application. • Directives can add: – Behaviors – Data Binding to scope – Replace or to extend the HTML element
  5. 5. AngularJS Directives • Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. • Create your own directives for Angular to use. • What happens for these directives ? – When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
  6. 6. AngularJS Directives
  7. 7. Invoking Directives from HTML • The directives can be placed in element names, attributes, class names as well as comments. • List of some of the possible directive names – ng-directivename – ng:directivename – ng_directivename – x-ng-directivename – data-ng-directivename
  8. 8. Iterating with ng-repeat directive
  9. 9. Iterating with ng-repeat directive
  10. 10. Creating Directives • To register a directive, – use the module.directive API. – module.directive takes the normalized directive name followed by a factory function. This factory function should return an object with the different options to tell $compile how the directive should behave when matched. • The factory function is invoked only once when the compiler matches the directive for the first time. You can perform any initialization work here. The function is invoked using $injector.invoke which makes it injectable just like a controller.
  11. 11. Template-expanding directive • Assume you have a chunk of your template that represents a customer's information. This template is repeated many times in your code. When you change it in one place, you have to change it in several others. This is a good opportunity to use a directive to simplify your template.
  12. 12. Iterating with ng-repeat directive