Search code examples
angularjsibm-mobilefirst

AngularJS controller not a function in IBM MobileFirst

AngularJS controller not a function in IBM MobileFirst is what I am getting an error. I went through many similar questions being ask on Stack Overflow but nothing helped me.

Error Print Screen

// **************** app.js ***************

var app = angular.module('myApp',['ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
	
	$urlRouterProvider.otherwise('/login');
	
	$stateProvider
		.state('login',{
			url:'/login',
			templateUrl:'view/login.html',
			controller:'loginController'
		});
	
});


// **************** login.js ***************


app.controller('loginController',function($scope){
	
	$scope.login = function(){
		$scope.userName = angular.element('#usrName').val();
		$scope.password = angular.element('#pass').val();
		console.log($scope.userName, $scope.password);
		
		
		
		$scope.loginProcedure ={
				procedure:'login',
				adaptor:'SQL',
				parameters:[$scope.userName, $scope.password]
		};
		
		WL.Client.invokeProcedure($scope.loginProcedure, function(){
			onSuccess: loginSuccess,
			onFailure: loginFailure
		});
		
		$scope.loginSuccess = function()
		{
			alert('success');
		};
		
		$scope.loginFailure = function()
		{
			alert('failed');
		};
	}
	
});
<!-- INDEX.html -->

<!DOCTYPE HTML>
<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>AB</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    		<!--
    			<link rel="shortcut icon" href="images/favicon.png">
    			<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
    		-->
    		<link rel="stylesheet" href="css/main.css" />
    		<link rel="stylesheet" href="css/bootstrap.min.css" />
    		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
    		
    		<script>window.$ = window.jQuery = WLJQ;</script>
    	</head>
    	<body ng-app="myApp">
    		<!--application UI goes here-->
    		
    		<div id="view" ui-view></div>
    		
    		<script src="js/initOptions.js"></script>
    		<script src="js/main.js"></script>
    		<script src="js/messages.js"></script>
    		<script src="library/jquery.min.js"></script>
    		<script src="library/angular.1.4.9.js"></script>
    		<script src="library/angular-ui-router.min.js"></script>
    		<script src="library/bootstrap.min.js"></script>
    		<script src="controller/app.js"></script>
    		<script src="controller/login.js"></script>
    	</body>
</html>

<!-- Login.html --> 

<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">

	<!-- Login Box Start -->

	<div class="panel panel-primary">
		<div class="panel-heading">Login</div>
		<div class="panel-body">
			<form class="form-group" name="lgForm">
				<input type="text" class="form-control" id="usrName" ng-modal="usrName" required />
				<input type="password" class="form-control" id="pass" ng-modal="pass" required />
				<input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
			</form>
		</div>
	</div>
	
	<!-- Login Box End -->
	
	<!--  error Modal start -->
	
	<div class="modal" role="modal" id="errorPopup">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">Error</div>
				<div class="modal-body"></div>
			</div>
		</div>
	</div>
	
	<!--  error Modal End -->

</div>

Solution

  • issue was wrong spelling of adapter

     /* wrong one */

$scope.loginProcedure ={
				procedure:'login',
				adaptor:'SQL',
				parameters:[$scope.userName, $scope.password]
		};


/*write one */

$scope.loginProcedure ={
				procedure:'login',
				adapter:'SQL',
				parameters:[$scope.userName, $scope.password]
		};