To make our code as easy to maintain as possible, we keep all data interactions in modules called Factories. Most of our factory files have about 10 or 12 callback functions and we try to keep them pretty simple. Moving them to typescript wasn’t very intuitive at first, but once we figured it out, it is a no-brainer.

Here’s a basic sample that we used to get a list of offices from the api server. You can add as many functions as you want.

We’ve moved much of our code over to TypeScript. There are a lot of benefits. To start, you can just dump your javascript files directly into typescript “.ts” files and it will compile them for you and web-essentials plugins will minify them for you everytime you click “save”.

The next step is to take advantage of the programming language and start using it as a real tool. The most effective approach to dealing with AngularJs in TypeScript, for me, has been to simply turn every controller and factory into a class object.

While you can go “all in” and make everything uber-typescripted, it is often easiest to just stick to a few basics and work with that for larger projects, especially when we’ve got 5 or 6 people of varied skill levels all working on the same project. Let’s keep it simple!

So, here is a basic rundown of making an Angularjs controller and using a factory to get some data over to it.