How to use NodeJS, Express, and Bower to Create AngularJS apps

Read full article on the Infragistics blog

Recently I heard – “IDE makes you ignorant, so do not over rely on the IDE”. Being a .NET developer, we cannot think our lives beyond Visual Studio and hence somewhere we become ignorant. We really don’t care about the behind the scene complexities. We create a project by selecting a specific project template and mange different required packages using the NuGet package manager. Super simple? Isn’t it?

This article may help a .NET developer to use JavaScript at the server and at the client to create an application. NodeJS will run at the server and Angular to create application for the client.

image

Note: Image taken from the web. A special thanks to original image creator.

We will start with creating an angular application in the Visual Studio and then proceed to create the same angular application using few components of the MEAN stack. We will use NodeJS, Express, Bower to create the angular application.

We will cover the following topics,

  • AngularJS application in Visual Studio
  • Installing the NodeJS on Windows
  • Setting up the sublime text for JavaScript development
  • Installing Bower
  • Installing angular dependencies using the bower
  • Creating angular application
  • Installing Express
  • Creating web server using the express to serve the angular app

Read full article on the Infragistics blog

Understanding routing of expressJS in Node.JS

For further advanced reading you may want to prefer REST API using express .

I have started learning Node.JS and for web apps most popular ExpressJS framework. Well few call it big library as well. As learner does not matter whether big library or framework, let’s start exploring.

While exploring express realised that one of the most vital concept of express is Routing. In this post I will try to share my learning on express Routing with you. If you are starting with Express feel free to have a look on Setup Express and run first application in Node.js .

Let us assume that you have created first site using express. In root folder you will find App.js file. Go ahead and open App.js. In top you will find two modules express and http are imported along with other modules.

clip_image001

 

Express uses HTTP verbs to perform routings hence HTTP module is imported and of course to work with express framework express module is imported. Since express routes are based on HTTP verbs so method names are also matched. Refer following table for same.

clip_image003

You can create a route as below,

 

clip_image004

 

Above route will be accessed using HTTP GET on application being accessed on base address. As shown below you can see that plain text is sent in response object from express application.

clip_image005

In Express if you have two route paths with same address rather throwing error it will pick route path defined first in App.js

Assume you want to pass parameter while doing HTTP GET operation in above route then you have two choices. Either create two routes as shown below.

clip_image007

Second route will be accessed when a parameter will be passed while performing HTTP GET. So if you access application as below you will get served from second route path.

clip_image008

You may want to create only one route path making id as optional. Id can be make optional by putting it inside : id? This can be done as below,

clip_image010

Route path created above can handle both types of request either with parameter or without parameter. We are checking for the parameter and on basis of that different response being delivered. So bottom line is combination of 😕 makes parameter optional.

Express converts a route to regular expression internally. Input parameter can be parsed using req.params.id where is name of the parameter.

You can pass more than one parameters as shown below. We are making op as optional by placing it inside : ?

clip_image012

With second optional parameter application can be fetched as below. As you see we are passing id and op both while doing HTTP GET.

clip_image013

Express allow you to created REST based route path using *. So if I want to pass any number of parameters doing HTTP GET that can be done appending *

clip_image014

You can pass any number of parameters to access above created route path now.

clip_image015

If you try to access route which is not created then you will get error message as below. loo route is not there in rout paths so express is throwing error as below,

clip_image016

You can create routes with other HTTP VERBS . Method names are matched with HTTP verbs as discussed in beginning of this post.

clip_image017

You can test other operations like PUT , DELETE , POST in fiddler. This is how you can work with routing in express. For further advanced reading you may want to prefer REST API using express . Do not get overwhelmed with Visual Studio there in this post and follow the post to create REST API in any of your favourite code editor. I hope this post is useful to you.

If you want to create routes using crossroads then this post may help you

Create a Router in Node.js using crossroads