Today was the beginning of my project to convert a website to angular.js. The main page is served by index.html and includes ng-view for other views such as login and signup. Working closely with a backend developer, I have successfully integrated a rest client to handle the JSON data. However, I am currently facing a challenge with implementing authentication on the login page. Upon successful login, I aim to display the dashboard view. I am looking for a front-end solution to achieve this for testing purposes only.
Below is a snippet of the code.
app.js
'use strict';
/**
* @ngdoc overview
* @name servicepriceApp
* @description
* # servicepriceApp
*
* Main module of the application.
*/
var myApp;
(function() {
myApp = angular
.module('servicepriceApp', [
'ngRoute'
])
.config(function($routeProvider) {
$routeProvider
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'SignupController'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashController'
})
.otherwise({
redirectTo: 'views/signup.html'
});
});
})();
login.js
myApp.controller('LoginController', function($scope, $http) {
$scope.login = function() {
var data = {
email: $scope.email,
password: $scope.password
};
$http({
url: site + '/company/login',
method: "POST",
transformRequest: encodeurl,
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data) {
console.log(data);
}).error(function(res) {
console.log(res);
});
}
});
index.html
<!doctype html>
<html class="no-js" ng-app="servicepriceApp">
<head>
<meta charset="utf-8">
<title> Service price</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/foundation.min.css">
<link rel="stylesheet" href="styles/all.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<ul>
<li><a href="#signup"> SignUp </a>
</li>
<li><a href="#login"> Login </a>
</li>
<li><a href="#dashboard"> Dashboard </a>
</li>
</ul>
</div>
</div>
<div ng-view></div>
</div>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="js/app.js"></script>
<script src="js/controllers/signup.js"></script>
<script src="js/controllers/login.js"></script>
</body>
</html>
signup.html
var site = "http://someurl.in:9009"
var encodeurl = function(obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
myApp.controller('SignupController', function($scope, $http) {
$scope.signup = function() {
var data = {
email: $scope.email,
password: $scope.password
};
$http({
url: site + '/company/signup',
method: "POST",
transformRequest: encodeurl,
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data) {
console.log(data);
}).error(function(res) {
console.log(res);
});
}
});
Hopefully, this code snippet provides a good overview of the current progress. Thank you for your assistance in advance.