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