write angularJS code using typescript

 

BEST: http://www.slideshare.net/jeremylikness/dev-link-likness-angularjs-and-typescript

http://www.piotrwalat.net/using-typescript-with-angularjs-and-web-api/

http://stackoverflow.com/questions/17944419/angularjs-typescript-directive

http://onoffswitch.net/angular-typescript-architecture/

See TodoMVC example here
https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/typescript-angular

BEST: http://notebookheavy.com/2013/05/22/angularjs-and-typescript/

BEST: http://blog.docmunch.com/blog/2013/angularjs-typescript-a-rich-maintainable-front-end-webapp-plus-a-few-minor-headaches

http://coderjournal.com/2013/07/angularjs-and-typescript/

http://3×14159265.tumblr.com/post/58365600915/improve-client-side-development-with-typescript-and

 

GOTCHAS

  1. 1.       Use functions for your directive definitions. OR (The issue is not related to Typescript, but to AngularJS Directives. Changing templateUrl to templateand using inline code, helps to resolve the errors. It’s AngularJS Issue, more on that:https://github.com/angular/angular.js/issues/1903 )

This is because directives (unlike controllers) are called without the new operator. So if you have something like:

class Test{

foo = “EAC”;

constructor(){

var directive:any = {};

directive.restrict = this.foo;

}

}

It compiles to incorrect javascript. As the function Test is called without the new operator and that means that this refers to window and not an instance of the class. So you can’t use anything defined outside the constructor anyways. I recommend something like:

function foo():ng.IDirective{

return {

restrict: ‘EAC’;

}

}

This way typescript will help you write correct javascript for angular instead of point you in the wrong way.

  1. 2.       Use classes for your controller Controllers inside of directives are also called with the new operator. Same as controllers outside : http://www.youtube.com/watch?v=WdtVn_8K17E Again let typescript help you with the meaning of this inside the controller definition. Plus you can use the type for the controller in the child directive something like (for typesafety and inference):

link: function (scope, iElement, iAttrs, simplrEditable:YourControllerClass)

For injection into directive functions I still use $inject. I have the following interface definition :

interface Function{

$inject:string[]

}

This means you can do :

foo.$inject = [‘$compile’]; // e.g

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s