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

AngularJS Directives: The Next 42

By Ben Loveridge

Made with Slides.com

AngularJS Directives: The Next 42

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.

  • 2,762

More from Ben Loveridge