Quick Starting Applications with AngularJS and SailsJS

by Thomas Urban

AngularJS is a mature framework for client-side application development while SailsJS is a quite fresh framework for developing server-side applications. By combining both parts you get a robust yet flexible platform for developing rich internet applications.

However, SailsJS comes without any bias regarding client-side framework but focuses on server-side stuff including support for delivering whatever is required to present server-side data to the client. We have created some patch to be applied on a vanilla sailsjs application preparing it for developing client side code with AngularJS. In addition this patch is switching from LESS to SCSS for describing styles and from EJS to Jade for describing view templates.

Here come the steps required to get a running Hello-World-application:

  1. Install NodeJS.
  2. Install git (specifically used here for applying our patch).
  3. Install SailsJS using CLI:
    npm install -g sails
  4. Install bower using CLI:
    npm install -g bower
  5. Create vanilla Sails application (named "myapp" here) using CLI:
    sails new myapp
    This command is creating new subfolder containing all files of new application.
  6. Change into created application's folder:
    cd myapp
  7. Download our patch and save it in the folder.
  8. Apply patch using CLI:
    git apply <sails-for-angular.diff
    You might ignore any warnings on adding/removing/changing whitespace.
  9. By patching files new dependencies have been added to be updated now using CLI:
    npm install
    and
    bower install
  10. Start application using CLI:
    sails lift
    This command isn't finishing but keeps running. Just wait a few seconds, then advance to next step.
  11. Open your favourite browser and go to http://localhost:1337

On success you should see a gray box displaying "Hello World".

File Layout of Client Side Application

All client-side code is available in folder /assets/. Angular module for application is created in /assets/components/main.js. Every component of application is put into separate subfolder of /assets/components/. Either component is self-contained consisting of its configuration including state description for angular-ui-router (which is included with the patch, of course), controllers, views and styles. Sails takes care for collecting, concatenating and injecting all this stuff into resulting HTML document to be delivered by server-side code on request for any URL starting with /view/.

This basic HTML document is described in /views/homepage.jade but in most cases you won't have to care for this file. All you need to know about this document are names of views available for assigning components. Views are named north, core, west, east and south. The element layout is prepared for applying three-row-design with inner row split into three columns. Views' names are thus referring to expected positions of either element. The actual design isn't part of this patch.

Go back