Learning AngularJS Directives[Video]

More Information
  • Create a directive to replace ng-include and make code more efficient
  • Implement isolate scope in the coding to build reusable directives
  • Understand the difference between various scope bindings to make flexible directives
  • Establish the communication between directives and the app by binding them with functions
  • Discover and apply the concept of transclusion to make better directives
  • Learn how to specifically use a directive as an element or attribute
  • Explore and use the different functions available for directives
  • Connect directives to create powerful sets which work together

It can be hard to maintain a balance between visual elements of an application associated with HTML and CSS and aspects such as UI Interaction and form validation. Wouldn’t it be great if you could use HTML as your own domain specific language (DSL) and have it be a custom thing tuned exactly to the elements and attributes you need for the project you’re building?

AngularJS provides this exact solution by separating these two features so that you can make changes in the visual layout without affecting your code. Backed by directives, AngularJS will help you to add functionality to HTML so that you can build interactive, engaging web applications.

Directives help you to extend your HTML and teach it new tricks to visually enhance your websites without compromising your code. This video course covers everything you need to use directives in your own apps, from creating directives to isolating their scope, applying transclusion, and injecting dependencies.

Firstly, we will learn how to include HTML snippets in our code using directives and create a directive to start working with it. We will use isolate scope to configure our directives individually and style them. Next, we will take a look at different operators to bind functions and make our directives interactive. We will explore the concept of transclusion and apply it to make our code more effective. Once we’ve done this, we will restrict our directives to be used as an element, attribute, class or a comment according to our needs. We will also discover the difference between link and controller functions and inject dependencies to create testable components and co-ordinate our directives to work together. By the end of this course, you’ll be proficient with creating and using fully functional directives to your advantage.

Style and Approach

This course explains the various concepts of AngularJS directives step-by-step, with a hands-on approach and examples to help you understand and use directives in your code.

  • Delve into the various concepts behind creating functional and interactive directives
  • Create your own customized HTML elements by using SVG and HTML5 canvas
  • Learn about isolate scope and transclusion and put these into action when writing code
Course Length 1 Hour
ISBN 9781785287329
Date Of Publication 29 May 2015


John Munsch

John Munsch is a professional software developer with over 29 years of experience. For the last three years, he's been leading a team building modern web app front ends with AngularJS after a couple of years spent doing the same kind of work with Backbone.js, Underscore.js, and Handlebars.js. He's definitely enjoying a life filled with JavaScript, AngularJS, and Node.js after more than 20 years spent in the Java, C++, and C world.

Prior to this course, he developed a video course called Learning AngularJS Directives, also for Packt Publishing.