grunt-flyber
Script generator between angularjs and expressjs
EXAMPLE
Structure
app/ components/ user/ user.controller.client.js user.api.server.js user.jade
User.api.server.js
You declare export functions with last callback argument
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) { $db.user.findOne({ _id: id }, function( err, user ) { callback(user); }); }};
User.controller.client.js
And use them on client side. Flyber generates middleware for you
app.controller("user", function($scope, $flyber) { //`user` extracted from filename $flyber.user.all(function(err, users)) { $scope.users = users; }; $scope.getDetails = function(id) { $flyber.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}}
install
- npm install flyber grunt-flyber
- add grunt task grunt-flyber into your gruntfile.js
grunt.initConfig({ flyber: { options: { input: { controllers: [ 'user.controller.server.js' ] }, output: { angularService: "flyber.service.js" /*,makeService: function() { ... } */ ,expressRoute: "flyber.route.js" /*,makeRoute: function() { ... } */ } }}); grunt.registerTask("grunt-flyber");
This task generates 2 files flyber.service.js, flyber.route.js based on input controllers
flyber.service.js contains angular service declaration with generated functions for communication with server flyber.route.js contains express routes for communication with client
- add line into your server.js file in order to attach flyber.route.js into your express
var express = require("express");var flyber = require("flyber"); var router = express();flyber.object("$router", router);flyber.require("./flyber.route.js")
- add line into your angular.js module declaration file
<head> ... <script type="text/javascript" src="angular.js" /> <script type="text/javascript" src="flyber.service.js" /> ...</head>
angular.module("app", ["flyber"]);