btford / angular-express-seed Goto Github PK

A great starting point for writing AngularJS apps backed by an Express-powered node.js server.

JavaScript 89.98% CSS 10.02%

angular-express-seed's Introduction

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 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, run npm install to grab the dependencies, 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 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.

License

MIT

angular-express-seed's People

Contributors

Stargazers

Watchers

Forkers

mailtruck jimakker revskill10 malkomalko jacobmumm scottrblock megalithic robfinner jcruz2us jtneill veliovgroup andriasang francisluz bradtwurst thewildpendulum indiejoseph christiansmith steflef oracal sirkitree rodfernandez gashu andruu myguidingstar-zz abhisec flamilton tomekc livemeryrose lingzuer nathasm jeongwooklee jonbaer gamelodge kwkhaw dino198 mb2o kunle1 amadu80 odysseyofmayhem erikdonohoo bushizhang crindt rijvirajib adam-lipshay driq vprus davidfirst browniefed arkadiuszsz ascheucher jaechoon2 mejackreed wffunnell lauyuen lockerfish sakhtar1979 mjefferson arsalaq kamal77 alarmcom jwchang0206 lymanlai uxtx swannlv caglarcem tobecat ieow brunoalcau gustavnovotny althamash betz jhive grillergeek mrjohnsson77 ghchinoy ljh2008 gfamorimo krozestwinski ideado cloudqiu sra murindwaz fyatao djimenezc davehamptonusa bwarnick justinireland thm-design imcoddy lastforeverzl hakam-k petchw artishan krahman lindsbot mzgupta holympus ehurtault phareim btushinde

angular-express-seed's Issues

body-parser deprecated/body-parser deprecated undefined extended

The bodyParser constructor has been deprecated.
Console message:
body-parser deprecated bodyParser: use individual json/urlencoded middlewares app.js:28:9
body-parser deprecated undefined extended: provide extended option node_modules/body-parser/index.js:85:29

app.js vs app.js

Hello BtFord!
I worked a lot with your seed/skeleton projekt. It is really great. Thank you for providing it. Just one feedback from the point of view of a learner: You have two app.js files on your projekt. One is the express server (backend) and the other one is the angularJS (frontend) single page application. You should rename the first one to something like server.js so that others don't get confused as I did.

Information about prerequisites in the readme

Hi,

First of all: Thanks for this! I was in the midst of building this sort of thing myself (because I needed it, and yeoman isn't offering express generators - which it probably is right about leaving out) but then I found this, saw your name on it and though; "well, this outta do it".

My issue:
Maybe it's me being new to expressJS and all this, but I thought this might help other newbies as well. The "How to use angular-express-seed" only says "Clone the angular-express-seed repository and start hacking!", but if you only do this and run node app.js you'll end up missing express, jade (and maybe even other things)

You might say that people looking for a seed like this, already have these things installed if, but again; it could probably help newbies if the installation prerequisites were described as well. All in all it's a judgement call, but these were just my 5 cents.

Now, I'm off to hack at this - can't wait :-) ! Please let me know if you need help working on this in any way.

Best regards
Brian

new Repo

We have seen that this repo is not working anymore with the new packages such as express 4 and pug. I created a similar repo with some enhancements, and wondering if we can reference it here

express-mongoose-angular1-seed

Express cassandra connection

what is the best practice to connect express with cassandra and how to have a separate dao layer with cassandra. Also, how do i pass result of the query back to the function in express. Plz help.

Update to Express 4.x

just a question

Hi,

Nice work, this is interesting stuff.

I'm working on my own Express4 + AngularJS seed, sprinkling in some Browserify and Grunt config stuff --- I prefer to write in CoffeeScript and Jade but CSS vanilla---.

I noticed with the way you do routing, it appears that every change in Angular view requires that your Express server serve that partial remotely ( res.render('partials/' + name); ) . So the entire app is not loaded initially. In some way you've taken the client-heavy SinglePage app and split back into a server-heavy phenom, what with every view coming from the server via render.

My question is 'am I missing something ?' or 'do I have it about right.' My knowledge of the inner workings of Express is not flawless, and it occured to me some other possibilities like maybe all the templates in /views directory could theoretically be compiled and sent over on initial page load-- (I don't think that's what happens but haven't actually checked).

At any rate it seems a bit strange not to allow for a genuine single-page-app client-heavy build with the routing handled on the client side, by AngularJS, and not by Express. Express should (opinion mine) route amongst various single-page-apps of the developers system/eco-system...

Regards,
wjk

MODULE_NOT_FOUND

Cannot find module '../build/Release/bson'] code: '

js-bson: Failed to load c++ bson extension, using pure JS version

Error while running app.js

I am new to nodejs+express stack. Trying to learn it using your project as a templated. I see following error despite installting connect package seperately. Can you please guide where is the issue.

C:\Users\m\Desktop\node\angular-express-seed-master>node app.js
body-parser deprecated bodyParser: use individual json/urlencoded middlewares ap
p.js:28:9
body-parser deprecated urlencoded: explicitly specify "extended: true" for exten
ded parsing node_modules\body-parser\index.js:74:29

Error: Most middleware (like errorHandler) is no longer bundled with Express and
must be installed separately. Please see https://github.com/senchalabs/connect#
middleware.
at Function.Object.defineProperty.get (C:\Users\m\Desktop\node\angular-
express-seed-master\node_modules\express\lib\express.js:89:13)
at Object. (C:\Users\m\Desktop\node\angular-express-seed-mas
ter\app.js:36:19)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3

How about some testing love

Just learning angular - through yeoman, would love to help make this seed more like that:

Testing with testacular
Minification/concatenation from the connect/express directly
liveReload

If we can discuss the path forward, I'd love to help...
Maybe it would be best to add to the yeoman angular generators directly ??

Most middleware (like errorHandler) is no longer bundled with Express

I get this error;

Most middleware (like errorHandler) is no longer bundled with Express and must be installed seperatly. Please see https://github.com/senchalabs/connect#middleware

If it's just me then close this.

Dynamic page titles

Is there an easy way to dynamically modify the page title in the HTML header depending on what page/ng-view/partial is loaded?

Update to latest angular-seed version

I know this project hasn't been updated in some time now, but I was wondering if it was likely to get an update using the latest version of the angular-seed project?

It now has both E2E tests and unit tests included by default and the directory structure has changed around a bit.

Using this with socket.io

Hi,

I was trying to hook this up with socket.io, but I'm not sure how to do it.

As far I as can read from Express - Migrating from 2.x to 3.x it instucts me to do it like this:

var app = express() , http = require('http') , server = http.createServer(app) , io = require('socket.io').listen(server); server.listen(3000);

But angular-express-seed somehow merges the app and server variable together. How would I go about extracting the server from the app-variable to be able to use socket.io with this?