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:

npm install - g bower

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

touch server/.bowerrc
vim server/.bowerrc
{ "directory"  : "../public/javascripts/vendor" }

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

bower install angular bootstrap

This is the result:

apps/reMember/public/                                                                                                                   
▾ images/                                                                                                                                         
▾ javascripts/                                                                                                                                    
  ▾ vendor/                                                                                                                                       
    ▸ angular/                                                                                                                                    
    ▸ bootstrap/                                                                                                                                  
    ▸ jquery/                                                                                                                                     
▾ stylesheets/                                                                                                                                    
    style.css                                                                                                                                     
  index.html    

Hook up Angular

We did this before!

Open index.html and make it look like so:

  
        
      
      
        
        
        
     
{{title}}
       
     
     
  

Create /public/javascripts/app.js:

var reMemberApp = angular.module('reMemberApp',[]);
 
reMemberApp.controller('WelcomeController', function ($scope) {
     $scope.title = "The cat just made a strange noise";
     $scope.story = "We better check her out and see if she's ok."
});

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

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.

Consuming the API

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

$http.get('http://localhost:3000/members').success(function(data) { $scope.members = data; });

This is the result:

var reMemberApp = angular.module('reMemberApp',[]);
 
reMemberApp.controller('WelcomeController', function ($scope,$http) {
     $scope.title = "The cat just made a strange noise";
     $scope.story = "We better check her out and see if she's ok."

     $http.get('http://localhost:3000/members').success(function(data) { $scope.members = data; });
});

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

  

          {{member.firstName}}
  

And there you go:

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/