AngularJS and ExpressJS Routing issue?

Question

I am using Angular, express, nodeJS for web application development.

Anuglar code:

'use strict';
//
 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'});
  }]).config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);;


angular.module('modelDemo', []).
config(function ($routeProvider) {
    $routeProvider.
    when('/', {
        controller: 'AuthorListCtrl',
        templateUrl: 'partials/list.html'
    });
     $routeProvider.
    when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
    });
   $routeProvider.otherwise({redirectTo: '/view1'})
});

var app = angular.module('app', ['myApp', 'modelDemo']);

Express code

// all environments
app.set('port', process.env.PORT || 2000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);

app.get('/', wine.index);
app.get('/partials/:name', wine.partials);
app.get('/wines', wine.findAll);
// / app.get('/view1', wine.index);
app.get('/wines/:id', wine.findById);
app.post('/wines', wine.addWine);
app.put('/wines/:id', wine.updateWine);
app.delete('/wines/:id', wine.deleteWine);
app.get('/view1', wine.partials);
//app.get('/view1/:name', wine.partials);

2)

exports.index = function(req, res){
   console.log("request url---"+req.url);
   res.render('partials/' + req.params.name);
};

exports.partials = function(req, res) {
   console.log("request url---"+req.url);
   console.log(req.params.name);
   res.render('partials/' + req.params.name);
};

Project folder Structure:

When I tried to access this application by using following url, http://www.domain:2000/view1

i am getting following 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) at param (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:135:11) at pass (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:142:5) at Router._dispatch (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:170:5) at Object.router (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:33:10) at next (d:\era\startup\learnnod\restfull_angular2\node_modules\express\node_modules\connect\lib\proto.js:190:15) at resume (d:\era\startup\learnnod\restfull_angular2\node_modules\express\node_modules\connect\lib\middleware\static.js:60:7)

Please let me know if you need more info on it

What is the code pointed here (d:\era\startup\learnnod\restfull_angular2\routes\wines.js:104:9) at callbacks — user568109
– user568109, Commented Jul 15, 2013 at 18:02
After removing view engine, got this error Error: No default engine was specified and no extension was provided. — niran
– niran, Commented Jul 15, 2013 at 18:08

Brian Lewis · Accepted Answer · 2013-07-15 19:51:14Z

5

The problem is that you are trying to handle the routes in both your angular code and your express code. In order to get it to work as expected, you need to direct all non-partial/non-api routes to your index.html file.

Try doing something like this:

wine.js (your express route file)

exports.index = function(req, res) {
    res.sendfile(__dirname + "/public/index.html"); // updated to reflect dir structure
};

app.js (your express app file)

...
// make this your last route and remove your '/view1' route
app.get('*', wine.index);
...

edited Jul 15, 2013 at 19:51

answered Jul 15, 2013 at 18:04

Brian Lewis

5,7191 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

niran Over a year ago

No I don't want use Jade in this project

niran Over a year ago

Does it means yourdirectory = public, as per my folder structure shown in my Question

niran Over a year ago

I did worked for me. Thanks :) But I did not understand why app.get("*",...) is requried

Brian Lewis Over a year ago

It is because, all page requests need to be sent to your index.html file. Once your app has loaded, Angular will use pushState to manipulate the URL and handle routing. However, if you were to refresh the page or deeplink into an Angular route, Express would attempt to handle the routing. Sending it to the index on all routes will allow Angular to handle the routing.

Brian Lewis Over a year ago

sorry. I missed the chat request

user568109 · Accepted Answer · 2013-07-15 18:20:57Z

0

In your wine.js you are using parameter name, but in your routes you have commented the part.

app.get('/view1', wine.partials);
//app.get('/view1/:name', wine.partials);

Since you have not specified the param :name in route, when you try to access it with req.params.name it gives undefined. And you look for a file undefined that does not exist.

Error: Failed to lookup view "partials/undefined" at Function.app.render

You probably want res.render('partials/view1');

answered Jul 15, 2013 at 18:20

user568109

48.1k18 gold badges101 silver badges124 bronze badges

6 Comments

niran Over a year ago

No it will not work. I have tried that option too. Still got same error. I think, there is mismatch between anuglr router and express router

user568109 Over a year ago

/view1/:name would not match http://www.domain:2000/view1 . Are you passing some variable for name to test it? It is an express router error.

niran Over a year ago

yes, as per angular router definition view1 = partials/partial1.html. That means, when u say /view1, it is nothing but a, www.domain.com/partial/partials.html.

user568109 Over a year ago

Express router has no knowledge of angular router. So you would have to give the correct path yourself. Try res.render('partials/partial1');

niran Over a year ago

Error: Failed to lookup view "partials/partial1", When app.get('/view1', wine.partials) is called, it will call exports.partials = function(req, res) { res.render('partials/partial1')}. I think here, is the problem.

|

Collectives™ on Stack Overflow

AngularJS and ExpressJS Routing issue?

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related