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 != "1") {//登陸失敗
                $ionicLoading.show({
                    noBackdrop: true,
                    template: userRel.msg,
                    duration: 1500
                });
            } 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 == 0) {
                $scope.isgeneralCss = "sub_button_select";
                $scope.isloginModel = true;
                $scope.isfastCss = "";
            }
            if (lm == 1) {
             
                $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 == "1") {
                     Storage.set("UserKey", json.userInfo);
                 }
                 $rootScope.$broadcast('User.loginUpdated');
             }).error(function (err, status) {
                 $ionicLoading.show({
                     noBackdrop: true,
                     template: err,
                     duration: 1500
                 });
             });
            },
             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;
}

效果圖：