In this blog entry, I want to attempt to put together a simple Angular scenario where the relevance of TypeScript is shown, while using NetBeans IDE 8.1. I have struggled to find complete and correct Angular/TypeScript instructions for a simple scenario anywhere on-line. Most scenarios use earlier versions of Angular, which turn out to not work correctly with Angular 1.4. Of course, as I am sure will be pointed out to me in the comments, I should be using Angular 2. Well, I'll leave that for another day, also because the scenario below works pretty well and it shows a range of handy features from NetBeans IDE 8.1, together with the Everlaw TypeScript plugin for NetBeans IDE.
In the end, we're going to have a project structure that looks as follows:
Let's get started.
1. Setting Up. Install TypeScript and make sure the TypeScript compiler works correctly from your command line. Go here to get it. Install the Everlaw TypeScript plugin into NetBeans IDE 8.1. Go here to get it, at the time of writing v18.104.22.168 is the latest release and the one I am using below.
3. Configuring the Application. Right-click the project and select Properties. In the Bower section, add the latest Angular version, which at the moment is 1.4.8:
4. Using the TypeScript Definition Manager. Read this article and then install and use the "tsd" command to get a typed Angular and JQuery. I have put them here, as you can see, within the "ts" folder:
5. Creating the HTML and TS Files. Go to File | New File and create a new TypeScript file named "app":
And now you can use TypeScript with Angular 1.4! Here's a simple example and whenever you save the file, you'll see you have an "app.js" created for you, which you will see is very verbose when you compare it to your simple TypeScript file:
Here's the content of the "index.html" file, for using the "app.js" file created by TypeScript:
<title>Hello World - Typescript and Angular</title>
Name: <input type="text" ng-model="firstName" />
Surname: <input type="text" ng-model="lastName" />
<button ng-click="greetMe()">Greet me</button>
The Everlaw TypeScript plugin for NetBeans IDE is really really really nice. Give it a try with the instructions above and let me know how it works for you!