Learning AngularJS Directives
4.1 (14 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.
142 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning AngularJS Directives to your Wishlist.

Add to Wishlist

Learning AngularJS Directives

Get to grips with AngularJS directives to create dynamic and responsive web applications quickly and easily
4.1 (14 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.
142 students enrolled
Created by Packt Publishing
Last updated 8/2015
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1 hour on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • The course is aimed at developers familiar with AngularJS but no previous experience with directives is required, this course has it all!

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.

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!
Compare to Other AngularJS Courses
Curriculum For This Course
15 Lectures
Racing into Turn One
5 Lectures 20:54

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

Preview 03:07

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

Replacing ng-include with a Directive

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

Creating Our First Directive

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

Learning about Isolate Scope

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

Giving Our Directive Some Style
Accelerating Down the Straightaway
5 Lectures 19:04

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

Preview 04:55

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.
Using the & Operator to Bind Functions

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

Deciphering Transclusion

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.

Creating a Driver Card

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.

Restricting Our Directives by Type
Putting the Pedal to the Metal
5 Lectures 20:16

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.

Preview 03:44

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.

Injecting Dependencies

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.

Drawing Our Racetrack

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

Coordinating Directives

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

Adding Our Cars to the Track
About the Instructor
Packt Publishing
3.9 Average rating
8,249 Reviews
59,041 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.