i want to create a service that does the login functionality?

Question

i want to create a service that does the login functionality?

178 views Asked by Anky At 01 November 2024 at 06:06

here is my app.js in which i have create a service which should check that if this particular username and password fills in login should be done and page should be redirected to home.html i am not able to get how to call that particular service into the controller and whether i have created the service correctly.

i also need to check that both the fields should not be empty is they gets empty submit button should gets disabled.

 app.js 

    // create angular app
    var validationApp = angular.module('validationApp',['ngRoute']);
    validationApp.config(
        function($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'main.html',
                    controller: 'mainController'
                })
                .when('/home', {
                    templateUrl: 'home.html',
                    controller: 'mainController'
                })
                .otherwise({
                    redirectTo: '/main.html'
                });
        });

    validationApp.service('loginservice',function()
    {
        this.login = function($scope,$location){
            var username = $scope.user.email;
            var password = $scope.user.password;
            if(username == "[email protected]" && password=="1234")
            {
                if ($scope.userForm.$valid) {
                    alert('thank you for submitting your form');
                    $location.path("/home");

                }

            }
            else
            {
                alert("invalid username and password");
            }
        }
    });


    // create angular controller
    validationApp.controller('mainController', function($scope,loginservice) {

    $scope.dologin = loginservice.login();


    });

//here is my index.html page

<body>
<div  ng-app="validationApp">
   <ng-view></ng-view>

</body>

//here is my main.html page

main.html

<div class="container">
    <div class="row">
        <div>
            <form name="userForm" method="post" ng-submit="dologin()" novalidate>
                <h1>Login Form</h1>
                <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control" ng-model="user.email" value="[email protected]">
                    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
                </div>

                <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
                    <label>Password</label>
                    <input type="password" name="password" class="form-control" ng-model="user.password" value="1234">
                    <p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Enter a valid password.</p>
                </div>
                <label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
                <button ng-model="button" ng-disabled="checked">Button</button>
                <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid" >Submit</button>

            </form>
        </div>

    </div>
</div>

Original Q&A

There are 2 answers

**Debasish Mohapatra** · Answer 1 · 2015-06-09 09:55:14

See if this works,

validationApp.service('loginservice',function()
{
    this.login = function(username, password){
        if(username == "[email protected]" && password=="1234")
        {
             alert('thank you for submitting your form');
             $location.path("/home");
        }
        else
        {
            alert("invalid username and password");
        }
    }
});

In your controller

validationApp.controller('mainController', function($scope,loginservice) {

 //$scope.dologin = loginservice.login();
   $scope.dologin = function () {
       if ($scope.userForm.$valid) {
            loginservice.login($scope.user.email, $scope.user.password);
        }
   }
});

**Freezystem** · Answer 2 · 2015-06-09 08:39:37

first you can consider using the resolve parameter of your routes to disallow access to it, in which you have to make a call to a promise. If the promise is resolve access is granted and $routeChangeSuccess event is fired, else you can redirect to another page listening to the $routeChangeError event. see doc

In order to do so you can return a promise from your login service doing something like this :

validationApp.service('loginService',function($q)
{
    var defer = $q.defer();
    this.login = function(username,password){

        if(username == "[email protected]" && password=="1234")
        {
            defer.resolve({username:username});
        }
        else
        {
            defer.reject({error:"invalid username and password"});
        }
    }

    return defer.promise;
});

and in your route :

.when('/home', {
    templateUrl: 'home.html',
    controller: 'mainController',
    resolve : {
        username : function(loginService){
                return loginService.login(username,password);
            }
        }
})

TechQA.

i want to create a service that does the login functionality?

There are 2 answers

Related Questions in ANGULARJS

Related Questions in VALIDATION

Related Questions in MODEL-VIEW-CONTROLLER

Related Questions in SERVICE

Related Questions in FACTORIES

Popular Questions

Popular Tags

Trending Questions