Nodejs express feature not working with ejs
I am using express ejs on my node server to render views in a multi-user application. On the client side, I am using Angularjs. The initial view is the login page that displays correctly when used res.render('pages/login')
. I want to render a new view when the user connects successfully, but for the next, res.render('pages/home')
it stays on the login page even though I am getting correct HTML on the client side. Here's my relative code:
partial file structure:
App
public/js/Script.js
views/pages
login.ejs
home.ejs
server.js
server.js
...
app.get('/',function(req, res){
res.render('pages/login'); //being displayed
});
app.get('/rest/home',function(req, res){
res.render('pages/home'); //not being displayed
});
app.post('/login',function(req, res){
//authentification
});
...
Script.js
.controller ('loginController', function ($scope, $http) {
$scope.authent = function(){
$http({
method: 'POST',
url: '/login',
data: $.param($scope.loginData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(res){
$scope.launch();
});
$scope.launch = function(){
$http({
method: 'GET',
url: '/rest/home',
}).success(function(res){
alert(res); //Here, I am getting the content of home.ejs, but the view doesn't load in browser
});
};
})
.controller ('homeController', function () {
});
login.ejs
<html ng-app="App">
<head>
...
</head>
<body ng-controller="loginController">
<div id="loginView">
<form name="login" id="login" ng-submit="authent()">
<input id="login_id" name="login_id" type="text" ng-model="loginData.loginId"/>
<input id="password" name="password" type="password" ng-model="loginData.password"/>
<input type="submit" class="submit" value="Login"/>
</form>
</div>
</body>
</html>
home.ejs
<html ng-app="App">
<head>
...
</head>
<body ng-controller="homeController">
<h1>Home</h1>
</body>
</html>
This is my first time using ejs with angularjs and I'm not entirely sure about my approach, so any suggestions for a better approach are also welcome. I've tried using Route but not very happy with it. I hope I can explain clearly.
source to share
Finally, I used $routeProvider
. Here's the solution:
File structure:
App
/public/js/Script.js
/views/
layout.ejs
/partials/
login.ejs
home.ejs
/routes/
index.js
server.js
server.js
...
var engine = require('ejs-locals');
var routes = require('./routes');
app.engine('ejs', engine);
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.get('/partials/:name', routes.partials);
app.get('/', routes.index); //Important to place this last
...
index.js
exports.index = function(req, res){
res.render('layout');
};
exports.partials = function (req, res) {
var name = req.params.name;
res.render('partials/' + name);
};
script.js
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl : 'partials/login',
controller : 'loginController'
})
.when('/home', {
templateUrl : 'partials/home',
controller : 'homeController'
})
.otherwise({redirectTo: "/"});
})
app.controller ('loginController', function ($scope, $http) {
...
$scope.launch = function(){
$http({
...
}).success(function(res){
$location.path('/home');
});
};
})
layout.ejs
...
<body>
...
<div ng-view></div> <!-- This section will be replaced with rendered view -->
...
</body>
...
source to share