How to make Ionic app user login? - angularjs

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