Taking JavaScript and .NET to the cloud

Menu

TypeScript and the MEAN Stack: Getting started Part 3

Introduction

Up until now, we set up the main tools necessary to get TypeScript and the MEAN stack up and running. We got a basic server application running against MongoDB. Today we will dive into the client side, getting a basic front-end written up using AngularJS.

Bower

Similar to npm, bower is a package manager that aids in obtaining packages for use on the front-end. Installation can be done via npm:

$ npm install –g bower

We will create two files to have bower working nicely in our project. The file .bowerrc will allow us to specify where the packages go, and bower.json works in a similar way to package.json, but for bower instead of npm:

Now that we have the packages installed, we need to grab the type definition files for angular, bootstrap and jQuery, since angular has a dependency on jQuery. This is the exact same process described in previous posts.

Updates on the server

Updates on User Controller

The controller on the server needs to be updated to return JSON instead of plain text. We also need a method to retrieve all the users:

Client code

From the client side, we will go ahead and create a page for users and a controller. Angular offers many more things, but again, we are keeping this simple for now, making sure we have basic connectivity and data retrieval out of the way. Later on we will refactor this code and follow established practices.

Let’s go ahead and create the necessary files and folders in the folder public:

The Controller

For the sake of brevity, we will create the User class, the controller and relevant interfaces in a single file in userClientController.ts:

Run the application

Once we run the application, we should be greeted with this simple view:

We can now enter a name and hit the “+” button. The user “angular” should appear on the list.

Let’s check to see what’s happening on the server. Having a look at some node output, we see a post made:

And finally, having a look at what’s in MongoDB:

Great! So we go a (very) basic application working!

Conclusion

Now we have successfully hooked up an application that has a Node/Express back-end, an Angular front-end, and a MongoDB data store. The application itself is very basic, having been used as an opportunity to dig into TypeScript, but is a decent starting point for further investigation. I will continue digging into these concepts, aiming to flesh out the core idea into a more fully-fledged stack for various projects.