Umbraco, Angular and Typescript

Making typescript a part of the way you work

HELLO

PER

Agenda

Umbraco + angular Tooling Benefits

Perspective

MEMEMEMEMEMEMEMEMEMEMEME

Umbraco

package.manifest

{ /views/license.html /scripts/controller.js /styles/style.css}

Server

Browser

{ /views/license. /scripts/contro /styles/style. }

Hello world demo

tooling

automation testing

optimization

JS Tooling Ecosystem• Code Editor (Atom,Sublime,Brackets Visual Studio)

• Build system (MsBuild, Grunt, Gulp, Jake, Broccoli)

• Dependencies (Nuget, Bower, npm, tsd)

• Compiler (tsc)

• Scaffolding (yeoman)

• Unit testing (karma, TsUnit, jasmine)

> npm install typescript -g> tsc file.ts

My Yeoman workflow

GruntAtom Karma

Grunt-ts Grunt-tsd

Atom-Typescript

My Yeoman with Typescript workflow

JSvsTS

syntax

angular.module(‘umbraco').controller('DriversLicenseEditorController', ['$scope',

function($scope) {

//your code

}

]);

module License.Controllers {

export class LcsController {static $inject = [‘$scope'];

constructor(private $scope) {//your code

}

angular.module(‘umbraco').controller(‘LicenseController',LcsController);

}

angular.module(‘umbraco').directive('someDirective', [‘$timeout',

function($timeout) {

return { link: link, templateUrl: ‘view.html', restrict: 'EA' };

function link(scope, element, attrs) { /* your code */ }}]);

class MyDirective { public link: (scope: ng.IScope,

element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;

public templateUrl = ‘view.html';

constructor(/*list of dependencies*/) { this.link = (scope: ng.IScope,

element: ng.IAugmentedJQuery, attrs: ng.IAttributes) =>

{ /*handle all your linking requirements here*/ };

} public static Factory() { var directive = (/*list of dependencies*/) => { return new MyDirective(/*list of dependencies*/); };

directive['$inject'] = ['/*list of dependencies*/']; return directive; }}angular.module(“umbraco”, MyDirective.Factory() );

module Project.Directives { export interface IMyScope: ng.IScope { name: string; }

export function MyDirective(): ng.IDirective { return { template: '<div>{{name}}</div>', scope : {}, link : (scope: IMyScope) => { scope.name = 'Aaron'; } }; }

angular.module(“umbraco”, MyDirective );}

structure

scope, model interfaces any => concrete

definitions

> npm install tsd -g> tsd install jquery> tsd install angularjs

Angular.d.ts

discovery

service discovery

tooling

You all get your own workflow!

• Code Editor (Atom,Sublime,Brackets Visual Studio)

• Build system (MsBuild, Grunt, Gulp, Jake, Broccoli)

• Dependencies (Nuget, Bower, npm, tsd)

• Compiler (tsc)

• Scaffolding (yeoman)

• Unit testing (karma, TsUnit, jasmine)

perspective

Future of JS now Angular 2

In developement Not M$ only

Thanks!Per Ploug

@pploug - per@umbraco.dk

github.com/perploug