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.

  • 1,500