1 / 14

Directives

Directives. Angular Basics. Table of Contents. What is a directive and why we need it How to create directives Directive specifics for attributes jQuery plugins directives. What Is a Directive. What Is a Directive. Directives Extends HTML Make it easier for "dynamic" pages

isaura
Download Presentation

Directives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Directives Angular Basics

  2. Table of Contents • What is a directive and why we need it • How to create directives • Directive specifics for attributes • jQuery plugins directives

  3. What Is a Directive

  4. What Is a Directive • Directives • Extends HTML • Make it easier for "dynamic" pages • Easier to read document • Domain specific tags

  5. What Is a Directive • Main uses of directives • Custom elements (tags) • Custom events • Observe and react to changes

  6. Creating Directives

  7. Creating Directives • Create directives per module myApp.directive('myDirective', function () { return { restrict: 'E', // C, A, M, CA, etc. template: '<div />' // or templateUrl, scope: { // isolated scope - &, @, = }, link: function(scope, element, attr) { // put logic here, }, compile: function(element, attr) { // compile }, replace: true, priority: 0 }; });

  8. Directive Attribute Specifics

  9. Attribute Specifics • Manipulating attribute link: function (scope, element, attrs) { console.log(attrs.ngModel); attrs.$set('ngModel', 'new value'); // observe changes to interpolated attribute attrs.$observe('ngModel', function(newVal, oldVal) { console.log('ngModel has changed to ' + value); }); }

  10. jQuery Plugins Directives

  11. jQuery as Directive • jQuery plugin directives <input type="text" date-picker /> myApp.directive('datePicker', function () { return { restrict: 'A', link: function(scope, element, attr) { element.datepicker(); }, }; });

  12. What are directives Create directives Specifics Summary

  13. AngularJS http://academy.telerik.com

  14. Create AngularJS SPA client for the Tic-Tac-Toe Web API project used in the "Web Services and Cloud" course in lecture "Web API Architecture" Use routing – for every single page Use controllers – games, users, playing, etc. Use services – restful usage, game logic, etc. Use filters – for visualization of the bindings Use directives – for domain specific parts of the HTML Exercises

More Related