X

Geertjan's Blog

  • January 17, 2016

Hello World with TypeScript and Angular 1.4

Geertjan Wielenga
Product Manager

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 v1.7.5.1 is the latest release and the one I am using below. 

2. Creating the Application. In NetBeans IDE 8.1, go to File | New Project, choose HTML5/JavaScript | HTML5/JS Application. Click Next. Give your application a name, e.g., "HelloAngularTS". Click Next, don't select anything, i.e., use "No Site Template", and click Next again. Deselect all the checkboxes, except for "Create bower.json". Click Finish.

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:

In the TypeScript section, click on "Compile on Save", i.e., whenever we save our TypeScript file, the Everlaw TypeScript plugin will pass it to the TypeScript compiler and create/recreate a JavaScript file for us:



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:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello World - Typescript and Angular</title>
<script src="bower_components/angular/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="GreetingController">
<div>
Name: <input type="text" ng-model="firstName" />
Surname: <input type="text" ng-model="lastName" />
</div>
<br/>
<div>
<button ng-click="greetMe()">Greet me</button>
</div>
<div>
<h1>{{fullName}}</h1>
</div>
</div>
</body>
</html>

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!

Join the discussion

Comments ( 9 )
  • guest Wednesday, January 20, 2016

    Please accept this as constructive criticism. I agree, angular and typescript work great together. However this example code could have been done a lot better. I would suggest that you practiced this code (and any other code for that matter) on your local system first, rather than throwing your first attempt onto the web. There are developers out there that are unfamiliar with angular and/or typescript - first attempts like this one would only prove to be more harmful than good. I encourage you to read up on best practices for angular and typescript, as well as writing comments in your code (and example code). With regards to the example code - well done, it is a step into the right direction!


  • Geertjan Wednesday, January 20, 2016

    Hmmmm... :-) How constructive is it to use the phrase "throwing your first attempt onto the web"? It's quite possibly the LEAST constructive criticism I have yet had over the last 15 years or so. Indeed, I did "practice" on my "local system" first, which you can see for yourself, I think, when you look at the screenshots of my local application...


  • Carl James Wednesday, January 20, 2016

    It's amazing that the author of this blog published the "constructive criticism", at all. I would have deleted it and blacklisted this idiot.


  • guest Wednesday, January 20, 2016

    @Carl James - I wasn't aware that I should sugarcoat my words... BTW - points for criticizing my feedback and calling me an idiot. Normally trolls do things like that, but I'm confident that you are not a troll... @Geertjan thanks for the PM - but what my initial feedback comes down to is this - do more research on the topics you want to 'post onto the web'. I like to elaborate on the comment I made earlier - to me this code looks a lot like a first attempt at the code you used in this post. Regardless if this post was a simple example or not, the code have been written a lot better. I encourage you practice and experiment more with angular + typescript.


  • Naomi Wednesday, January 20, 2016

    'guest', you have again criticized without giving the faintest clue about the reason for your critique. Clearly the code here is a simple 'hello world' scenario. Your weird lengthy meaningless verbosity is indeed idiotic.


  • Carl James Wednesday, January 20, 2016

    I encourage you practice and experiment more with "constructive criticism".


  • Jaroslav Birch Wednesday, January 20, 2016

    "I like to elaborate on... ..the code have been written a lot better...". Hmmm. The code is fine. Your English on the other hand...


  • Simon Thursday, January 21, 2016

    I encourage that guy to practice and experiment more at being less of a condescending jackass.


  • guest Thursday, April 21, 2016

    Great example to get up and running with angular and typescript. For those you are having trouble getting the tsd angular and jquery installed under 'Site Root' follow the steps below:

    1) Right click on Site Root (public_html) folder and select New > Folder and enter ts in the Folder Name and click Finish.

    2) Now right click on the ts folder and select Tools > Open in Terminal (one of the cool advantage of using Net Beans). This will open a terminal window at the bottom of the screen with your /home/{{username}}. Now cd into the ts folder by copying the path from the Properties of ts folder. for example - C:\\Users\\username\\NetBeansProjects\\HelloAngularTS\\public_html\\ts (Note: you may need double back slashes in this window).

    3) Finally, run the following commands -

    tsd init

    tsd query angular --action install

    tsd query jquery --action install

    4) Now you should be able to see the typings folder under ts with separate angularjs and jquery folders along with tsd.d.ts file.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.