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 gitgit clone git@github.com/askucher/xonom-skeletoncd xonom-skeletonsh installsh 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.