Login using angularjs?

Question

I have this controller that handles login:

html

<input id="UserName" type="text" class="form-control" name="UserName" data-ng-model="vm.userName" placeholder="username or email">

<input id="Password" type="password" class="form-control" name="Password" placeholder="password" data-ng-model="vm.password">

app.js

    var Call23 = angular.module("Call23", ["ngResource", "ngRoute", 'ui.bootstrap']).
config(function ($routeProvider) {
    $routeProvider.
        when('/', { controller: LoginCtrl, templateUrl: 'login.html' }).


        otherwise({ redirectTo: '/' });
});

   Call23.factory("page", function($rootScope){
       var page={};
       var user={};
       page.setPage=function(title,bodyClass){
           $rootScope.pageTitle = title;
           $rootScope.bodylayout=bodyClass;
       };
       page.setUser=function(user){
           $rootScope.user=user;
       }
       return page;
   });

   var LoginController = function ($scope, $routeParams, $location, LoginFactory) {
       $scope.loginForm = {
           UserName: '',
           password: '', 
           returnUrl: $routeParams.returnUrl,
           loginFailure: false,
           loginSucess: false
       };


       $scope.login = function () {

           var result = LoginFactory($scope.loginForm.UserName, $scope.loginForm.password, $scope.loginForm.rememberMe);
           result.then(function (result) {
               if (result.success) {
                   if ($scope.loginForm.returnUrl !== undefined) {
                       $location.path('/');
                   }
                   else {
                       $location.path($scope.loginForm.returnUrl);
                   }
                   $scope.loginForm.loginSucess = true;
               } else {
                   $scope.loginForm.loginFailure = true;
               }
          });
     }
  }
var LoginFactory = function ($http, $q) {
return function (UserName, Password) 
    var deferredObject = $q.defer();
    $http.post(
       'login.html', {
            Email: UserName,
            Password: Password,
        }
    ).
    success(function (data) {
        if (data == "True") {
            deferredObject.resolve({ success: true });
        } else {
            deferredObject.resolve({ success: false });
        }
    }).
    error(function () {
        deferredObject.resolve({ success: false });
    });
    return deferredObject.promise;
}
}
LoginFactory.$inject = ['$http', '$q'];

I get this error even before i try to login or build my project. Can you please help.

Error: [$injector:unpr] Unknown provider: LoginFactoryProvider <- LoginFactory

Billy Blaze · Accepted Answer · 2015-01-30 14:12:55Z

2

You haven't register the LoginFactory as an Angular provider, the dependency injection works if its a valid angular service/provider/factory.

If you register your function with the following code, then the LoginFactoryProvider should be found.

angular.module('UserLogin', [])
    .provider('LoginFactory', LoginFactoryProvider);

function LoginFactoryProvider ( /* NO-DI */ ) {
    return {
        $get: ['DI', function ($DI) {
            return {
                 setLogin: function(user, pass) { /* etc */ }
            }
        }
    }
}

Now you can add in all Controllers where you want to access the LoginFactory.setLogin function with dependency injection as you wanted:

var LoginController = function ($scope, $routeParams, $location, LoginFactory) {

Ofcourse before this works you need to register the module UserLogin into the first part of your app.js like so:

var Call23 = angular.module("Call23", ["ngResource", "ngRoute", 'ui.bootstrap', "UserLogin"])

answered Jan 30, 2015 at 14:12

Billy Blaze

3331 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ninjaXnado Over a year ago

this is the error i found after i ve added your code im not sure if i ve done the right thing. Error: [$injector:unpr] Unknown provider: DIProvider <- DI <- LoginFactory <- LoginFactory

Billy Blaze Over a year ago

Change the DI and $DI to the dependency modules you need (i.e. $http and $q), I add'd this as an example so you could knew where to place your DI's.

ninjaXnado Over a year ago

billy i'm new on angular i'm lost now

Billy Blaze Over a year ago

just replace $get: ['DI', function ($DI) { with $get: ['$http', '$q', function ($http, $q) {. Also if your new I would suggest to watch a few lenghty youtube presentations (like youtube.com/watch?v=_OGGsf1ZXMs)

ninjaXnado Over a year ago

ok thanx for your time it doesnt have error any more but my problem now is that how can i tell the code to take username and password on the database ?

|

Collectives™ on Stack Overflow

Login using angularjs?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related