Nodejs and the MEAN stack for the .NET developer part 3

In this series I’m exploring the MEAN stack. In the previous posts I’ve covered the M (Mongo), the E (Express) and the N (Nodejs).
It’s time for the A. I’m going to add Angularjs and start with the frontend for the reMember application.

NPM for the frontend: Bower

Bower is a package manager for the web. It can be used to add frontend scripts to a website, like Ember, Angular, jQuery and Twitter Bootstrap.

Install Bower globally:

First, you need to tell Bower where to download its files.

This configuration file will tell Bower to install tools into the “../public/javascripts/vendor” directory.

This is the result:

Hook up Angular

We did this before!

Open index.html and make it look like so:

Create /public/javascripts/app.js:

Now go ahead and browse to http://localhost:3000:

cat-plain

Add some Twitter Bootstrap styling

I grabbed this theme and copied/pasted the source into index2.html.
The I adjusted all the paths to reflect the folder structure of the reMember app.

cat-plain-twitter

Consuming the API

Add the following to /public/javascripts/app.js:

This is the result:

And add the following html to either index.html or index2.html:

And there you go:

cat-twitter-rest

I’m surprised of the simplicity of all this.
Mind you, we’ve created a minimal web app with the MEAN stack. These tools are all free and open source. Even the OS and the IDE I’m working with is free and open source.
This is why I want to share code with the world.

Sources:
http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/

Leave a Reply

Your email address will not be published. Required fields are marked *