Hello I want to create a simple login from in ionic framework and angular-js

ionic-v1
1

Hello,

I want to create a simple login from in ionic framework and angular-js.
just I want to check how its work click button event .
Otherwise you can create a new project login from and check the validation then send me .

2

Create an ionic project using the sidemenu template. It has a login form and a dummy auth function.

ionic start myApp sidemenu

Then check out ionic cloud and ionic.Auth

This should be a good start using ionic. If you want to do your own custom authentication, thats a different story.

There are several good articles out there on creating your own authentication system, but Ionic really makes it easy.

Good Luck,

RGecy

3

I can’t understand Mr RGecy can you please explain it …
My requirement is …
I have two field 1 is user id and 2 is user password get the values on html page then on click submit button
the values is store in my database and i will try to run in local system .
How can i do ? please guide me because i am new in ionic and anglar js .

4

Hello Every One ,
anyone can guide me please …

5

you may want to look at this tutorial: https://devdactic.com/simple-login-example-with-ionic-and-angularjs/ hope it helps…

6

okey thanks let check it .

7

Hi,

You can use following

Login.html

<ion-view view-title="Login">
  <ion-content>
  <form name="myForm" novalidate>
    <div class="padding logo">
    	<img src="img/logo.png">
    	<div class="padding">Use your credentials to log into your account</div>
    </div>
    <div class="list">
        <label class="item item-input">
          <span class="input-label">User Name</span>
          <input type="text" name="username" ng-model="user.userID" required>
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" name="password" ng-model="user.password" required>
        </label>
  	</div>
    
    <div class="padding errors">
        <p ng-show="myForm.username.$error.required">* Username is required</p>
        <p ng-show="myForm.password.$error.required">* Password is required</p>
    </div>

    <div class="padding">
        <button class="button button-block button-custom" ng-disabled="myForm.$invalid" ng-click="login(user)">Sign-In</button>
    	<!-- <p class="text-center">
      	<a href="#/forgot-password">Forgot password</a>
    	</p> -->
    </div>
    </form>
  </ion-content>
</ion-view>

Config

.state('login', {
    cache: false,
    url: '/login',
    templateUrl: 'templates/Account/Login.html',
    controller: 'loginController'
  })

Controller

.controller('loginController', ['$scope', '$state', '$http', '$ionicPopup', '$ionicLoading', '$q', '$rootScope', function ($scope, $state, $http, $ionicPopup, $ionicLoading, $q, $rootScope) {

  $scope.user = {};
  
  $scope.login = function() {
  
  $http.get('http://www.XXX.com/LoginWebService/GetLoginDetails/' + $scope.user.userID + '/' + $scope.user.password)
    .then( function (response) {
      // If successful login
      $state.go('Dashboard', {}, {reload: true});
    })
    .catch(function (e){
       alert(e);
    })
    .finally(function (e) {
      // do something
    });
  }
}])
8

I show that link but my problem is not solve …

9

Let me check Mr priteshpmetha.

10

Hello ,
Please tell me " where put the code config and Controller "
Or creating a new file Conig.js and Controller.js
Or put the code in apps.js file.

11

You can copy paste it in app.js file

12

I have put the code config and controller in apps.js file and save it.
After click login button validation is not working .

13

For validation… no need to click on button… Once you enter value in compulsory field then after button will get active…