Home
Do you write your Angular 1.x directives in TypeScript?
  v4.0 Posted at 11/01/2016 7:18 PM by Duncan Hunter

​​​​​​​​​​​​​​Angular 1.x directives are awesome and they help you reuse your code base by being able to drop directives (aka reuasable HTML elements) into several pages without having to duplicate your code base.​

Writing your AngularJS 1.x directives in Typescript will help in the following ways:

  1. ​You will more easily migrate to Angular2 which is written in TypeScript
  2. Your code will be more robust with compile time checking avoiding errors you might miss or not see till you run the application in the browser.
  3. You can more easily manage your code by reusing directives and not duplicating code.
  4. If you keep your DDO (Directive Definition Object) seperate to your directive controller logic you can avoid using $scope and further be ready to migrate to Angular2. You can also reuse the directive controller with other parts of your application. 

Writing Angular 1.x directives in Typescript can be a challenge with only a few examples available online. Most examples of Angular 1.x directives are in JavaScript and converting them to TypeScript versions means you need to have a good understanding of how it all works. Many examples that are available online do it a little differently from each other. 

​​HTML

​​​<current-value></current-value​>

​Typescript

   module app.widgets {
    'use strict';

    class CurrentValueDirectiveController {
        amount: number;

        static $inject = ['investmentReportsService'];
        constructor(private investmentReportsService: app.dataServices.InvestmentService) {
        }

        setCurrentValue() {
            this.investmentReportsService.investmentSummary(this.amount)
                .then((response) => {
                    this.currentValue = response.Data.TotalMarket;
                });
        }
    }​

    function CurrentValueDirective(): ng.IDirective {
        return {
            restrict = 'E';
            templateUrl = 'app/widgets/currentValue/currentValue.directive.html';
            controller = CurrentValueDirectiveController;
            controllerAs = 'currentValueDirCtrl';
            bindToController = true;
            scope = {
                amount: '='
            }
        }
    }

    angular
        .module('app.widgets')
        .directive('currentValue', CurrentValueDirective);
}​

​​

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.