AngularJS Custom Directives with Dan Wahlin

Take your AngularJS skills to the next level and learn the inner workings of AngularJS and custom directives!
4.8 (340 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.
3,819 students enrolled
$19
$75
75% off
Take This Course
  • Lectures 61
  • Length 6 hours
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 2/2015 English Closed captions available

Course Description

** Course updated new bonus articles about building custom directives **

Please note that this course covers version 1.x of AngularJS.

There are many Angular courses on the Web now. Which one should you take? If you're looking to dive deeper into custom Angular directives and want to learn from a developer/instructor with over 15 years of experience who has also been awarded the Angular Google Developer Expert (GDE) award from Google then this is the course for you! Dan also created the popular AngularJS in 60-ish Minutes video on YouTube (over 1 million views) so if you enjoyed that then you'll love this course!

Are you interested in learning how to take your AngularJS skills to the next level? Have you been confused by terms like tranclusion, isolate scope, interpolation, local scope properties, and more? Have you wanted to build custom directives but didn't know where to start? Look no further than the Learn to Build AngularJS Custom Directives course by Dan Wahlin!

Throughout this course you'll be provided with a step-by-step look at the process of creating custom directives and cover key concepts that you need to know to take your AngularJS skills to the next level. Topics such as the $compile service, the directive definition object (DDO), the link() function, isolate scope, controller integration, transclusion, working with the $interpolate service, $asyncValidators, and much more are covered as well as techniques for structuring AngularJS directive code.

In addition to expert instruction by Angular Google Developer Expert (GDE) Dan Wahlin you'll also be provided with hands-on code samples that you can follow along with at your own pace. Just pause or rewind the video if you need to see the code again or jump right to the end solution that's provided if you'd like. Begin and end code is provided so that you can maximize your learning and become an expert in building directives! The modules covered in the course include:

  • Getting Started with Directives
  • Shared and Isolate Scope
  • The Link Function
  • Using Controllers
  • Bonus Content - Custom Directives in Action and More
  • Bonus Content: Articles on Building Custom Directives

Many additional details are provided throughout the modules including coverage of the $parse and $interpolate services, how controllers and the link function can be used in concert, why and how to use transclusion to merge custom content, pros and cons of available coding approaches for custom directives, techniques for passing parameter data to functions when using local scope properties, and much, much more.

What are the requirements?

  • Existing experience with JavaScript, HTML, and CSS is required
  • Existing experience with AngularJS is required (knowledge of views and built-in directives, controllers, factories/services, etc.)
  • It is highly recommended that you take the AngularJS JumpStart course if you don't have existing experience with the framework

What am I going to get from this course?

  • Create custom AngularJS directives
  • Explain how the link() function works for DOM manipulation
  • Learn the role of $compile, $interpolate, $eval and more
  • Create directives that use controllers and templates
  • Leverage transclusion for dynamic content
  • Understand the different options that can be used when creating directives
  • Know the core features provided by jqLite
  • Understand the compile process in directives including pre and post link functions
  • Understand how to require other directives in a custom directive
  • Explain what isolate scope is and why you would use it
  • Learn how to define and use isolate scope local properties
  • Much more!

What is the target audience?

  • Designed for developers with existing JavaScript and AngularJS experience
  • AngularJS developers who want to know how to build custom directives
  • AngularJS developers who want to take their skills to the next level

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.

Curriculum

Section 1: Course Introduction
Course Introduction
Preview
02:24
About the Author
Preview
02:18
Course Prerequisites
Preview
01:26
Course Agenda
Preview
04:41
Code Editor
Preview
02:07
Article

Download the course code here. Simply click the download icon next to the file.

Section 2: Getting Started with Directives
Introduction
Preview
02:18
The Role of Directives
Preview
04:42
Creating a Hello World Directive
Preview
04:09
Directive Categories
Preview
06:08
Directive Building Blocks
Preview
10:06
Summary
Preview
01:22
Section 3: Shared and Isolate Scope
Introduction
Preview
01:36
Understanding Shared and Isolate Scope
Preview
08:06
Shared and Isolate Scope Demo
Preview
02:35
@ Local Scope Property
04:15
@ Local Scope Property Demo
05:36
= Local Scope Property
02:46
= Local Scope Property Demo
04:54
& Local Scope Property
03:57
& Local Scope Property Demo
04:09
Summary
01:33
Section 4: The link() Function
Introduction
Preview
03:15
The link() Function
07:31
link() Function Demo
06:14
Building a TableHelper Directive
13:02
Requiring ngModel
13:28
Using $parse and eval()
05:59
Building a Google Maps Directive
13:10
Using $compile and $interpolate
04:37
compile() Function and $interpolate Service Demo
15:04
Is link() Always Appropriate?
05:37
Summary
01:39
Section 5: Using Controllers in Directives
Introduction
Preview
02:10
Using a Controller in a Directive
04:16
Replacing link() with a Controller
07:09
Using controllerAs
02:28
Adding a Controller to TableHelper
04:31
Passing Parameters Out of a Directive
08:02
Understanding Transclusion
04:52
Transclusion Demo
06:34
Using Transclusion in TableHelper - Part 1
06:21
Calling the transclude() function and using Require - Part 2
10:15
Summary
01:19
Thank You!
Article
Section 6: Bonus Content - Custom Directives in Action and More
Introduction
Preview
00:42
Building a Custom Validation Directive with $asyncValidators
06:28
wcUnique Directive with $asyncValidators Demo
05:52
Building an Ajax Overlay Directive
09:08
wcOverlay and HTTP Interceptors Demo
06:33
Building a Menu Highlighter Directive
03:59
menuHighlighter Directive Demo
04:58
Building a Custom Validator Directive Demo
13:19
Section 7: Bonus Content: Articles on Building Custom Directives
About this Article Series on AngularJS Directives
Preview
Article
Part 1: The Fundamentals
Preview
10 pages
Part 2: Isolate Scope
Preview
15 pages
Part 3: Isolate Scope and Function Parameters
Preview
12 pages
Part 4: Restriction and Transclusion
Preview
7 pages
Part 5: The link() Function
Preview
Article
Part 6: Using Controllers
Preview
12 pages
Part 7: Creating a Unique Value Directive using $asyncValidators
Preview
12 pages

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Dan Wahlin, Developer, Google GDE and Microsoft MVP

Dan Wahlin is a world-renowned developer and instructor who has been teaching developers for over 15 years and has a knack for making hard concepts easy to understand. Both Google and Microsoft have recognized his contributions in the world of Web development and awarded him the Google GDE (Google Developer Expert) and Microsoft MVP awards.

Dan founded Wahlin Consulting which provides consulting and training services on Web technologies such as JavaScript, Angular, NodeJS, jQuery, HTML5, C#, ASP NET MVC, Web API, and more. Dan also speaks at conferences and user groups around the world and has written several books on Web technologies. Dan blogs about a variety of topics, runs the Web Weekly newsletter, and writes columns for various technical magazines. Follow Dan on Twitter @DanWahlin.

Ready to start learning?
Take This Course