Bulding Realtime Web Application With Sails and Angular - Part 1

Jul 25, 2014


Hi ,

This is the first tutorial on creating an application with Sails JS and Angular JS. So let us get into the topic . There are two big things which we should notice . We have selected Sails as well as Angular, why? This will be briefed in coming tutorials :) .

A small intro about SailsJS

You might be familiar with web development in PHP , ASP.Net etc. What makes it different to create an application on Sails ? Sails is one among the most powerful MVC framework in Node.js.It is a rapid development framework which make it easier to generate practical , production ready Node.js apps. It helps to create realtime web applications which is harder in case of PHP , ASP etc. Sails is completely based on Javascript. It uses waterline ORM to connect to database. Waterline, which provides a simple data access layer that just works, no matter what database you’re using.

Something about Angular

Angular JS is a super heoric MVC framework created and maintained by Google . Angular has powerful UI bindings which allows synchronisation among models and views. $http is used to communicate with REST API.

In this tutorial we will create a basic Sails application .A basic Angular app and communication between these two will be handled in next tutorials.

Create a Sails Application

Requirements
  • You should have `NodeJs` installed on your computer inorder to begin.
  • You should have the latest version of Sails installed.

To install Sails

sudo npm install g sails@beta

To know more go to http://beta.sailsjs.org/#/getStarted

I’m using latest version of Sails 0.10.0-rc8 . It will take some time to complete the process . After installation , try following commands to create a sails application

sails new app

This would generate a message

info: Created a new Sails app 'app'!

An application name ‘app’ is created by now. Open you app directory – cd app. To lift the application try the command

sails lift

SailsAngularTutorialPart1-1

The above screen would be the result . There are some points to be noted here . The default port for a sails application is 1337 and the environment by default will be development .

Try hitting your browser at http://localhost:1337/

You will get a page like this

SailsAngularTutorialPart1-2

To change the default port in Sails , you have to change the local.js file in locales folder . App – config/locales/local.js In that you will find

port: process.env.PORT || 1337,

change it to

port: process.env.PORT || yourdesiredportaddress,

Save the file and try lifting the app now the app will be lifted in given port address.In production, you’ll probably want to change this setting to 80 (http://) or 443 (https://) if you have an SSL certificate. By now you know how to create a basic Sails application . Generating apis using the Sails app will be handled in the next tutorial . See you there bye :)