AngularJS , Node.js, ExpressJS application integration issue

Question

I have created a RESTful service using Node.js and ExpressJS. Now I would like to implement View part. For this I have chosen AngularJS.

Problem here is, I am not sure how to organize folder structure and how to integrate AngularJS with Node.js and ExpressJS.

I watched this video, but for this no sample source code available.

Let's Get CRUDdy: AngularJS and Node.js Ferrari Example

Project folder structure

enter image description here

ExpressJS file

var express = require('express'),
http = require('http'),
path = require('path'),
photos = require('./routes/photos');

var app = express();

app.configure(function () {
    app.use(express.logger('dev'));     /* 'default', 'short', 'tiny', 'dev' */
    app.use(express.bodyParser());
    app.use(app.router);
});

app.get('/photos', photos.findAll);
app.get('/view1', photos.index);

AngularJS:

 // Declare app level module which depends on filters, and services
 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

When I hit url http://www.domain/view1, it should display index.html. But I am getting 404 code.

Please let me know if you need more info on it.

ok I have added folder structure and code. Now i am getting integration issue. — niran, Jul 03 '13 at 17:25
Hi, I'm the one who gave the presentation. The code is here: https://github.com/jprichardson/talks-ncc3-demo Keep in mind that the method of sending custom codes via express to Angular is wonky and not recommended. — JP Richardson, Dec 03 '13 at 18:41

score 34 · Answer 1 · edited May 23 '17 at 12:00

If you're using AngularJS to implement a single-page experience then you should serve the same front-end code every time, and then have AngularJS take over processing the URLs and displaying the content.

Remember that you are managing two routing systems. One for the front-end and one for the backend. Express routes map to your data, usually returned in JSON format. (You can also render html directly, see Option #1.) Angular routes map to your templates and controllers.

Option #1:

Set static folder to serve front-end code (HTML/CSS/JS/AngularJS).

app.use(express.static(__dirname + '/public'));

Look at these for sample code:

Directory Structure:

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html

app/
node_modules/
routes/
web-server.js

Option #2:

Serve the front-end code and backend code on separate servers.

This doesn't mean you have to have two machines.

Here is a workable set up on your local machine with Apache:

Directory Structure:

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html
node/
  app/
  node_modules/
  routes/
  web-server.js

Set up hosts file

    127.0.0.1       domain.dev

Set up http://domain.dev/ to point to public/

<VirtualHost *:80>
  DocumentRoot "/path/to/public"
  ServerName domain.dev
  ServerAlias www.domain.dev
</VirtualHost>

Set up http://api.domain.dev/ to point to the running node web-server

<VirtualHost *:80>
  ServerName api.domain.dev
  ProxyPreserveHost on
  ProxyPass / http://localhost:3000/
</VirtualHost>

(Adapted from: http://www.chrisshiplet.com/2013/how-to-use-node-js-with-apache-on-port-80/)

Start (or restart) Apache and run your node server:

node web-server.js

Angular Routes:

 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 
   'myApp.controllers'])
   .config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
     $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
     $routeProvider.otherwise({redirectTo: '/view1'});
 }]);

index.html:

   <!DOCTYPE html> 
   <html>
     <head><title>Angular/Node exmaple</title></head>
     <body>
       <div id="main" ng-view></div>
     </body>
   </html>

Express Routes:

app.get('/', photos.index);
app.get('/photos', photos.findAll);

Access these routes in an Angular controller via $http or $resource service:

$http.get('http://api.domain.dev/photos').success(successCallback);

Additional Resources:

it does not works, i have added angularjs code please. let me know if u need more info on it — niran, Jul 04 '13 at 03:52
all those examples server jade file. I want server .html file — niran, Jul 05 '13 at 14:07
Ok I have followed Option1, But I am getting this error Error: Failed to lookup view "partials/undefined" at Function.app.render (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\application.js:494:17) at ServerResponse.res.render (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\response.js:756:7) at exports.partials (d:\era\startup\learnnod\restfull_angular2\routes\wines.js:104:9) at callbacks (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:161:37) — niran, Jul 12 '13 at 14:54

score 4 · Answer 2 · answered Dec 06 '13 at 12:47

I had an existing angular project with a file structure like this (roughly):

/
  app/
    img/
    scripts/
    styles/
    templates/
    index.html
  test/

I just created a new express app, and copied the contents of my app directory over to the /public directory in express, after removing all the existing content from /public

Then in the app.js file in express I did the following changes to the default config:

var express = require('express');
var routes = require('./routes');
// ** required my route module
var menu = require('./routes/menu'); 
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
// ** I moved this above the app.router line below, so that static routes take precedence
app.use(express.static(path.join(__dirname, 'public'))); 
app.use(app.router);


// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

// ** removed the default index route
// app.get('/', routes.index); 
// ** defined my route
app.get('/api/menu', menu.list); 

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Then obviously wrote my route file in express and changed the URL in the angular service to use the new api.

Also there was more work involved deciding where to put the specs and also merging the bower and node dependancies etc but that is probably too specific to my situation to include with this answer but happy to share if anyone might find it useful.