Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question
 
ok I have added folder structure and code. Now i am getting integration issue. –  niran Jul 3 at 17:25
add comment

1 Answer

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:

share|improve this answer
 
it does not works, i have added angularjs code please. let me know if u need more info on it –  niran Jul 4 at 3:52
 
hey Will, did you mean photos.index and not app.index? –  exclsr Jul 4 at 4:49
 
ya, y app.index. i am not using it –  niran Jul 4 at 15:31
 
all those examples server jade file. I want server .html file –  niran Jul 5 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 at 14:54
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.