After writing about the MEAN stack, I decided to create my first application! Reading on the web I found very interesting programs to easily manage any workspace; I’m talking about yeoman, NPM and bower:

  • Yeoman is “THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS”. It merely provides a plugin (it can be run with the yo command) to help us to create, manage and develop a webapp.
  • NPM (Node Packaged Modules) is the default package manager of NodeJS. Installing Node.JS, you will install automatically NPM. With NPM you can install a lot of software (express, async, grunt, request, lodash, socket.io, gulp, mocha, etc….)
  • bower is another package manager, it manages all the frameworks, libraries, assets, utilities like maven.

Let’s start to work!

First of all, you have to install node.js. It’s very simple to install it, just go to nodejs.org and download the .tar.gz.

Now, with npm installed, you can install bower:

sudo npm install -g bower

And GIT:

sudo apt-get install git

Then, you can install Yeoman and then the AngularJS fullstack generator:

sudo npm install -g yo
npm install -g generator-angular-fullstack

To create a workspace, you have to chose and create a new folder, for my test I used ‘mynewws’, after going into this folder, you can specify to yeoman to create the webapp:

mkdir mynewws
cd mynewws
yo angular-fullstack

When you run ‘yo angular-fullstack’, the generator asks to you some question about the structure of the webapp, in my first helloworld I excluded the mongodb connector.

To run the webapp, you have to install grunt and then run it (going in the home of the WS):

npm install -g grunt-cli
grunt serve

Grunt allows you to run express services and AngularJS application. Usually to run grunt you have to make a gruntfile, but… the generator has already thought of that and the gruntfile is generated when you create the WS.

Ok! Now the WS is ready and working, you are ready to develop the webapp….

What should you do now? You have to create a new Express service:

yo angular-fullstack:endpoint message
? What will the url of your endpoint to be? /api/messages   <- it's the path where the endpoint gives you the response
 create server/api/message/index.js
 create server/api/message/message.controller.js
 create server/api/message/message.spec.js

Using nano (or others text editor) you can edit the message.controller.js file to set the response of the service:

nano server/api/message/message.controller.js
...
res.send('Hello World');
...

Going to localhost:9000/api/messages we can see the Hello World response!

You are not at the end of the work, you have to create an AngularJS route, and the generator has the command to do this:

yo angular-fullstack:route myroute

By editing the created files, you can invoke the WS:

nano client/app/myroute/myroute.controller.js
angular.module('testAngularApp')
  .controller('MyrouteCtrl', function ($scope, $http) {
    $http.get('/api/messages').success(function(message) {
      $scope.message = message;
    });
  });
---
nano client/app/myroute/myroute.html
<div class="col-md-12">The message of the day is {{message}}</div>

And now… Typing localhost:9000/myroute you will see the hello world response! 🙂

Tags: