Nibbling Perfect Macaroni
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

abl-landing-page

0.1.12 • Public • Published

Landing Page

New files

  • gallery-calendar.directive.ls
  • gallery-calendar.jade

Updated files

  • gruntfile.ls
  • app/componets/app/app.controller.client.ls
  • app/componets/app/app.route.client.ls
  • app/componets/app/app.sass
  • app/componets/app/app.jade

Controller for landing

  • Controller app/components/app/app.controller.client.ls calls activity:id api method to load info related to specific activity. The app.route.client.ls defines /activity/:activity to get activity_ID.
  • The view already loaded the widget but it is hidden until the Calendar or Button are clicked. This action will hide the landing and will show the widget.
  • All the old functionality is still working the same

Xonom Skeleton for SAAS

Application skeleton. Included:

  • angularjs
  • expressjs
  • angular.material
  • grunt
  • xonom
  • grunt-xonom

Video tutorial: Russian, English

sh install 
sh run
#Start develop your web application 

Xonom

Installation of environment

sudo apt-get install nodejs git
git clone git@github.com/askucher/xonom-skeleton
cd xonom-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:

The structure

  • 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.

Keywords

none

install

npm i abl-landing-page

Downloadsweekly downloads

7

version

0.1.12

license

ISC

repository

githubgithub

last publish

collaborators

  • avatar