![angular.module(‘umbraco')
.controller('DriversLicenseEditorController',
['$scope',
function($scope) {
//your code
}
]);](https://image.slidesharecdn.com/futureofscripting-150407014748-conversion-gate01/85/Future-of-scripting-20-320.jpg)
![module License.Controllers {
export class LcsController {
static $inject = [‘$scope'];
constructor(private $scope) {
//your code
}
angular.module(‘umbraco')
.controller(‘LicenseController',LcsController);
}](https://image.slidesharecdn.com/futureofscripting-150407014748-conversion-gate01/85/Future-of-scripting-21-320.jpg)
![angular.module(‘umbraco')
.directive('someDirective',
[‘$timeout',
function($timeout) {
return {
link: link,
templateUrl: ‘view.html',
restrict: 'EA'
};
function link(scope, element, attrs) {
/* your code */
}
}]);](https://image.slidesharecdn.com/futureofscripting-150407014748-conversion-gate01/85/Future-of-scripting-22-320.jpg)
![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() );](https://image.slidesharecdn.com/futureofscripting-150407014748-conversion-gate01/85/Future-of-scripting-23-320.jpg)
Future of scripting
- 1. Umbraco, Angular and Typescript Making typescript a part of the way you work
- 2. HELLO
- 3. PER
- 4. Agenda
- 7. Umbraco
- 10. tooling
- 12. 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)
- 13. > npm install typescript -g > tsc file.ts
- 17. My Yeoman with Typescript workflow
- 18. JSvsTS
- 19. syntax
- 21. module License.Controllers { export class LcsController { static $inject = [‘$scope']; constructor(private $scope) { //your code } angular.module(‘umbraco') .controller(‘LicenseController',LcsController); }
- 22. angular.module(‘umbraco') .directive('someDirective', [‘$timeout', function($timeout) { return { link: link, templateUrl: ‘view.html', restrict: 'EA' }; function link(scope, element, attrs) { /* your code */ } }]);
- 23. 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() );
- 24. 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 ); }
- 26. structure
- 28. scope, model interfaces any => concrete
- 30. definitions
- 32. > npm install tsd -g > tsd install jquery > tsd install angularjs
- 33. Angular.d.ts
- 34. discovery
- 36. tooling
- 37. You all get your own workflow!
- 38. • 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)
- 39. perspective
- 40. Future of JS now Angular 2 In developement Not M$ only
- 41. Thanks! Per Ploug @pploug - per@umbraco.dk github.com/perploug