(This post is part of my “from scratch” AngularJS project. If you are feeling lost, the first post is here.)

Going back to our first controller, we had to throw a lot of code into our shell.html file to display our game. This code had to know a lot about how the GameController functioned and if we wanted to have multiple copies throughout the application, we would need to duplicate this code every time.

Thankfully, AngularJS gives us the ability to place complex objects into our html code with very simple format. This ability is called angular “directives”. Angular is built on directives. In fact, we’ve already used a few built in directives in the shell.html file: “ng-if”, “ng-controller”, “ng-click”. Let’s get started making our own!

We are going to create a new file called game.directive.js in our app/game folder. Here is that file:

(function(){
    'use strict';

    angular
        .module('blackjack.game')
        .directive('blackjackGame', blackjackGame);

    function blackjackGame(){
        return {
            restrict: 'E',
            templateUrl: 'app/game/game.directive.html',
            controller: 'GameController',
            controllerAs: 'game'
        }
    }
})();

Whatever we call our directive will be what is used in the implementation of it in html. Angular auto converts our camel case “blackjackGame” into “blackjack-game” for usage. There is also a trend (that I’m following in this example) of prefixing your directive with some sort of namespace tactic. Our namespace is ‘blackjack’. Had we called our directive “game” instead, then down the road used some sort of third party directive with the same name, we would’ve had issues. This way eliminates those issues.

The format for the directive method has some complicated options, but we will keep this one reasonably sane. I’ve previously written about the ‘restrict’ option, but just know that ‘E’ will require us to use the element name like so:

<blackjack-game></blackjack-game>

The controller and controllerAs replaces the “ng-controller=’GameController as game'” from shell.html. The templateUrl tells angular where to get the html to fill this directive with. game.directive.html looks like so:

<div>
 <div ng-if="!game.started">
 <button class="btn btn-primary" ng-click="game.start()">Start Game</button>
 </div>
 <div ng-if="game.started">
 Game In Progress
 <button class="btn btn-danger" ng-click="game.end()">End Game</button>
 </div>
</div>

Starting to look familiar? We’ve simply ripped this out of the shell.html file. Now our main area in shell.html looks like this:

<div class="primary-area">
 <h1>Welcome to Angular Blackjack</h1>
 <blackjack-game></blackjack-game>
</div>

This makes the main html component easy to read and understand what is happening on the page. There are lots more options for directives, but since this is a very basic one, we won’t configure it any more.

We’ve now created our first custom directive and replaced lots of lines of code in our template with one simple line!

Here is the result of our work

Hope you all are enjoying this series. Please feel free to reach out with any questions or concerns.

Up Next: Services