Ionic login简单登录页面

1.login.html

 <ion-view view-title="登录" hide-nav-bar="true">
     <div class="bar bar-header  bar-positive ">
         <h1 class="title">登录</h1>
         <button class="button button-clear" ng-click="registerclick()">注册</button>
     </div>
     <div class="bar bar-subheader">
         <ion-scroll direction="x" scrollbar-x="false" overflow-scroll="true" style="overflow: hidden">
             <div class="button-bar sub_header_list">
                 <a class="button button-clear {{isgeneralCss}}" ng-click="changeModel(0)">普通登录</a>
                 <a class="button button-clear {{isfastCss}}" ng-click="changeModel(1)">快捷登录</a>
             </div>
         </ion-scroll>
     </div>
     <ion-content class="has-subheader">

         <form name="myForm" ng-show="isloginModel" ng-submit="signIn()">
             <div class="list list-inset removePM">
                 <label class="item item-input">
                     <span class="input-label ion-android-people">&nbsp;&nbsp;用户名</span>
                     <input type="text" name="txtUserName" placeholder="请输入用户名" ng-model="user.username" required>
                 </label>
                 <label class="item item-input">
                     <span class="input-label ion-android-lock">&nbsp;&nbsp;密码</span>
                     <input type="password" name="txtPwd" placeholder="请输入密码" ng-model="user.password" required>
                 </label>
             </div>
             <div class="row list-borderless">
                 <div class="col col-67"><ion-checkbox ng-model="user.isChecked">是否记住密码</ion-checkbox> </div>
                 <div class="col col-center"><a href="#">忘记密码？</a></div>
             </div>

             <div class="padding">
                 <button class="button button-block button-positive" type="submit" ng-disabled=" myForm.txtUserName.$invalid || myForm.txtPwd.$invalid">
                     <b>登&nbsp;&nbsp;录</b>
                 </button>
             </div>
         </form>

         <form name="myfastForm" ng-show="!isloginModel" ng-submit="signIn()">
             <div class="list list-inset removePM">
                 <label class="item item-input">
                     <span class="input-label ion-android-people">&nbsp;&nbsp;手机号</span>
                     <input type="text" name="txtphone" placeholder="请输入手机号" ng-model="user.phone" required>
                 </label>
                 <label class="item  item-input">
                     <span class="input-label ion-android-lock">&nbsp;&nbsp;验证码</span>
                     <input type="text" name="txtvercode" style="flex:120px;" placeholder="请输入验证码" ng-model="user.vercode" required>
                     <button class="button" style="font-size:12px; color:red;">获取验证码</button>
                 </label>
             </div>

             <div class="padding">
                 <button class="button button-block button-positive"  ng-disabled="myfastForm.txtphone.$invalid || myfastForm.txtvercode.$invalid">
                     <b>登&nbsp;&nbsp;录</b>
                 </button>
             </div>
             <div class="padding com">
                 <span class="positive">点击登录表明你已同意并阅读<a style="color:red; " href="#">《快捷登录条款》</a></span>
             </div>
         </form>
     </ion-content>
 </ion-view>

2.controller.js

   //用户登录
   .controller('LoginCtrl', function ($scope, $state, $ionicLoading, userFactory, Storage) {

         $scope.user = {
             username: "",
             password:  "",
             isChecked: false,
             phone: '',
             vercode:''
         }
         $scope.$on('$stateChangeSuccess', function () {
             if (Storage.get("loginInfo") != null) {
                 $scope.user.username = Storage.get("loginInfo").username;
                 $scope.user.password = Storage.get("loginInfo").password;
                 $scope.user.isChecked = Storage.get("loginInfo").isChecked;
             }
             else {
                 $scope.user.username = "";
                 $scope.user.password = "";
                 $scope.user.isChecked = false;
             }
         });

         //登录
         $scope.signIn = function () {

             userFactory.login($scope.user.username, $scope.user.password);
         }

         $scope.$on('User.loginUpdated', function () {
             console.log("User.loginUpdated");
             var userRel = userFactory.getCurrentUser();
             console.log(userRel);
             if (userRel.status != "") {//登陆失败
                 $ionicLoading.show({
                     noBackdrop: true,
                     template: userRel.msg,
                     duration:
                 });
             } else {
                 if ($scope.user.isChecked) {
                     Storage.set("loginInfo", $scope.user);
                 } else {
                     Storage.remove("loginInfo");
                 }
                 $state.go('app.user');  //路由跳转

             }
         });

         //登录切换
         $scope.isloginModel = true;
         $scope.isgeneralCss = "sub_button_select";
         $scope.isfastCss = "";
         $scope.changeModel = function (lm) {

             if (lm == ) {
                 $scope.isgeneralCss = "sub_button_select";
                 $scope.isloginModel = true;
                 $scope.isfastCss = "";
             }
             if (lm == ) {

                 $scope.isgeneralCss = "";
                 $scope.isfastCss = "sub_button_select";
                 $scope.isloginModel = false;
             }
         }
         $scope.registerclick = function () {
             $state.go("register");
         }
   })

3.services.js

 .factory('userFactory', function ($resource, $rootScope, ENV, Storage, $http, $q) {
        var user = {}; //返回用户对象

        return {
            //登录
            login: function (username, password) {
                $http.get("http://192.168.0.109:8004/api/" + "/Login/Loging", { params: { UserName: username, Password: password} })
             .success(function (response) {
                 console.log("Loging调用成功")
                 var json = eval('(' + response + ")");
                 user = json;
                 console.log(json.userInfo);

                 if (json.status == "") {
                     Storage.set("UserKey", json.userInfo);
                 }
                 $rootScope.$broadcast('User.loginUpdated');
             }).error(function (err, status) {
                 $ionicLoading.show({
                     noBackdrop: true,
                     template: err,
                     duration:
                 });
             });
            },
             getCurrentUser: function () {
                return user;
            }
        };
    })
    .factory('Storage', function ($state, ENV, $http, $rootScope) {
        var version = "";
        return {
            set: function (key, data) {
                return window.localStorage.setItem(key, window.JSON.stringify(data));
            },
            get: function (key) {

                return window.JSON.parse(window.localStorage.getItem(key));
            },
            remove: function (key) {
                return window.localStorage.removeItem(key);
            }
        };
    })

css：

.bar .sub_header_list .button.button-clear{

  border-bottom: 1px solid #eee;
}
.sub_header_list{
  width: 100%;
}
.sub_header_list .button{
  width: 50%;
  color:#666;
}
.bar .sub_header_list .button.sub_button_select{
  border-bottom:2px solid #387ef5;
  position:relative;
}
.bar-subheader{
  border-bottom: none;
}

效果图：