How to make Ionic app user login?

Question

I have two text box for username and password, when each user enter data it should send to api. how can i make it work.

           <label class="item item-input">
         <span class="input-label">Username</span>
         <input type="text" ng-model="loginData.username">
          </label>
        <label class="item item-input">
           <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
          <p style="text-align:center"ng-hide=myflag>wrong credentials</P>
         <label class="item">
         <button class="button button-block button-positive" type="submit">Log in</button>
    </label>

Answer 1

You should read through the angular documentation for forms. https://docs.angularjs.org/guide/forms

Here's a quick example of a template + controller.

html

<form action="submitLogin()">
    <label class="item item-input">
         <span class="input-label">Username</span>
         <input type="text" ng-model="loginData.username">
          </label>
        <label class="item item-input">
           <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
          <p style="text-align:center"ng-hide=myflag>wrong credentials</P>
         <label class="item">
         <button class="button button-block button-positive" type="submit">Log in</button>
    </label>
</form>

controller

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

example_app.controller("LoginController", ['$scope', '$http', function($scope, $http) {
    $scope.loginData = {};
    $scope.submitLogin= function(){ 
        var res = $http.post('http://login.com/postLogin', loginData);
        res.success(function(data, status, headers, config) {
            $scope.message = data;
            // go to authorized page
        });
        res.error(function(data, status, headers, config) {
            alert( "failure message: " + JSON.stringify({data: data}));
        });     

    };
}]);

Documentation doesn't show the action= functionality, but shows a ng-click on the submit button instead. Both work fine.

Edit: Was going to mention, but forgot to, that you should try to use angular services for instead of using $http directly in your controller.

https://docs.angularjs.org/guide/services

https://github.com/johnpapa/angular-styleguide