Angular.JS

DIRECTIVES

The next 42

Ben Loveridge

$ whoami

@terminon

github.com/bloveridge

jasmine-reporters

Follow along

bnjm.in/the-next-42

leave feedback

bnjm.in/the-next-42-feedback

Joind.in

joind.in/14021

GOALS

What are directives?

are they really the next 42?

When should I use directives?

How do I write and test them?

GOALS

What are directives?

are they really the next 42?

When should I use directives?

How do I write and test them?

CRASH COURSE

Have you looked at

Angular.JS  ?

""

""

Google Search Trends, Jan 2013 - May 2015

mvw

{{ data.binding }}

dependency injection

services

Filters

factories

mvw

{{ data.binding }}

dependency injection

services

Filters

factories

YAWN

Directive?

© Christos Georghiou

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?

<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

books.forEach(function(book) {
    $('<div>')
        .append(book.title)
        .append(', by ')
        .append(book.author)
        .appendTo(document.body);
});
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>
$(myDiv).on('click', function($event) {
    mainCtrl.handleClick();
    $event.stopPropagation();
};
$(myDiv).on('click', function($event) {
    mainCtrl.handleClick();
    $event.stopPropagation();
};
<body ng-controller="mainCtrl as mainCtrl">
    <div ng-click="
        mainCtrl.handleClick();
        $event.stopPropagation();
    ">Click me!</div>
</body>
$(myDiv).on('click', function($event) {
    mainCtrl.handleClick();
    $event.stopPropagation();
};
<body ng-controller="mainCtrl as mainCtrl">
    <div ng-click="
        mainCtrl.handleClick();
        $event.stopPropagation();
    ">Click me!</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>',
    link: function(scope, elem, attrs) {
      // awesome things
    }
  };
});

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/the-next-42.git

Questions?

leave feedback

bnjm.in/the-next-42-feedback

Joind.in

joind.in/14021

Made with Slides.com