Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

BDOTNET AngularJs Directives - Uday

748 vues

Publié le

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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