Skip to content

Spring AngularJS Flow

Yash edited this page May 11, 2018 · 1 revision

Spring Configuration.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
	">
	
	<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
		<property name="locations">
			<list value-type="org.springframework.core.io.Resource">
				<value>classpath:config.properties</value>
			</list>
		</property>
		<property name="ignoreResourceNotFound" value="true"/>
	</bean>

	<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
		<property name="driverClassName" value="${config.db.driverClassName}" />
		<property name="url" value="${config.db.url}" />
		<property name="username" value="${config.db.username}" />
		<property name="password" value="${config.db.password}" />
	</bean>
	
	<bean id="jt" class="org.springframework.jdbc.core.JdbcTemplate">
		<property name="dataSource" ref="dataSource" />
	</bean>
	
	<bean id="loginDao" class="com.github.dao.LoginDAO_Impl" scope="singleton">
		<property name="jt" ref="jt"/>
	</bean>
</beans>

Java Classes with Annotation Spring 3.0

@Controller
@RequestMapping(value = "/account")
public class LoginCheckController {

	@Autowired private LoginDAO_Impl loginDao;
	
	@RequestMapping(value = "/login", method = RequestMethod.GET )
	public ModelAndView inputFrom( Model model ) {
		System.out.println("GET... /login");
		ModelAndView mav = new ModelAndView();
		mav.setViewName("signin"); //signinRoute | signin
		return mav;
	}
	
	@RequestMapping(value = "/logout", method = RequestMethod.GET )
	public String signOUT( Model model, HttpServletRequest req, HttpServletResponse resp ) {
		System.out.println("GET... /logout");
		
		HttpSession session = req.getSession();
		if( !session.isNew() ) {
			session.removeAttribute("userName");
			req.getSession().invalidate();
		}
		return "redirect:/account/login";
	}
		@RequestMapping(value = "/userLogin", method = RequestMethod.POST )
	public void inputFromData(@RequestBody String sb, @ModelAttribute("loginDto") LoginDTO loginDto,
			HttpServletRequest request, HttpServletResponse response ) throws IOException {
		setAccessControlHeaders( response );
		
		
		/*Using writer to send a message to requested resource*/
		PrintWriter writer = response.getWriter();
		System.out.println("POST...  inputFromData");
		/*StringBuilder sb = new StringBuilder();
		BufferedReader br = request.getReader();
		String str = null;
		while ((str = br.readLine()) != null) {
			sb.append(str);
		} // SB: {"username":"yashwanth.m@gmail.com","password":"Yash@777"}*/
		System.out.println("SB : "+sb);
		
		JSONObject jObj = null;
		String userName = null, password = null;
		String returnMessage = "error";
		try {
			jObj = new JSONObject(sb.toString());
			userName = jObj.getString("username");
			password = jObj.getString("password");
			
			/*loginDto.setUserName(userName);*/
			loginDto.setEmail(userName);
			loginDto.setPassword(password);
			
			if( loginDao.loginChectk(loginDto) /*password.equals("Yash@777")*/ ) {
				request.getSession().setAttribute("userName", loginDto.getUserName() );
				request.getSession().setAttribute("displayName", "Yash" );
				request.getSession().setAttribute("email",loginDto.getEmail());
				returnMessage = "valid";
			}
		} catch (JSONException e) {
			e.printStackTrace();
		}
		System.out.println(userName+" :: "+password+"« "+returnMessage);
		writer.print(returnMessage);
	}
	
	
	
	private void setAccessControlHeaders(HttpServletResponse response) {
		// An Access-Control-Allow-Origin (ACAO) header with a wild-card that allows all domains:
		response.setHeader("Access-Control-Allow-Origin", "*");
		//CORS also supports other types of HTTP requests [ GET, POST, PUT, DELETE, OPTIONS, HEAD ]
		response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
		// The list of non-standard | custom HTTP headers.
		response.setHeader("Access-Control-Allow-Headers", "Accept, Content-Type, X-PINGOTHER, Origin, X-Requested-With");
		// Tell client that this Pre-flight info is valid for 86400 seconds is 24 hours.
		response.setHeader("Access-Control-Max-Age", "86400");
	}
}

DB accessable Class to fetch the data from data base.

@Repository
public class LoginDAO_Impl implements LoginDAO {
	private JdbcTemplate jt;
	
	public JdbcTemplate getJt() {	return jt;	}
	public void setJt(JdbcTemplate jt) {
		System.out.println("Jdbc Template : "+jt);
		this.jt = jt;
	}
	/**
	 * SELECT * FROM `user` WHERE `EMAIL` = "yashwanth.m@gmail.com" AND `PASSWORD` = 'Yash@123'
	 */
	public boolean loginChectk(LoginDTO loginDto){
		
		String query ="SELECT `USER_NAME` FROM `user` WHERE `EMAIL` ='"+loginDto.getEmail()+"' AND `PASSWORD` = '"+loginDto.getPassword()+"' ";
		System.out.println("JT: "+jt);
		try { // Incorrect result size: expected 1, actual 0 - For Incorrect Details
			String username = jt.queryForObject(query, String.class);
			if( username != null ) {
				loginDto.toString();
				loginDto.setUserName( username );
				loginDto.toString();
				return true;
			}
		} catch (org.springframework.dao.EmptyResultDataAccessException e) {
		}
		return false;
	}
}
public class LoginDTO {
	private String email;
	private String password;
	private String userName;
	//...
}

