abl-landing-page v0.1.12
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
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:
- 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.