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.
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.
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...Sencha
Have you ever wished you could use Sencha’s powerful Ext JS components in your Angular 2 apps? Now you can. Learn about the new bridge we’ve created that enables you to use the Ext JS grid, treegrid, pivot grid, calendar, charts, and other components in your Angular 2 based apps.
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.
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...Sencha
Have you ever wished you could use Sencha’s powerful Ext JS components in your Angular 2 apps? Now you can. Learn about the new bridge we’ve created that enables you to use the Ext JS grid, treegrid, pivot grid, calendar, charts, and other components in your Angular 2 based apps.
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.
Will your code blend? : Toronto Code Camp 2010 : Barry GervinBarry Gervin
XAML getting you down? Tired of the repetition of trial by error WPF or Silverlight development? If you’re not using Expression Blend to build your XAML, you’re doing it all wrong. Let’s take a look at the common pitfalls that new Silverlight developers fall into that make their code unblendable, and then leverage the patterns and techniques that allow us to unlock the virtues of Expression Blend. Testability, blendability, inner peace and maintainability are just 1 hour away
Building Backbone applications quickly became a de-facto standard, though we can’t really define it as framework but rather just as foundation to create other frameworks.
If you like Backbone, you’ll fall in love with Marionette, the best application library to create large scale Javascript applications.
Nicholas will explain the framework, show examples and talk about some projects like cronycle.com that have been delivered to production using Marionette.
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)Alessandro Nadalin
Since bumping into AngularJS a few months ago, we decided to invest more and more time developing with it: coming from a PHP background, the shift of paradigm easy due to the use of patterns and intuitive flows: even though this won’t be a very in-depth technical talk, we are going to see why you should consider working with angular: fast single-page apps, DI, ease of testing, being asynchronous, scaling on the clients.
Welcome to the future.
Last year, AOL adopted a new content strategy and has positioned itself as a premier destination for original content. Core to this strategy is having reusable, highly efficient and optimized common code and experiences at scale, which is where jQuery comes in. Check in with Dave Artz to see how jQuery has helped his front-end standards team tackle unique challenges like optimizing 3rd party widget performance, overriding plugin functionality, and managing dependencies and updates across 100+ sites spanning multiple back-end platforms.
In a world dominated by React and Angular, Vue is the open source framework that brings a third alternative to the table, combining the strengths of the first two while trying to weed out their weaknesses.
The result is an easy to use, lightweight and versatile framework. In this talk we will explore Vue's architecture, see how components interact among themselves, have a look at the event model and in the end, how to wrap everything together in a SPA using Webpack.
Introduction to Angular JS by SolTech's Technical Architect, Carlos Muentes.
To learn more about SolTech's custom software and recruiting solution services, visit http://www.soltech.net.
Angular.js Directives for Interactive Web ApplicationsBrent Goldstein
How to build an interactive hierarchical data-grid using custom directives.
Shows how to capture keyboard input, navigate the DOM tree with jqLite and display google spreadsheet like selection rectangles.
Presentation from JSChannel Conference Bangalore on July 18, 2015. An Introductory workshop session covering the basics of how to use React.js and the Flux pattern, and the advantages they can offer: One-Way Data Flow, Decoupled components, and Independence from the Render Context.
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.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
5. Fine. How about…
5(-ish) words:
Logic & Behavior For UI
“...a way to teach HTML new tricks.”
Anything in your app that touches DOM
Examples: event-handling, behavior
management, template pre-processing &
insertion, data-binding, ‘Collection
Views’, UI Widgets, conditional
display, i18n & localization, etc.
6. The only other Angular construct that
really touches the DOM is:
Angular Expressions.
The rest of it should be in
Directives. (Even the ng-view that
executes your routing is simply a
model-driven directive...)
Fine. How about…
7. Structurally speaking, a Directive is
just a function that’s attached to an
element.
But not just a function: a whole
execution environment. Really,
Directives are mini-applications.
You can think of them as little
robotic pilots that live on your DOM
elements & tell them what to do.
Fine. How about…
8.
9. They can BYO DOM, or just be declared
on inline DOM.
Fine. How about…
16. Why Declarative?
IMPERATIVE = YOUR PROBLEM
DECLARATIVE = SOMEBODY ELSE’S PROBLEM
Easier To Read, Maintain: Why scatter
event-listeners across 100 linked JS
files, then need to go search for
them to find out what’s happening on
an element.
17. Declarativeness ROCKS
You’re trying to find handlers for
this element:
Well, where are the event-handlers?
On ‘#1’? On ‘.B’? ‘.C’? On ‘button’?
What if it’s on ‘parentDiv>:first-
child’?
You can’t misunderstand what’s
happening with declarative directives:
<button id=”1” class=”B C”></button>
<button md-action-handler></button>
18. Extending HTML…
HTML is NOT a virgin bride or
hothouse flower.
The Semantics Wars are over. HTML is
a highly-abstracted, Object-Oriented
language for app interfaces and for
*presenting* documents. Docs
themselves are increasingly stored in
other formats, like markdown.
We’re not abandoning accessibility.
But it’s not a binary choice, anyway.
20. Reusability
It’s all about context-awareness,
data-binding & DI.
Directives know their own element and
local scope.
You can pass additional data into
directives as attributes, right on
the element.
24. Yes: ‘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.
But the challenge to all that is:
25. My Awesome Website
Sweet Product
Product Description: Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. In erat mauris,
faucibus quis pharetra sit amet,
pretium ac libero. Etiam vehicula
eleifend bibendum. Morbi gravida
metus ut sapien condimentum sodales
mollis augue sodales. Vestibulum
quis quam at sem placerat aliquet.
Curabitur a felis at sapien
ullamcorper fermentum. Mauris
molestie arcu et lectus iaculis sit
amet eleifend eros posuere. Fusce
nec porta orci.
!
Integer vitae neque odio, a
sollicitudin lorem. Aenean orci
mauris, tristique luctus fermentum
$899.99 Buy Now!
Cart: 1 Item(s)
Clicking Here
Needs to
Change
Things Here
27. Directive Names
Angular uses a convention borrowed
from other JS projects: names in HTML
are hyphenated...
while identifiers in the JS are
camel-cased:
!
Expect Angular to do this conversion
automatically. Don’t fight it.
.directive(‘sampleDirective’, function(){})
<sample-directive></sample-directive>
28. How are custom directives
different from built-in?
They’re not.
At all.
No, really.
(Well, OK: they’re different in
naming conventions: don’t use ‘ng-’
in your custom directives.)
29. CREATION
.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
angular
.module('moduleName', ['dependency1', 'dependency2'])
.directive('directiveName', factoryFunction() {})
30. Factories
(Note, 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 either naiive objects or other
functions.
35. You’ll See Later, But
Ignore For Today:
Returning only the Link
function
Link vs. Compile
Pre-Link vs. Post-Link
36.
37. Using a Config Object
angular.module('moduleName').
directive('sampleDirective', function(){
return {
link: function(scope, element, attrs) {
// this example binds a behavior to the
// mouseenter event
element.bind("mouseenter", function(){
... do stuff after mouseenter ...
}
},
restrict: ‘E’,
template: “<div>Hello, World!</div>”
}})
Everything but `link` is optional.
38. Link Function Args
.directive('sampleDirective', function(){
return {
link: function(scope, element, attrs) {
// this example binds a behavior to the
// mouseenter event
element.bind("mouseenter", function(){
... do stuff after mouseenter ...
}
},
restrict: ‘E’,
template: <div>Hello, World!</div>
}
})
39. Link Function Args
3 standard params for a link function.
(Plus optional 4th: controller.) They’re
supplied as args by the directive function,
if specified.
scope: whatever scope object is local
element: element declared on: `this`
attrs: an object containing the html
attributes defined on the element,
including the directive invocation itself
Supplied to the function not by name but in
order. Call them whatever you want.
40. jqLite:
your path to the DOM
Angular will defer to JQuery, if
present, but provides its own subset
of JQuery for basic DOM tasks.
You can’t just use $(), nor find
using selectors, unfortunately.
But all built-in `element` refs are
already pre-wrapped in jqlite object
Chain methods as you normally would
45. A Thought:
If angular.element() / jqlite doesn’t
support what you’re trying to do...
ask yourself: why not?
Because they’re lazy bastards?
Not so much. Think about other options.
Go with the grain, and Angular will
reward you.
46. Directive Templates
Templates can be stored as strings on
the `template:` property
They can also be loaded from a file,
using:
`templateUrl: path/to/file/template.html’
47. Templates
.directive('sampleDirective', function(){
return {
link: function(scope, element, attrs) {
// this example binds a behavior to the
// mouseenter event
element.bind("mouseenter", function(){
... do stuff after mouseenter ...
}
},
restrict: ‘E’,
template: ‘<div>Hello, World!</div>’
//or:
templateUrl: ‘path/to/file.html’
})
48. The Restrict Property
.directive('sampleDirective', function(){
return {
link: function(scope, element, attrs) {
// this example binds a behavior to the
// mouseenter event
element.bind("mouseenter", function(){
... do stuff after mouseenter ...
}
},
restrict: ‘E’,
template: <div>Hello, World!</div>
}
})
49. The Restrict Property
Remember that directives are re-usable
So, we can restrict the usage of a
directive to (a) specific context(s), so
that we don’t accidentally try to use it
in a situation it wasn’t designed for:
‘E’ = Element
‘A’ = Attribute
‘C’ = Class
‘M’ = Comment
Stack as a single string: ‘EACM’.
Defaults to ‘A’.
50. The Replace Property
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 esp critical when declaring as
an element...
54. Why Model-Driven?
After all, the imperative
approach works fine...
...if you’re omniscient
and precognitive.
... and you really, really
like refactoring.
55. Comparative Click-
Handlers: Imperative
“Do a whole bunch of stuff in
response to that click. Remember all
the things it should affect. Update
all those things. Try hard (and fail)
to do so without reading state from
the UI. Try hard (and fail) to
decompose these changes into reusable
functions. Try hard (and fail) to
make them declarative so I can easily
understand and maintain what's
happening."
56. Comparative Click-
Handlers: Angular
“Update some data, and/or send out a
notification. Done.” (Everything else
will happen in directives on the
affected elements.)
In those other directives: “react to
received events, or to data-changes.
Change only what’s local to the
element.”
60. How Can Directives
React to Stuff that
Happens Far, Far Away?
Again, with models & $watch!
But sometimes, the inheritance
chain isn’t a good solution. For
those times...
Angular events!
$on(), $emit(), $broadcast()
61. Advanced Topic:
Inter-Scope Communication
Use $watch to monitor properties of
local $scope or one it inherits from
That works great when you only need
data to flow in one direction (up)
and only on one branch of the tree.
What about when you need to go
downwards, or sideways?
Or a whole bunch of places at once?
63. Angular Events to
The Rescue!!!
Just like how a ‘click’ event bubbles
up through the DOM tree, you can
$emit() an Angular event up the
$scope tree, from any starting point.
Better than the DOM, you can also
$broadcast() an event down the $scope
tree.
$broadcast()-ing from $rootScope gets
you the whole shebang.
64.
65. Angular Events to
The Rescue!!!
With events, there’s no need to
laboriously climb your way up the
$scope tree. You also eliminate the
chance of getting the wrong scope.
You also get full de-coupling of a
controller/directive from a
particular place in your app. Use it
anywhere, $broadcast() everywhere.
66. Angular Events to
The Rescue!!!
And you don’t even need to predict
who all the recipients will be. By
sending:
$rootScope.$broadcast(‘gameOver’)
your whole app gets the information,
You can consume the event as many
places as you like, with:
$scope.$on(‘gameOver’, handlerFunc)
70. `$scope` vs. `scope`
$scope is assignable, but should be
reserved for angular functions to pass
into a controller, other context.
$scope is a shorthand, by which we're
calling the $scopeProvider, which is
Dependency-Injecting the scope for us.
There is a long-form that looks like
AMD, which is necessary when minifying,
so identifiers don't get munged.
scope is just our own, customizable
reference for directive’s local scope.
71. Link & Compile
Angular’s process for assembling a
page divides the work into multiple
phases: compile & link (pre- & post-)
Directives have a function for each
step
Think of link & compile like events, &
your functions firing as handlers
We usually only need the link
function.
72. Link vs. Compile
Compile: “deals with transforming the
template DOM. Since most directives do not
do template transformation, it is not used
often. Examples that require compile are
directives that transform template DOM,
such as ngRepeat, or load the contents
asynchronously, such as ngView.” ie., it
grabs HTML assets and morphs them if
necessary. Rarely needed by users.
Link: “responsible for registering DOM
listeners as well as updating the DOM. It
is executed after the template has been
cloned.” ie., where everything else goes.
73. Using a Config Object
(compile version)
If we need to use a compile function,
that becomes the relevant property on
the config object, and we return the
link function from inside it.
If we provide a value for the
`compile:` property, any value
provided for `link:` will be ignored.
A compile function *must* return a link
function.
74. Using a Config Object
(compile version example)
.directive('sampleDirective', function(){
return {
compile: function(element, attrs) {
... do compile stuff ...
return function Link(scope, element, attrs)
{... do link stuff ...})
},
restrict: ‘E’,
template: <div>Hello, World!</div>
}
})
75. And just to add more
complexity to that
structure...
76. Subdividing the Link
(config object example)
.directive('sampleDirective', function(){
return {
compile: function(element, attrs) {
... do compile stuff ...
return {
pre: function(scope, element, attrs)
{... do pre-link stuff ...},
post: function(scope, element, attrs)
{... do post-link stuff ...}
}
}}})
The link event actually consists of two
sub-events: pre-link and post-link,
which you can target:
77. Pre- vs. Post- Link
PRE-LINK:
“Executed before the child elements are
linked. Not safe to do DOM transformation
since the compiler linking function will
fail to locate the correct elements for
linking.”
POST-LINK:
“Executed after the child elements are
linked. It is safe to do DOM transformation
in the post-linking function."
But: don’t worry about these for now. Just
be aware of their existence, in case you see
them.
79. Directive Config Objects can provide
an optional controller.
At first, you think: why?
One option: alternative to routing
Routes have controllers
Sometimes, you don’t want routes
Often Overlooked:
Directive Controllers
80. Often Overlooked:
Directive Controllers
With its own controller, a directive
is a full, standalone interface
component, with its own data context,
which can be built or torn-down on
demand.
The controller inherits, normally,
from the rest of the $scope tree.
81. Isolate Scope
We have the option, in directives, of
using either:
the local $scope (from our own
controller, possibly)
a new, per-instance, ‘isolate
scope’
Isolate scopes still have a parent
$scope, but they’re *encapsulated*: or,
detached from the inheritance chain.
This is especially useful with repeats,
so variables can be fully local to the
instance
82. Creating Isolate Scope
Creating isolate scope is as simple as
an object literal assigned to the
`scope:` property on the config object:
.directive('sampleDirective', function(){
return {
link: function(scope, element, attrs) {
element.bind("mouseenter", function(){
... do stuff after mouseenter ...
}
},
restrict: ‘E’,
scope: {name: “Bob”,
hobby: “@”}
}})
84. 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:
.directive('sampleDirective', function(){
return {
link: function(scope, element, attrs) {},
restrict: ‘E’,
scope: {name: “Bob”,
hobby: “@”}
//alt. form:{hobby: ‘@hobby’}
}})
<sample-directive hobby=”scuba-diving”>
85. Data-Binding Operators
By default, an operator alone will be
assumed to refer to a same-named attr
Alternately, use form ‘@hobby’ to specify
Options:
‘@’- binds the local scope property to
primitive value of the DOM attribute. Result
is always a string. (Attributes are strings.)
‘=’- binds the local scope property to a
parent scope property having same name as the
value of the DOM attribute.
‘&’- binds the local scope property to the
output of an expression defined in the DOM
attribute. It’s like a function-wrapper.
86. Isolate Scope Data-Binding
The special operators make it seem more
exotic than it really is. For instance:
…is basically the same as doing this in
your controller:
The difference is all in the fact that
isolate scope is disconnected from the
$scope tree, overrides local controller
$scope. Plus flexible eval()…
scope.hobby = attrs.hobby;
scope: {hobby: “@”}
87. Final Thoughts
Your directives can have directives.
(In them and on them.) Truly, it can
be directives all the way down…