As a first step in our sample we want to create a small web API using NodeJS + TypeScript. Recently, Microsoft has launched its NodeJS Tools for Visual Studio. So if you are used to developing with Visual Studio, you can stick to the IDE you are used to even when writing NodeJS code.
As a starting point we create a new NodeJS application called Server in Visual Studio. Note that you have to have the NodeJS Tools installed in Visual Studio 2013 Update 2 for that.
The resulting project contains a lot of stuff that we do not need for our example. You can clean up the project and delete all HTML/CSS-generation-related stuff until your project structure looks something like this:
The project template already added the express framework. It enables us to build web APIs without having to care for all the low-level details. As we are not only going to implement GET requests but POST requests (for inserting new data), too, we will need to parse JSON in the HTTP request body. For that, we need the body-parser module, too. Therefore we have to extend the package.json file a bit:
Well, strictly speaking we would not have to edit package.json by hand. We also do not need to call npm install in a command line prompt to download the additional package. The NodeJS tools integrate these things directly into Visual Studio (similar to NuGet which some of you might know from .NET development).
Now we can implement our web API. Here is the source code. Please take a look at the comments. They will lead you through this sample step by step.
The important part to note here is the Typescript integration. On the server side, we use a Typescript interface to define a data structure for our web API. Additionally, we add a class with business logic.
Remember these types, we will reuse exactly the same code on the client-side later. That’s the beauty of having the same language – Typescript – on the client and the server.
Step 2: Test Your Web API
With the NodeJS Tools for Visual Studio you can debug your code just be hitting F5. Try to set breakpoints in your Typescript NodeJS code. It will work just fine. You can even use features like Watch Expressions, etc. Nice, isn’t it?
The following screenshot shows how to create test calls to your web API with Fiddler. It also shows how the request hits a breakpoint in NodeJS Typescript code in Visual Studio and demonstrates watch expressions.
Step 3: Build the Client
Preparing the Project
Next, we create a client application using AngularJS and Typescript. For that, create a new Typescript project called Client in Visual Studio:
We need a few more components for our clients. In contrast to NodeJS where we used NPM (Node Package Manager), we now use NuGet. You can either right-click on the project, select Manage NuGet Packages and select the packages by hand or you can copy/past the following code in your packages.config file:
Angular Controllers in Typescript, Data Binding
First, let us display our list or existing registrations. For that, we need to create an AngularJS controller. Controller, like in MVC (Model-View-Controller). Take a look at the following code.
Do you recognize the code reuse from the server? The client and the server share the same data structure and the same business logic.
For the sake of simplicity, I copy the code from the server to the client. In practice, you would probably create a shared module and reuse identical files. If you follow along, call the following file registrations.ts.
Having this controller, building the data-bound client code is a piece of cake. Here is the HTML from registrations.html including the AngularJS data binding attributes:
We do not only want to view the registrations. We also want to be able to register new people. Therefore we create an additional controller called register.ts:
And here is the corresponding HTML file called register.html:
Single Page App (SPA)
Did you recognize that the HTML code above is not complete? They have only been fragments. The reason for this is that we want to use AngularJS routing service to build a Single Page App (SPA). A SPA loads a single file and loads the necessary view fragments in the background.
We need an HTML file that hosts our fragments. Here is the code for index.html. Note the attribute ng-view. This is where the fragments shown above will be inserted.
Finally, here is the corresponding Typescript file index.ts:
Step 4: Joining Server and Client
So how can we bring server and client together? It turns out that the express framework we used in our NodeJS server can serve static files, too. Just add one line to the server’s app.ts file:
That’s it. You can try your client. The following screenshot shows our client in Chrome’s debugger where you can watch the REST API work in the background.
The following screenshot shows the registration form:
Play with your application. Try debugging NodeJS and client-side Typescript code. Test your business logic. Maybe add another controller. If you want to experiment, add basic authentication to your web API and create a third view for logging in.
Top Five Take-Aways
NodeJS + Typescript development now works perfectly fine with the new NodeJS Tools for Visual Studio.
Typescript gives you type-safety – on the server as well as on the client.
Easily share data structures (interfaces) and business logic between client and server. This reduces implementation effort.
Data binding greatly reduces the amount of code you have to write for data oriented web applications.
The MVC patterns enable you to write unit tests for your UI logic and your business logic without having to create automated UI tests.
Yesterday, I did a session at the .NET Stammtisch Linz. I spoke about latest Docker developments relevant for .NET developers. I focused on new features in Visual Studio and .NET base images available in the Docker Hub for .NET Core and .NET Framework 4.7. In this post I share a recording of my session. Take a look if you want to hear me speaking in my native Upper Austrian dialect ;-)
I regularly do trainings and workshops about web development with TypeScript and Angular. This week, I worked with a group of developers who have a non-web development background. They asked me to summarize the most important readings for learning about modern web development. Their problem isn't a lack of information. The amount of information on the internet is overwhelming and they asked for the really important resources. Here is my best-of-list.
Time Cockpit Newsletter
Thanks for your registration! You are almost finished. We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you.