I’ve been working with TypeScript since it was released and I have to say I love it. Over the course of the last 9 months I’ve learnt a lot about the language as well as using it within a number of IDE’s and with lots of libraries. At work we are currently building a very large AngularJS + TypeScript application for a front office environment. I plan to blog some of the things I have learnt during this time.
AngularJS is an MVC/MVVM SPA application framework from Google. The project is open source and comes with a number of powerful features to help kick start you applications. These include powerful data binding, a templating engine, dependency injection, routing and the ability to extend HTML with your own custom tags which works across browsers.
I believe that AngularJS is probably the best framework out there at the moment for building your SPA’s. I have tried knockout and ember etc but Angular seems to have the most familiar features that I am used to as a .net/xaml developer moving back into the web world. In fact I’d go so far as to say that the Angular boys have taken quite a few tips from the WPF model.
Lets create the HTML
For the purpose of this post I am going to focus on building a hello world application in Webstorm. I originally started TypeScript using Visual Studio 2012 but as time has progressed I have found I have transitioned JetBrains tools.
So first up, if you want to use TypeScript in Webstorm you’re going to need 6.0+, so go download it and once stared create a new empty project in the location of your choice. Next up lets create a really simple screen, the html below, what we want is an input field, a button and somewhere to display the text to the user. This shown below.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World - Typescript and Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="HelloWorldController">
<div>
<input type="text" ng-model="inputText" />
</div>
<div>
<button ng-click="onDisplay()">Display me</button>
</div>
<div>
<h1>{{displayText}}</h1>
</div>
</div>
</body>
</html>
Ok everything is setup for us to get started, now first thing we want to do is pull in AngularJS. For the sake of this example I’m happy to use the cdn version which can be found here https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js. After you have done this add a app.js to the head. We haven’t created this file yet but we will come back to that later.
Bootstrapping our app
AngularJs comes with a number of built extensions to html called directives which allow you to quickly build you app in a declarative way. The first directive we are going to look at is the ng-app directive. This attribute can be applied to your html tag and simply allows angular to know that there is an angular app in scope and that is should initialize itself.
If you run the app at this point you’ll see nothing happens, this because we haven’t actually written and code, as mentioned previously Angular uses an MVC pattern. Therefore to add behaviour to your app we are going to have to create a simple controller and bind it to the DOM somehow. To do this we use another angular directive called ng-controller. I’m not going to get into the details of the ng-controller directive right now but just know that it can be applied to any element and that descendants of this element will have access to a shared scope which the controller provides. We specify a controller name for the directive HelloWorldController. Angular will attempt to resolve this controller automatically when the app starts.
Data binding
The last things we need to do to our html page is to specify some data binding. If you’ve worked in WPF before you will find there are a lot of similarities. The Angular data binding engine is incredibly flexible, I’d say more so compared to wpf and implements a dirty checking algorithm for deciding when update the DOM. There is a great in depth post on stack overflow here.
In our little app we want to be able to capture the text that a user types into an input element. Normally in jquery we would have do some fancy event handling to manage all this however in Angular we have the ng-model directive which can do this nicely. This works by basically monitoring the changes to the input and when a change is received it updates the “scope” object to store the data.
Next we want display the result of the input value prefixed with “hello”. To achieve this we can use one of Angulars coolest features “expression binding”. Assume for the moment that our scope object (that we haven’t built yet) has a property called displayText. In order for us to inject that into the DOM all we need to do is use double curlies. {{displayText}}. I can’t stress how easy this is and also how much time you will save by not having to manually manipulate the DOM.
So now we are almost there, the last thing we want to do is add some behaviour to our display button so that when the use clicks the button the displayText is updated and shown to the user. To do this we have our final directive for this post ng-click. ng-click provides a commanding pattern so that we can invoked custom behavior easily. You can also bind to functions but that’s for another post.
The binding for ng-click is pretty simple, all we need to do is state what function we want to run when the button is clicked. Cool we’re all set……….LETS write the controller and make all this work.
Setting up Typescript compilation in Webstorm
It’s now time to get started with TypeScript, in Webstorm go to add a new file, you will see that typescript is now a supported option. Go ahead and add a app.ts file. At this point Webstorm will display a big green banner asking you if you would like to setup a file watcher to compile TS files in JS. Go ahead and click add watcher. Now it’s important to note here that you may not have TypeScript compiler installed on your machine. You can get the compiler a couple of ways, either download the installer from the TypeScriptLang site or run the node npm command to pull it down. Once you have it on your machine just point Webstorm at that exe or bat file and Webstorm will do the rest.
Building our controller
As we mentioned previously we the ng-controller directive instructs angular to go look for a controller with the name we specified. So we can now build that controller in typescript. This class is really simple and should be self explanatory but what is important to note is that we are using TypeScript’s classes in order to provide our controller. Classes will be coming to JavaScript in ES6 but TypeScript allows us to use them now which is very cool. What is also very cool is that TypeScript classes get compiled into constructor functions which is exactly what AngularJS actually requires for its controllers. I’ve got the TypeScript code and the compiled JavaScript below for you to review.
class HelloWorldController{
constructor(private $scope){
$scope.prefixText = "Hello ";
$scope.inputText = " ";
$scope.displayText = "";
$scope.onDisplay = () => {
this.$scope.displayText = this.$scope.prefixText + this.$scope.inputText;
};
}
}
var HelloWorldController = (function () {
function HelloWorldController($scope) {
this.$scope = $scope;
var _this = this;
$scope.prefixText = "Hello ";
$scope.inputText = " ";
$scope.displayText = "";
$scope.onDisplay = function () {
_this.$scope.displayText = _this.$scope.prefixText + _this.$scope.inputText;
};
}
return HelloWorldController;
})();
And with we are done, we have a simple “Hello World” SPA built in Typescript and AngularJs. You can grab the source for this post here.
In our next post we will look at how we can use the AngularJS API inside of TypeScript and get full intellisense support.
Tagged: angularjs, JavaScript, typescript, webstorm
Lord Hanson's musings 
[…] in the last post we created a really simple “Hello World” application using AngularJS and TypeScript. This was […]