Learning AngularJS Directives

Get to grips with AngularJS directives to create dynamic and responsive web applications quickly and easily
4.1 (12 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
137 students enrolled
Take This Course
  • Lectures 15
  • Length 1 hour
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

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.

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.

About the Author

John Munsch is a professional software developer with over 28 years of experience. For the last 2 years, he has been leading a team that builds modern web app frontends with AngularJS. This was after a couple of years he spent doing the same kind of work with BackboneJS, UnderscoreJS, and HandlebarsJS. He's definitely enjoying a life full of JavaScript, AngularJS, and NodeJS after more than 20 years spent in the Java, C++, and C world.

What are the requirements?

  • The course is aimed at developers familiar with AngularJS but no previous experience with directives is required, this course has it all!

What am I going to get from this course?

  • 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

Who is the target audience?

  • If you are a JavaScript developer and want to build dynamic and responsive web apps by unleashing the full power of directives, then this course is perfect for you!

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Racing into Turn One

This first video will provide information about what we are going to cover in this course.


Including snippets of HTML can be done in many ways, but an AngularJS directive is one of the best.


Getting started with directives seems difficult. We will show you that a basic directive is only a handful of code.


Directives often need to be individually configured. By having an isolate scope on the directive, it's easy to do so.


We want to be able to create attributes on our directives. Understanding the two most common kinds of bindings makes this easy.

Section 2: Accelerating Down the Straightaway

Understanding the basics of scope isn't always enough. You'll learn just a few more things to become power users of scope.

Binding data into and out of a directive is great, but sometimes we need interactivity. The & operator gives us a way to bind functions and use them.

Transclusion is poorly understood (and sometimes poorly explained). The solution is a simple, straightforward explanation and demonstration.


Transclusion is important, and people need to be comfortable with it. We demonstrate it further by building a UI element and a variety of content for it.


Directives can be declared in multiple ways, but it might not be clear how to restrict that. Explaining the different kinds of directive restrictions helps.

Section 3: Putting the Pedal to the Metal

You can't accomplish everything you need to do in directives with just the scope and templates. We'll introduce functions you can add to handle everything else.


Sometimes, you will want to service or data in your directives. Dependency injection will come to the rescue, but some functions don't need it.


Understanding small snippets of code isn't the same as understanding a complete program. So, we look at a working program with more moving pieces.


Sometimes, we want directives to do more than just wrap one another. We'll use require to get access to another directive.


It's great to understand "require" from an explanation point of view, but it's better to see it being put to use.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course