Uploaded byUdaya Kumar
BDOTNET AngularJs Directives - Uday
This document discusses directives in AngularJS. It explains that directives allow you to create your own HTML syntax specific to an application by teaching HTML new behaviors. Directives can add behaviors, data binding, and extend or replace HTML elements. The document provides examples of built-in directives like ngBind and ngModel and how to create custom directives. It also discusses how directives are invoked from HTML and how the ng-repeat directive can be used to iterate over data.
BDOTNET AngularJs Directives - Uday
- 1. HAPPY VALENTINES DAY express yourlove right here.
- 2.
- 4. Directives They teach HTMLnew tricks
- 5. Directives • Directives isa 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
- 6. AngularJS Directives • Angularcomes 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.
- 7.
- 8. Invoking Directives fromHTML • 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
- 10. Iterating with ng-repeatdirective
- 11. Iterating with ng-repeatdirective
- 12. Creating Directives • Toregister 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.
- 13. Template-expanding directive • Assumeyou 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.
- 14. Iterating with ng-repeatdirective
Editor's Notes
- #5 Static HTML pages to Dynamic HTML pages Angular extend HTML very easily using adding elements,attributes