WorklightBeginner WorklightBeginner - 6 months ago 34
AngularJS Question

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>




Answer

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]
		};

Comments