future of scripting
TRANSCRIPT
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