I'm a beginner to Mean-stack web development. I'm working on my university project that should develop as a single page application based on MEAN Stack. I have link all angular resources, css and other links in index.html. login and home page coded inside s only. Problem is If login authentication is success, I want to display Home page using angular routing when server-side respond as url of Home {res.render('/home')} but this way doesn't work. But login page work properly. any help would be much appreciated.
This index.html--
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="../server/angModule.js"></script>
<script src="../server/angularRoute.js"></script>
<script src="js/controllers/loginController.js"></script>
<script src="js/controllers/homeController.js"></script>
</head>
<body ng-app="Pharmacy">
<div ng-view > </div>
</body>
This login.html
<form action="/login" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-warning btn-lg">Login</button>
<input type="checkbox" checked="checked" name="remember-me"> Remember me
</form>
This is Angular module , routing and controllers
var app = angular.module('Pharmacy', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '../views/login.html',
controller: 'loginController'
}).when('/home', {
templateUrl: '../views/home.html',
controller: 'homeController'
}).when('/about', {
templateUrl: '../views/about.html',
controller: 'studentController'
}).otherwise({
redirectTo: "/"
});
});
app.controller("loginController", function ($scope) {
$scope.login = 'this is login';
});
app.controller("homeController", function ($scope) {
$scope.message = 'This is home';
});
This is necessary server side codes;
var UH = require('./modules/userHandaling');
module.exports = function(app) {
app.get('/', function(req, res) {
res.render('index');
});
app.get('/index', function(req, res) {
res.render('index');
});
app.get('/login', function(req, res) {
if (req.cookies.user == undefined || req.cookies.pass == undefined){
res.render('index', { title: 'Hello - Please Login To Your Account' });
}else{
// attempt automatic login //
UH.autoSignIn(req.cookies.user, req.cookies.pass, function(o){
if (o != null){
req.session.user = o;
res.redirect('/home');
} else{
res.render('index', { title: 'Hello - Please Login To Your Account' });
}
});
}
res.render('index');
});
app.post('/login', function(req, res){
UH.manualSignIn(req.body['username'], req.body['password'], function(error, output){
if (!output){
res.status(400).send(error);
} else {
req.session.user = output;
if (req.body['remember-me'] == 'on'){
res.cookie('username', output.username, { maxAge: 900000 });
res.cookie('password', output.password, { maxAge: 900000 });
}
res.render('/home');
}
});
});
Also I have uploaded my project on Github : https://github.com/SarasaGunawardhana/StackOverFlow-Question
Thank you friends ..
via Sarasa Gunawardhana
No comments:
Post a Comment