Getting Started:
DIRECTIVES
from zero to something-more-
than-zero in about 30 minutes
Ben Loveridge
$ whoami
@terminon
github.com/bloveridge
jasmine-reporters
jasmine-co
Angular.JS
directives
(almost)
nothing
<html ng-app ng-controller="formCtrl">
<head>
<script src="angular.min.js"></script>
</head>
<body>
<form>
<label>Age:</label>
<input type="text"
ng-model="yourAge"
pattern="^[0-9]+$"
required>
<h1>You are already {{age}}?</h1>
</form>
</body>
</html>Can you spot the directives?
<html ng-app ng-controller="formCtrl">
<head>
<script src="angular.min.js"></script>
</head>
<body>
<form>
<label>Age:</label>
<input type="text"
ng-model="yourAge"
pattern="^[0-9]+$"
required>
<h1>You are already {{age}}?</h1>
</form>
</body>
</html>Can you spot the directives?
loops
controllers
form validation
<input> binding
app bootstrapping
Think of directives like
functions
within HTML.
- Matias Niemelä
books.forEach(function(book) {
$('<div>')
.append(book.title)
.append(', by ')
.append(book.author)
.appendTo(document.body);
});<body ng-controller="mainCtrl as main">
<div ng-repeat="book in main.books">
{{book.title}}, by {{book.author}}
</div>
</body>Think of directives like
functions
within HTML.
- Matias Niemelä
prepare for battle! Grab your
M
A
C
E
CO MENT
TTRIBUTE
LASS
LEMENT
<!-- directive:outline blue -->M
Really delete?
<input class="confirm"
ng-model="confirm"/>
<input
x-autofocus="confirm === 'YES'"/>A
<span>Span 1</span
><span class="available-width">
Fill the rest.</span
><span>Span 2</span>C
<body ng-controller="MainCtrl as main">
<carousel images="main.portfolio"/>
</body>E
app.directive('datePicker', function() {
return {
restrict: 'MACE',
replace: true | false,
scope: true | false | Object,
template: '<div> ... </div>',
controller: function($attrs /*, etc */) {
// or `link` function
}
};
});What's it look like?
<date-picker>
<datePicker>
is it a good idea?
reusable?
testable?
PLAY TIME!
$ git clone -b step1 https://github.com/
bloveridge-demos/directives-101.git
$ npm install && bower install
Questions?
Hands On: Get Started Writing and Testing Angular Directives
By Ben Loveridge
Hands On: Get Started Writing and Testing Angular Directives
When considering AngularJS, you might find yourself swamped with examples of data binding, controllers, form validation... it's a long list. But what should really get you excited about AngularJS are directives! Directives might not quite be the Answer to the Ultimate Question of Life, the Universe, and Everything, but in regards to AngularJS they come pretty close. We'll talk about the different types of directives and directive options, when you should use directives, and more importantly how you can use them to make your code simpler and more maintainable. Have your favorite IDE ready if you want to follow along as we look at example directive code, learn how to test directives, and maybe even get our hands dirty.