Angular Files over JSP

<script>
/* You can make the dependency of the "user directives like ['ngRoute', 'passwordStrength.js', 'confirmPassword.js']" to the page Model. */
var loginRouteProvider = angular.module('loginModule', ['ngRoute']);
loginRouteProvider.constant('USERCONSTANTS', (function() {
	// Define your variable
	var resourceName = '${pageContext.request.contextPath}';
	var resorceFullPath = '${pageContext.request.getScheme()}://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}'+
	'${pageContext.request.getContextPath()}';

	// Use the variable in your constants
	return {
		USERS_DOMAIN: resorceFullPath,
		USERS_API: resorceFullPath + '/users',
		BASIC_INFO: resorceFullPath + '/api/info',
		PASSWORD_LENGTH: 7
	}
})());
loginRouteProvider.config( function($routeProvider) {
	$routeProvider

	// route for the home page
	.when('/login', {
	templateUrl : '${pageContext.servletContext.contextPath}/angular/views/login.html',
	controller  : 'loginController'
	})

	// route for the about page
	.when('/forgotPassword', {
	templateUrl : '${pageContext.servletContext.contextPath}/angular/views/forgotPassword.html',
	controller  : 'forgotPasswordController'
	})

	// route for the contact page
	.when('/register', {
	templateUrl : '${pageContext.servletContext.contextPath}/angular/views/register.html',
	controller  : 'registerController'
	})
	.otherwise({ redirectTo: '/login' });
});
</script>

Angular App files.

(function (ng) { 
	
	'use strict';
	var myModule = ng.module('loginModule');
	myModule.controller('loginController',
			['$rootScope', '$scope','$http', '$window', 'USERCONSTANTS', '$controller', loginControllerFun]);
			
				function loginControllerFun($rootScope, $scope, $http, $window, USERCONSTANTS, $controller) {
		
		var testCtrl1ViewModel = $scope.$new();
		//You need to supply a scope while instantiating. Provide the scope, you can also do 
		//$scope.$new(true) in order to create an isolated scope.
		//In this case it is the child scope of this scope.
		// https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection
		$controller('loadScript',{$scope : testCtrl1ViewModel });
		testCtrl1ViewModel.loadScript(USERCONSTANTS.USERS_DOMAIN+'/js/custom.js');
		
		console.log('loginController : RootScope Vlaue = ', $rootScope.forgotMessage);
		
		if( $rootScope.forgotMessage != null && $rootScope.forgotMessage != 'undefined' && $rootScope.forgotMessage == 'success' ) {
			var msg = "We've sent you an email with instructions on how to reset your password.";
			$('#resentPassword').html( msg );
			$('#resentPassword').addClass('alert alert-success');
			/*$().role="alert"*/
			$('#resentPassword').show();
		}
		$scope.formSubmit = function () {
			console.log('loginController formSubmit1 : RootScope Vlaue = ', $rootScope.forgotMessage);
			
			if( $rootScope.forgotMessage != null && $rootScope.forgotMessage != 'undefined' && $rootScope.forgotMessage == 'success' ) {
				$('#resentPassword').html( '' );
				$('#resentPassword').addClass('');
				$('#resentPassword').hide();
			}
			
			for (var prop in $rootScope) {
				if (prop.substring(0,1) !== '$') {
					delete $rootScope[prop];
				}
			}
			console.log('loginController formSubmit2 : RootScope Vlaue = ', $rootScope.forgotMessage);
			
			var username = $scope.email77;
			var password = $scope.password;
			console.log("User: ", username, " Pass: ", password);
			var targetRequestPath = '../account/userLogin'; // SpringController
			var targetRequestParams = { 'username': username, 'password': password };
			var isAuthenticated = false;
			$http({
				method: 'POST',
				url: targetRequestPath,
				headers: {'Content-Type': 'application/json'},
				data: targetRequestParams
			}).success( function(data) {
				console.log('Response Data : ', data);
				/*$('#email').addClass('form-control');*/
				if(data == 'valid') {
					isAuthenticated = true;
					/* $scope.error = ''; $scope.email77 = ''; $scope.password = ''; */
					console.log("Authentication Status : Pass « ", isAuthenticated);
					
					$window.location.href = '../account/loginSucess'; // SpringController
				} else {
					$scope.password = '';
					console.log("Authentication Status : Fail « ", isAuthenticated);
					$scope.error = "Invalid email or password!";
				} 
			}).error(function(data){
				console.log('Error message. ', data);
			});
		};
	}
})(window.angular);

Clone this wiki locally