Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
AngularJS provides many built-in directives that can be used to manipulate the DOM, handle events, and more but there will be times when you need to write custom directives. How do you get started? Are directives really as scary as they look at first glance?
In this session Dan Wahlin will provide a step-by-step look at creating custom AngularJS directives and show how to use templates, controllers, the link function, and many other features. You'll also see how custom directives can be used along with other AngularJS features such as $http interceptors and validation. By the end of the session you'll realize that directives aren't quite as scary as they first appear.
AngularJS Directives provide a powerful way to extend HTML and add your own custom components into Web applications. In this talk Dan Wahlin walks through the key building blocks in directives and explains how you can get started building your own custom directives using Directive Definition Objects (DDOs), isolate scope, the link() function, controllers, templates and more.
This talk is based on the Building AngularJS Custom Directives video course available at https://www.udemy.com/angularjs-custom-directives.
For a presentation given to the Angular DC Meetup on 3/19/14. (http://www.meetup.com/AngularJS-DC/events/169813802/) Part 2 of the "Angular from Scratch" series. Find part one at http://christianlilley.wordpress.com/2013/11/15/angular-from-scratch-slides-from-angularjs-meetup-dc/ . Find the accompanying demonstration files at https://github.com/xmlilley/ng-demos.
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
AngularJS provides many built-in directives that can be used to manipulate the DOM, handle events, and more but there will be times when you need to write custom directives. How do you get started? Are directives really as scary as they look at first glance?
In this session Dan Wahlin will provide a step-by-step look at creating custom AngularJS directives and show how to use templates, controllers, the link function, and many other features. You'll also see how custom directives can be used along with other AngularJS features such as $http interceptors and validation. By the end of the session you'll realize that directives aren't quite as scary as they first appear.
AngularJS Directives provide a powerful way to extend HTML and add your own custom components into Web applications. In this talk Dan Wahlin walks through the key building blocks in directives and explains how you can get started building your own custom directives using Directive Definition Objects (DDOs), isolate scope, the link() function, controllers, templates and more.
This talk is based on the Building AngularJS Custom Directives video course available at https://www.udemy.com/angularjs-custom-directives.
For a presentation given to the Angular DC Meetup on 3/19/14. (http://www.meetup.com/AngularJS-DC/events/169813802/) Part 2 of the "Angular from Scratch" series. Find part one at http://christianlilley.wordpress.com/2013/11/15/angular-from-scratch-slides-from-angularjs-meetup-dc/ . Find the accompanying demonstration files at https://github.com/xmlilley/ng-demos.
Single-page applications (SPAs) take user interaction with web applications to a new level. This means that more logic will be moved to the web browser and we have to become more familiar with JavaScript. AngularJS is one of the leading JavaScript frameworks when talking about SPAs. In this workshop I will present AngularJS in terms of problems it addresses and how it does this. Together we will develop a single-page application and we will go through how traditional concepts of web applications (data and state management, authentication) can be solved using the framework. Furthermore, we will dive into typical pitfalls when developing applications using AngularJS and will see how we can avoid them.
This is an effort towards teaching Angular JS from what an average Javascript developer already know. The presentation tries to fill the gap rather than posing Angular as a magical framework.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
Building an End-to-End AngularJS ApplicationDan Wahlin
This talk discusses how AngularJS can be used to build an end-to-end Customer Manager application. It covers structuring code and files, working with events, XHR interceptors, plus more.
Single-page applications (SPAs) take user interaction with web applications to a new level. This means that more logic will be moved to the web browser and we have to become more familiar with JavaScript. AngularJS is one of the leading JavaScript frameworks when talking about SPAs. In this workshop I will present AngularJS in terms of problems it addresses and how it does this. Together we will develop a single-page application and we will go through how traditional concepts of web applications (data and state management, authentication) can be solved using the framework. Furthermore, we will dive into typical pitfalls when developing applications using AngularJS and will see how we can avoid them.
This is an effort towards teaching Angular JS from what an average Javascript developer already know. The presentation tries to fill the gap rather than posing Angular as a magical framework.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
Building an End-to-End AngularJS ApplicationDan Wahlin
This talk discusses how AngularJS can be used to build an end-to-end Customer Manager application. It covers structuring code and files, working with events, XHR interceptors, plus more.
Getting Started Building Windows 8 HTML/JavaScript Metro AppsDan Wahlin
This talk is from a presentation I gave at the spring 2012 DevConnections conference. It covers building Windows 8 Metro apps using HTML5 and JavaScript.
This is a talk I gave the at the AngleBrackets/DevIntersection conference in April of 2014 that covers the AngularJS JavaScript framework (one of my favorite frameworks out there!). In this talk I discussed the challenges with Single Page Applications (SPA) and how AngularJS helps solve those challenges with built-in support for two-way data binding, directives and filters, controllers and more. I also discuss the relationship of modules to controllers, factories and services, and more.
This presentation by Dan Wahlin covers the fundamentals needed to get started using jQuery Templates. By using templates you can significantly reduce the amount of JavaScript that you write and keep your code-base more maintainable.
JavaScript Patterns to Cleanup your CodeDan Wahlin
This is a talk I gave at the AngleBrackets / DevIntersection conference in Vegas in April of 2013 covering JavaScript patterns that can be used to structure code and clean it up.
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...Dan Wahlin
This is a talk I gave at the spring 2013 AngleBrackets/DevIntersection conference in Las Vegas.
HTML5 is all the rage these days but where do you look to find robust examples of using it along with jQuery, client-side templates, Ajax calls, data access technologies, and more? In this session, Dan Wahlin will walk through an application that demonstrates how key HTML5 technologies can be integrated and used to present data to users in different ways. Topics covered include exposing data to the client using RESTful services created using the new ASP.NET Web API, using Handlebars templates to render data, JavaScript techniques for structuring code, the role of HTML5 semantic tags, as well as how technologies such as the canvas, SVG, and video can be used. If you want to learn server-side as well as client-side techniques and strategies then this session is for you.
A presentation i gave at JS-IL conference about building a SPA (single page application) using Durandal and other supporting libraries (Require.JS, Knockout and Q)
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
AngularJS primer, covering the pros and cons of AngularJS, basic concepts with code snippets, testing, caveats and a lot of links forward. It's good for getting a glimpse on AngularJS and getting hint on how to write your first templates, controllers, services, directives etc.
SC5 has used this training internally and given it to several customers with very successful results. The training has been given in a workshop form, is accompanied by a few practical exercises (that are not public yet).
The original set is made by SC5er Kari Heikkinen, published here by Lauri Svan for Aalto University course T-111.4360 Design of WWW Services.
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
In this presentation, you will find everything need to get started with AngularJS.
For more details, have a look at my blog (http://stephanebegaudeau.tumblr.com) or follow me on twitter (@sbegaudeau)
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
https://bit.ly/3KACoyV
The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
3. Modularity &
Reusability
across contexts
Directives know their own element and local scope.
We can pass additional data into directives as
attributes, right on element.
Write once, run anywhere!
core concept #2
4. Keep it Local
Sticks to a self-contained, modular scope, which
understands its context: inside the directive,
‘element’ is like ‘this’.
Uses messages, models to affect things elsewhere.
Easier to maintain, easier to read, easier to scale.
core concept #3
5. We know Angular Built-In Directives
ng-app
ng-bind
ng-model
ng-class
ng-controller
ng-show / ng-hide
ng-if
ng-switch
Generally speaking, a directive is a function that’s
attached to an element. But not JUST. It is a whole
execution environment.
Basic Angular JS directives you
are usually using
How are custom directives
different from built-in?
They are different only in naming conventions. Do
not use ‘ng-’ in your custom directives.
6. Naming Custom Directives
Angular uses a convention borrowed from other JS
projects: names in HTML are hyphenated (snake
case) while identifiers in the JS are camel-cased.
Expect Angular to do this conversion automatically
because of normalization process.
Directive name in HTML and
Normalization
.directive(‘customDir’) function () {
// Some code goes here
})
<custom-dir></custom-dir>
<span custom:dir></span>
<span custom_dir></span>
…
8. Building Custom Directive
Custom Directive Creating
Process
angular
.module(‘moduleName’, [‘dep1’, ‘dep2’])
.directive(‘directiveName’) factoryFunction () {
// Some code goes here
}) .directive() is a method we call on an
angular.module(), either at creation time or via
reference, passing a name and a factory function
The factory will return either a function or an
object containing a function and other settings
When we talk about generic ‘factories’, we don’t mean $factory, which is an Angular
implementation service. The factory pattern is all about Functional Programming: using
basic JavaScript functions to build and return naiive objects or other functions.
9. What do we do with the factory function?
There are two basic options
Returning only the link function
Link versus Compile
Pre-Link versus Post-Link
How to choose? Link or configuration object? What is Pre-Link and Post-Link functions?
All these relate to $compile service of Angular JS and recommended for high-skilled
developers.
Return a configuration object
Return a ‘linking function
But now IGNORE for today:
10. Using Config Object
Today we need to remember that directive returns
an object. We may use the list of properties.
Remember, link property is optional.
Returning object with directives’
configurations
angular.module(‘moduleName’, [])
.directive(‘customDir’) function () {
return {
link: function (scope, element, attrs) {
element.bind(‘mouseenter’, function () {
});
},
restrict: ‘ECMA’,
template: ‘<div>Hello, World</div>’
};
});
11. Link Function Arguments
Directives that want to modify the DOM typically use the
link option to register DOM listeners as well as update the
DOM.
scope - is an Angular scope object.
element - is the jqLite-wrapped element that this
directive matches (declared on ‘this’).
attrs - object containing the HTML attributes defined
on the element, including the directive invocating itself.
controller - is the directive's required controller
instance(s) or it's own controller (optional).
transcludeFn is a transclude linking function pre-bound
to the correct transclusion scope (optional).
Creating a Directive that
Manipulates the DOM
angular.module(‘moduleName’, [])
.directive(‘customDir’) function () {
return {
link: function (scope, element, attrs) {
element.bind(‘mouseenter’, function () {
});
},
restrict: ‘ECMA’,
template: ‘<div>Hello, World</div>’
};
});
12. Link Function Arguments
$scope is assignable, but should be reserved for
angular functions to pass into a controller, other
context. It is a shorthand, by which we’re calling the
$scopeProvider, which is Dependency-Injecting the
scope for us.
scope is just our own, customizable reference for
directive’s local scope.
$scope VERSUS scopeangular.module(‘moduleName’, [])
.directive(‘customDir’) function () {
return {
link: function (scope, element, attrs) {
element.bind(‘mouseenter’, function () {
});
},
restrict: ‘ECMA’,
template: ‘<div>Hello, World</div>’
};
});
13. Using jqLite
Angular will defer to jQuery, if present, but provides
its own subset of jQuery for basic DOM tasks. You
can not just use ‘$( )’, nor find using selectors,
unfortunately.
But all built-in ‘element’ refs are already pre-
wrapped in jqLite object. Try to chain methods as
you normally would.
You can use Angular jqLite for
basic DOM tasks
addClass()
after()
append()
attr()
bind()
children()
clone()
contents()
css()
data()
eq()
find()
hasClass()
html()
nest()
on()
off()
parent()
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler()
unbind()
val()
wrap()
14. Using jqLite
$(‘selector’).bind(‘mouseenter’, function () {});
The same as..
angular.module(‘moduleName’, [])
.directive(‘customDir’) function () {
return {
link: function (scope, element, attrs) {
element.bind(‘mouseenter’, function () {
do some stuff..
});
},
restrict: ‘ECMA’,
template: ‘<div>Hello, World</div>’
};
});
Let’s review another ‘modern’
directives’ options…
15. Templating in Directive
template – property where we can store our
template as a string.
templateUrl – this property allows us to load
template from a file, using path.
Use the template you need
angular.module(‘moduleName’, [])
.directive(‘customDir’) function () {
return {
link: function (scope, element, attrs) {
element.bind(‘mouseenter’, function () {
});
},
restrict: ‘ECMA’,
template: ‘<div>Hello, World</div>’,
// or
templateUrl: ‘path/dir/template.html’
};
});
16. Restrict Property
Remember that directives are re-usable. We can restrict
the usage of a directive to (a) specific context(s).
Defaults to ‘A’. Stack as a single string ‘EACM’.
‘E’lement,
‘A’ttribute,
‘C’lass,
co’M’ment.
Memorize like ECMAScript
<custom></custom>
<span custom=“somevalue”></span>
<span class=“custom_dir”></span>
<!– directive: custom somevalue -->
angular.module(‘moduleName’, [])
.directive(‘customDir’) function () {
return {
restrict: ‘ECMA’,
};
});
17. Replace Property [DEPRECATED]
By default, a directive element will wrap the
contents of a template. The ‘element’ object will be
the outer directive element. To instead replace the
directive element (and object) with the contents of
the template, use replace: true
This is especially critical when declaring as an
element.
Wrap without showing directive
element
angular.module(‘moduleName’, [])
.directive(‘customDir’) function () {
return {
replace: true,
template: ‘<header>Some info</header>’
};
});
<body>
<custom-dir>
<header>
Some info
</header>
</custom-dir>
</body>
18. Directive Isolate Scope
We have the option, in directives, of using either: the
local $scope (from our own controller, possibly) and a
new, per-instance, ‘isolate scope’.
Isolate scopes still have a parent $scope, but they’re
‘eccapsulated’ or, in other words, detached from the
inheritance chain. This is especially useful with repeats,
so variables can be fully local to the instance
Using isolate scope in a custom
directive
.directive(‘customDir’) function () {
return {
scope: true, // creates child scope
template: ‘<div>Hello, World</div>’
};
});
.directive(‘customDir’) function () {
return {
scope: {
dataSet: ‘@’,
}, // creates isolated scope
template: ‘<div>Hello, World</div>’
};
});
19. Isolate Scope Data-Binding
Angular provides us with ways to bind the value of properties in
isolate scope to attributes on the element, using special operators.
By default, an operator alone will be assumed to refer to a same-
named attr.
‘@’ - binds the local scope property to primitive value of the DOM
attribute. Result is always a string because attributes are strings.
‘=‘ - binds the local scope property to a parent scope property
having same name as the value of the DOM attribute.
‘&’ - binds local scope property to the output of an expression
defined in the DOM attribute. It’s like a function wrapper.
Ways to bind values of properties
.directive(‘customDir’) function () {
return {
scope: {
job: ‘@job’, // or only ‘@’
},
template: ‘<div>Hello, World</div>’
};
});
<custom job=“dev”></custom>
scope: {
job: ‘@’,
}
// the same as
scope.job = attrs.job;
20. You also
NEED TO KNOW
Something MORE
You should re-view some information about custom
directives by yourself
21. Try to find…
Transclude
Controller
controllerAs
Require
…more about such properties
You will need this information in the future to create
more complex custom directives, using them as the
LEGO blocks.