angular directives - three practical examplesfiles.meetup.com/19897405/angular directives... ·...
TRANSCRIPT
Angular DirectivesThree Practical Examples
Luis De Avila Full-stack JavaScript
[email protected] www.luisdeavila.com www.linkedin.com/in/ldeavila
Overview• What are Angular Directives?
• The Directive Definition Object
• Practical Examples:
• Cancel Button
• Custom Form Input
• Contextual Navigation Bar
What is a Directive?• A directive is a function, which executes, when the
Angular compiler encounters the directive’s corresponding marker in the DOM
• Markers can be elements, attributes, css classes, and comments
What is a Directive?<html> … <my-hello-world></my-hello-world> </html>
angular .module('app') .directive('myHelloWorld', function(){ //The stuffs });
Notice that Angular normalizes camel-case to dashes
Repetition Is Key• A directive is a function, which executes, when the
Angular compiler encounters the directive’s corresponding marker in the DOM
• Examples:
• ng-hide, ng-model
• input, a
The Directive Definition Object
• Tells the Angular compiler how the directive works
• The directive’s function must return the directive definition object
Cancel Button• Use Case: Return the user to the previous page
regardless of how they entered the current page.
Dash
Invoice Detail
Invoices List
DDO Properties• restrict - Restricts the directive to either element
(E), attribute (A), class (C), or comment (M)
• template/templateUrl - HTML markup for the directive or a path to an HTML file
• link - Function responsible for registering DOM listeners as well as updating the DOM.
function(scope, iElement, iAttrs, …)
Custom Form Input• Use Case: Create a component that displays a
summary of data values to a user so they can compare an initial value with an updated value
Initial Value Updated ValueDescription Difference
DDO Properties• scope - Can be true, an object or a falsy value
• falsy: directive will use parent’s scope
• true: A new child scope that prototypically inherits from its parent will be created
• object: An "isolate" scope is created for the directive. It does not prototypically inherit from its parent scope
Isolate Scope Prefix • @: One-way binding - Changes in parent are
reflected in directive’s scope. Attribute value is string or interpolated
• =: Two-way binding - Changes are bidirectional. Attribute value is a model
• &: Expression binding - Attribute is an Angular expression that is wrapped in a function that can be called
Nav Bar• Use Case: A navigation bar that changes available
options based on user role. Only admins can see the billing link
Profile
Billing
Link 2Link 1
Isolate Scope Prefix
• <: One-way binding - Changes in directive’s scope are not reflected in parent’s scope. Attribute value is a model
• ?: Optional - Makes = and < attributes optional
References• https://docs.angularjs.org/api/ng/service/
$compile#directive-definition-object
• https://docs.angularjs.org/guide/directive
• https://docs.angularjs.org/guide/compiler
• http://gifsoup.com/view/4453671/waynes-world.html
• http://thetwistedbuzz.com/a-few-facts-about-waynes-world-that-youve-probably-never-heard-17-photos/