Learn to Build AngularJS Custom Directives with Dan Wahlin

Learn to Build AngularJS Custom Directives with Dan Wahlin
Learn to Build AngularJS Custom Directives with Dan Wahlin
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6 Hours | 511 MB

Take your AngularJS skills to the next level and learn the inner workings of AngularJS and 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?

Over 61 lectures and 6 hours of content!
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

Table of Contents

Course Introduction
Course Introduction
About the Author
Course Prerequisites
Course Agenda
Code Editor
Course Code and Slides

Getting Started with Directives
Introduction
The Role of Directives
Creating a Hello World Directive
Directive Categories
Directive Building Blocks
Summary

Shared and Isolate Scope
Introduction
Understanding Shared and Isolate Scope
Shared and Isolate Scope Demo
@ Local Scope Property
@ Local Scope Property Demo
= Local Scope Property
= Local Scope Property Demo
& Local Scope Property
& Local Scope Property Demo
Summary

The link() Function
Introduction
The link() Function
link() Function Demo
Building a TableHelper Directive
Requiring ngModel
Using $parse and eval()
Building a Google Maps Directive
Using $compile and $interpolate
compile() Function and $interpolate Service Demo
Is link() Always Appropriate?
Summary

Using Controllers in Directives
Introduction
Using a Controller in a Directive
Replacing link() with a Controller
Using controllerAs
Adding a Controller to TableHelper
Passing Parameters Out of a Directive
Understanding Transclusion
Transclusion Demo
Using Transclusion in TableHelper – Part 1
Calling the transclude() function and using Require – Part 2
Summary
Thank You!

Bonus Content – Custom Directives in Action and More
Introduction
Building a Custom Validation Directive with $asyncValidators
wcUnique Directive with $asyncValidators Demo
Building an Ajax Overlay Directive
wcOverlay and HTTP Interceptors Demo
Building a Menu Highlighter Directive
menuHighlighter Directive Demo
Building a Custom Validator Directive Demo

Bonus Content: Articles on Building Custom Directives
About this Article Series on AngularJS Directives
Part 1: The Fundamentals
Part 2: Isolate Scope
Part 3: Isolate Scope and Function Parameters
Part 4: Restriction and Transclusion
Part 5: The link() Function
Part 6: Using Controllers
Part 7: Creating a Unique Value Directive using $asyncValidators