Introduction to Directives

Web developers looking to expand their skills with AngularJS.


Expected Duration
106 minutes

AngularJS is a JavaScript-based web development framework. Directives allow you to attach a behavior to an object. In the course, you will learn how to work with the built-in AngularJS directives and how to create custom directives.


Basic Directives

  • start the course
  • instantiate a template once per item from a collection
  • use ng-include to include an external HTML fragment
  • specify custom behavior when an element is clicked
  • use ng-show and ng-hide to control the display of elements
  • use nested variable scopes in AngularJS
  • use the ngClick and ngDblClick directives in AngularJS

Mouse and Binding Directives

  • specify custom behaviors based on mousedown and mouseup events
  • specify custom behaviors based on mouseover and mousemove events
  • specify custom behaviors based on mouseenter and mouseleave events
  • compare the ngChange directive with the JavaScript onchange event
  • replace elements using the ngBind and ngBindTemplate directives
  • insert an HTML element using the ngBindHTML directive

Display Directives

  • set CSS style on an HTML element conditionally using the ngStyle directive
  • dynamically set CSS classes on an HTML element using the ngClass directive
  • use the ngClassEven and ngClassOdd directives
  • use the ngHref and ngSrc directives
  • use the ngModel directive
  • use the ngFocus and ngBlur directives
  • use AngularJS directives in Internet Explorer

Practice: Mouse Binding

  • use different bindings to create custom behaviors based on different mouse events





Multi-license discounts available for Annual and Monthly subscriptions.