ABL Skeleton for internal/external apps

Application skeleton. Included:

• angularjs
• expressjs
• angular.material
• angular.material icons
• grunt
• faker

Video tutorial: Russian, English

sh install 
sh run
#Start develop your web application

Installation of environment

sudo apt-get install nodejs git
git clone git@github.com/bucket-list/abl-skeleton
cd abl-skeleton
sh install
sh run
#sh run debug

Open in browser http://localhost

How to develop

All application files are located inside app/components folder. Each component is folder which contains files:

• file.api.server.js - server side controller
• file.controller.client.js - client side angularjs controller
• file.jade - html template
• file.sass - css stylesheet
• README.md - description and how to use example

and there could be compile-time files which generate into runtime .js files:

• file.api.server.ls
• file.api.server.ts
• file.api.server.coffee
• file.api.server.js

and there could be compile-time files which generate into runtime .html files:

• file.html
• file.jade

and there could be compile-time files which generate into runtime .css files:

• file.css
• file.sass

Each component should encapsulate everything inside.

There should not be dependencies between components.

Good practice is to provide a README.md file on how to work with concrete component.

Component example

Structure

app/
 components/
  user/
   db.service.server.js
   user.controller.client.js
   user.api.server.js
   user.jade
   user.sass

db.service.server.js

module.exports = function($xonom) {
   $xonom.service('$db', function() {
   
      return {
        user : {
      
         find : function() {
         
           //implementation
         
         },
         findOne: function() {
         
          //implementation
         
         }
      
      }
      }
   
   })
};

user.controller.server.js

module.exports = function($db) {
   all : function(callback) {
         // `user` collection is declared in config.json
         $db.user.find({}, { name: 1, _id: 1, connections: 1 }, function( err, users)  {
              callback(users);
         });
   },
   one: function(id, callback) {
        var db = import('db')
        $db.user.findOne({ _id: id }, function( err, user ) {
              callback(user);
        });
   }
};

user.controller.client.js

app.controller("user", function($scope, $xonom) {
  //`user` extracted from filename
  $xonom.user.all(function(err, users)) {
    $scope.users = users;
  };
  
  $scope.getDetails = function(id) {
     $xonom.user.one(id, function(err, details) { 
        $scope.details = details;
     };
  };
});

user.jade

.user.component(ng:controller="user")
 .details(ng:if="details")
  h3 details.name
  p Connections: {{details.connections.length}}
  p Events: {{details.events.length}}
 .users
   .user(ng:repeat="user in users" ng:click="getDetails(user._id)")
      h3 {{user.name}}
      p Connections: {{user.connections.length}}

user.sass

.user.component
 .details
  h3
    font-weight: bold
  p 
    color: #CCC
 .users 
   .user
      h3
        font-weight: bold
      p
        color: #CCC

Then grunt should reload everything automatically

All your files will be concatenated into one js and css file and ready for usage.

No additional actions are required.