initial commit

README.md

@@ -0,0 +1,78 @@
+# Angular Express Seed
+
+Start an awesome app with AngularJS on the front, Express + Node on the back. This project is an
+application skeleton for a typical [AngularJS](http://angularjs.org/) web app for those who want
+to use Node to serve their app.
+
+The seed contains angular libraries, test libraries and a bunch of scripts all preconfigured for
+instant web development gratification. Just clone the repo (or download the zip/tarball) and
+you're ready to develop your application.
+
+The seed app shows how to wire together Angular client-side components with Express on the server.
+It also illustrates writing angular partials/views with the Jade templating library.
+
+_Note: Although Jade supports interpolation, you should be doing that mostly on the client. Mixing
+server and browser templating will convolute your app. Instead, use Jade as a syntactic sugar for
+HTML, and let AngularJS take care of interpolation on the browser side._
+
+## How to use angular-express-seed
+
+Clone the angular-express-seed repository and start hacking!
+
+### Running the app
+
+Runs like a typical express app:
+
+    node app.js
+
+### Running tests
+
+Coming soon!
+
+### Receiving updates from upstream
+
+Just fetch the changes and merge them into your project with git.
+
+
+## Directory Layout
+
+    app.js              --> app config
+    package.json        --> for npm
+    public/             --> all of the files to be used in on the client side
+      css/              --> css files
+        app.css         --> default stylesheet
+      img/              --> image files
+      js/               --> javascript files
+        app.js          --> declare top-level app module
+        controllers.js  --> application controllers
+        directives.js   --> custom angular directives
+        filters.js      --> custom angular filters
+        services.js     --> custom angular services
+        lib/            --> angular and 3rd party JavaScript libraries
+          angular/
+            angular.js            --> the latest angular js
+            angular.min.js        --> the latest minified angular js
+            angular-*.js          --> angular add-on modules
+            version.txt           --> version number
+    routes/
+      api.js            --> route for serving JSON
+      index.js          --> route for serving HTML pages and partials
+    views/
+      index.jade        --> main page for app
+      layout.jade       --> doctype, title, head boilerplate
+      partials/         --> angular view partials (partial jade templates)
+        partial1.jade
+        partial2.jade
+
+
+
+## Example App
+
+A simple [blog](https://github.com/btford/angular-express-blog) based on this seed.
+
+
+## Contact
+
+For more information on AngularJS please check out http://angularjs.org/
+For more on Express and Jade, http://expressjs.com/ and http://jade-lang.com/ are
+your friends.

app.js

@@ -0,0 +1,63 @@
+
+/**
+ * Module dependencies.
+ */
+
+var express = require('express'),
+  routes = require('./routes'),
+  socketIO = require('socket.io');
+
+var app = module.exports = express.createServer();
+
+// Hook Socket.io into Express
+var io = socketIO.listen(app);
+
+// Configuration
+
+app.configure(function(){
+  app.set('views', __dirname + '/views');
+  app.set('view engine', 'jade');
+  app.set('view options', {
+    layout: false
+  });
+  app.use(express.bodyParser());
+  app.use(express.methodOverride());
+  app.use(express.static(__dirname + '/public'));
+  app.use(app.router);
+});
+
+app.configure('development', function(){
+  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
+});
+
+app.configure('production', function(){
+  app.use(express.errorHandler());
+});
+
+// Routes
+
+app.get('/', routes.index);
+app.get('/partials/:name', routes.partials);
+
+// redirect all others to the index (HTML5 history)
+app.get('*', routes.index);
+
+// Socket.io Communication
+
+io.sockets.on('connection', function (socket) {
+  socket.emit('send:name', {
+    name: 'Bob'
+  });
+
+  setInterval(function () {
+    socket.emit('send:time', {
+      time: (new Date()).toString()
+    });
+  }, 1000);
+});
+
+// Start server
+
+app.listen(3000, function(){
+  console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
+});

package.json

@@ -0,0 +1,10 @@
+{
+    "name": "application-name"
+  , "version": "0.0.1"
+  , "private": true
+  , "dependencies": {
+      "express": "2.5.10"
+    , "jade": ">= 0.26.1"
+    , "socket.io": ">= 0.9.6"
+  }
+}

public/css/app.css

@@ -0,0 +1,30 @@
+/* app css stylesheet */
+
+.menu {
+  list-style: none;
+  border-bottom: 0.1em solid black;
+  margin-bottom: 2em;
+  padding: 0 0 0.5em;
+}
+
+.menu:before {
+  content: "[";
+}
+
+.menu:after {
+  content: "]";
+}
+
+.menu > li {
+  display: inline;
+}
+
+.menu > li:before {
+  content: "|";
+  padding-right: 0.3em;
+}
+
+.menu > li:nth-child(1):before {
+  content: "";
+  padding: 0;
+}

public/js/app.js

@@ -0,0 +1,11 @@
+'use strict';
+
+
+// Declare app level module which depends on filters, and services
+angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
+  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
+    $routeProvider.when('/view1', {templateUrl: 'partials/partial1', controller: MyCtrl1});
+    $routeProvider.when('/view2', {templateUrl: 'partials/partial2', controller: MyCtrl2});
+    $routeProvider.otherwise({redirectTo: '/view1'});
+    $locationProvider.html5Mode(true);
+  }]);

public/js/controllers.js

@@ -0,0 +1,23 @@
+'use strict';
+
+/* Controllers */
+
+function AppCtrl($scope, socket) {
+  socket.on('send:name', function (data) {
+    $scope.name = data.name;
+    $scope.$apply();
+  });
+}
+
+function MyCtrl1($scope, socket) {
+  socket.on('send:time', function (data) {
+    $scope.time = data.time;
+    $scope.$apply();
+  });
+}
+MyCtrl1.$inject = ['$scope', 'socket'];
+
+
+function MyCtrl2() {
+}
+MyCtrl2.$inject = [];

public/js/directives.js

@@ -0,0 +1,11 @@
+'use strict';
+
+/* Directives */
+
+
+angular.module('myApp.directives', []).
+  directive('appVersion', ['version', function(version) {
+    return function(scope, elm, attrs) {
+      elm.text(version);
+    };
+  }]);

public/js/filters.js

@@ -0,0 +1,10 @@
+'use strict';
+
+/* Filters */
+
+angular.module('myApp.filters', []).
+  filter('interpolate', ['version', function(version) {
+    return function(text) {
+      return String(text).replace(/\%VERSION\%/mg, version);
+    }
+  }]);