Skip to content

Lucca UI's typescript directive template

Paul LOUIS edited this page Mar 30, 2016 · 2 revisions

Directive is split in 8 files

  • .baseDir.ts : related to a grunt-ts issue
  • mydirective.html : html template
  • mydirective.classes.ts : typescript classes used by doc
  • mydirective.controller.ts : directive's controller if needed
  • mydirective.directive.ts : directive definition
  • mydirective.e2e.ts : end2end tests
  • mydirective.scope.ts : typescript class for scope
  • mydirective.spec.ts : unit tests

.baseDir.ts

// Ignore this file. See https://github.com/grunt-ts/grunt-ts/issues/77

mydirective.html

<div>Everything you can dream of</div>

mydirective.classes.ts

/// <reference path="../references.ts" />

module Lui.Directives.MyDirective {
	"use strict";

	export class Myclass {
	}
}

mydirective.controller.ts

/// <reference path="../references.ts" />

module Lui.Directives {

	"use strict";

	export class LuidMyDirectiveController {
		public static IID: string = "luidMyDirectiveController";
		public static $inject: Array<string> = ["$scope"];

		constructor($scope: IMydirectiveScope) {

			// Your code here

		}
	}

	angular.module("lui.directives")
		.controller(LuidMyDirectiveController.IID, LuidMyDirectiveController);

}

mydirective.directive.ts

/// <reference path="../references.ts" />

module Lui.Directives {

	"use strict";

	export interface ILuidMydirectiveAttributes extends ng.IAttributes {
		height: number;
	}

	export class LuidMydirective implements angular.IDirective {

		public static defaultHeight = 20;
		public static IID = "luidMydirective";
		public controller = "luidMydirectiveController";
		public restrict = "AE";
		public scope = { header: "=", height: "@", datas: "=" };
		public templateUrl = "lui/templates/mydirective/mydirective.html";

		public static Factory(): angular.IDirectiveFactory {
			let directive = () => { return new LuidMydirective(); };
			directive.$inject = [];
			return directive;
		}

		constructor() {
			// Constructor code here
		};

		public link: ng.IDirectiveLinkFn = (scope: IMydirectiveScope, element: ng.IAugmentedJQuery, attrs: ILuidMydirectiveAttributes): void => {

			// link method here

		};
	}

	angular.module("lui.directives")
		.directive(LuidMydirective.IID, LuidMydirective.Factory());

}

mydirective.e2e.ts

/// <reference path="../references.spec.ts" />

module Lui.Directives.Mydirective.Test {
	"use strict";

	describe("luidMydirective", (): void => {

		beforeEach((): void => {
			// do things
		});

		it("should test things", (): void => {
			expect(true).toBeTruthy();
		});
	});
}

mydirective.scope.ts

/// <reference path="../references.ts" />

module Lui.Directives {

	"use strict";

	export interface IMydirectiveScope extends angular.IScope {
	}

}