Angularjs Controller is not a function, got undefined after creating a Factory file

Question

First I had a file called angular-controller.js where there was my app controller, and calling it in my html ng-controller it worked. Now I decide to make another file, a Factory file, to separate some functions from controller file, but now there are an error: Error: Argument 'LoginController' is not a function, got undefined at assertArg (angular.js:1099) at assertArgFn (angular.js:1109) at angular.js:4978 at angular.js:4560 at forEach (angular.js:137) at nodeLinkFn (angular.js:4545) at compositeLinkFn (angular.js:4191) at publicLinkFn (angular.js:4096) at angular.js:1660 at Object.$eval (angular.js:8218)

This is my angular-controller.js (with my controller):

 var app = angular.module("StaffLogin", []); app.controller("LoginController", function($scope, $http, restService) { $scope.stafflogins = []; $scope.staffLoginForm = { email: "", pass: "" }; $scope.tokenStaffForm = { idtokenstaff: -1, tokenstaff: "" }; $scope.staffForm = { idstaff : -1, staffType: { idstaffType: -1, type: "" }, name: "", surname: "", birthDate: "", phone: "", gender: true, working: true, staffLogin: { idstaffLogin: -1, email: "", pass: "" } }; $scope.submitCredentials= function() { restService.login(); console.log($scope.staffLoginForm); /* $http({ method : 'POST', url : 'http://localhost:8080/FoodDrinkDispener/rest/tokenstaff', data : angular.toJson($scope.staffLoginForm), }).then(function successCallback(response) { if (typeof response.data === 'object'){ _logsuccess(response) return response.status; } else _logerror(response); },function (response) { console.log($scope.tokenStaffForm); _logerror(response); } );*/ } function _SetToken(CurrentToken) { sessionStorage.setItem("token", (CurrentToken === null) ? null : JSON.stringify(CurrentToken)); //console.log(CurrentToken); } function _logsuccess(response) { console.log("Loggato correttamente"); console.log(response.status); var CurrentToken = response.data; _SetToken(CurrentToken); } function _logerror(response) { console.log("Login fallito"); console.log(response.status); _SetToken(null); } console.log(sessionStorage.getItem.toString); });

This is my factory file called rest-services.js:

 //'use strict'; var app = angular.module("StaffLogin", []); app.factory("restService", function($scope, $http) { var REST_URL = "http://localhost:8080/FoodDrinkDispener/rest/"; function _GetToken() { var token = sessionStorage.getItem("token"); if (token !== null) return JSON.parse(token); } function _SetToken(CurrentToken) { sessionStorage.setItem("token", (CurrentToken === null) ? null : JSON.stringify(CurrentToken)); } return { login: function(loginform){ return $http({ method : 'POST', url : REST_URL+'tokenstaff', data : angular.toJson(loginform), }).then(function successCallback(response) { if (typeof response.data === 'object'){ // _logsuccess(response) console.log("login andato a buon fine"); return response.status; } else console.log("login error"); },function (response) { console.log($scope.tokenStaffForm); console.log("login error"); } ); } } });

And this is my html file where I called the controller "LoginController"

 <!DOCTYPE html> <!-- saved from url=(0066)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/signin/ --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="images/puzzle.png" /> <title>Login</title> <!-- Bootstrap core CSS --> <link href="./styles/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="./styles/signin.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy this line! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body ng-app="StaffLogin" ng-controller="LoginController" ng-fa> <div class="container"> <form class="form-signin" role="form" ng-controller="LoginController" ng-submit="submitCredentials()" novalidate> <h2 class="form-signin-heading">Hai bisogno di autenticarti</h2> <input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="email" ng-model="staffLoginForm.email"> <input type="password" class="form-control" placeholder="Password" required="" id="password" ng-model="staffLoginForm.pass"> <label class="checkbox"> <input type="checkbox" value="remember-me"> Ricordami </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> <script src="scripts/angular.js"></script> <script type="application/javascript"></script> <script src="scripts/login-controller.js"></script> <script src="scripts/rest-services.js"></script> </body></html>

I hope that somebody can help me

Answer 1

For factory file rest-services.js,change:

var app = angular.module("StaffLogin", []);

to

`var app = angular.module("StaffLogin");` 
app.factory("restService", function($http) {  
         // code
});

You can't add $scope as dependency in Factory/services.

Angularjs Controller is not a function, got undefined after creating a Factory file

Question

1 answers

solution1
1 ACCPTED 2016-12-14 11:32:22

Angularjs Controller is not a function, got undefined after creating a Factory file

Question

1 answers

solution1 1 ACCPTED 2016-12-14 11:32:22

solution1
1 ACCPTED 2016-12-14 11:32:22