CODEWITHSUNDEEP
node.jsangularjsexpress
niran
niran

Reputation: 1980

AngularJS and ExpressJS Routing issue?

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: Folder stru

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

Upvotes: 2

Views: 4038

Answers (2)

Brian Lewis
Brian Lewis

Reputation: 5729

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);
...

Upvotes: 5

user568109
user568109

Reputation: 48013

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');

Upvotes: 0

Related Questions