Ionic login简单登录页面

1.login.html

 1 <ion-view view-title="登录" hide-nav-bar="true">
 2     <div class="bar bar-header  bar-positive ">
 3         <h1 class="title">登录</h1>
 4         <button class="button button-clear" ng-click="registerclick()">注册</button>
 5     </div>
 6     <div class="bar bar-subheader">
 7         <ion-scroll direction="x" scrollbar-x="false" overflow-scroll="true" style="overflow: hidden">
 8             <div class="button-bar sub_header_list">
 9                 <a class="button button-clear {{isgeneralCss}}" ng-click="changeModel(0)">普通登录</a>
10                 <a class="button button-clear {{isfastCss}}" ng-click="changeModel(1)">快捷登录</a>
11             </div>
12         </ion-scroll>
13     </div>
14     <ion-content class="has-subheader">
15 
16         <form name="myForm" ng-show="isloginModel" ng-submit="signIn()">
17             <div class="list list-inset removePM">
18                 <label class="item item-input">
19                     <span class="input-label ion-android-people">&nbsp;&nbsp;用户名</span>
20                     <input type="text" name="txtUserName" placeholder="请输入用户名" ng-model="user.username" required>
21                 </label>
22                 <label class="item item-input">
23                     <span class="input-label ion-android-lock">&nbsp;&nbsp;密码</span>
24                     <input type="password" name="txtPwd" placeholder="请输入密码" ng-model="user.password" required>
25                 </label>
26             </div>
27             <div class="row list-borderless">
28                 <div class="col col-67"><ion-checkbox ng-model="user.isChecked">是否记住密码</ion-checkbox> </div>
29                 <div class="col col-center"><a href="#">忘记密码？</a></div>
30             </div>
31 
32             <div class="padding">
33                 <button class="button button-block button-positive" type="submit" ng-disabled=" myForm.txtUserName.$invalid || myForm.txtPwd.$invalid">
34                     <b>登&nbsp;&nbsp;录</b>
35                 </button>
36             </div>
37         </form>
38 
39         <form name="myfastForm" ng-show="!isloginModel" ng-submit="signIn()">
40             <div class="list list-inset removePM">
41                 <label class="item item-input">
42                     <span class="input-label ion-android-people">&nbsp;&nbsp;手机号</span>
43                     <input type="text" name="txtphone" placeholder="请输入手机号" ng-model="user.phone" required>
44                 </label>
45                 <label class="item  item-input">
46                     <span class="input-label ion-android-lock">&nbsp;&nbsp;验证码</span>
47                     <input type="text" name="txtvercode" style="flex:120px;" placeholder="请输入验证码" ng-model="user.vercode" required>
48                     <button class="button" style="font-size:12px; color:red;">获取验证码</button>
49                 </label>
50             </div>
51 
52             <div class="padding">
53                 <button class="button button-block button-positive"  ng-disabled="myfastForm.txtphone.$invalid || myfastForm.txtvercode.$invalid">
54                     <b>登&nbsp;&nbsp;录</b>
55                 </button>
56             </div>
57             <div class="padding com">
58                 <span class="positive">点击登录表明你已同意并阅读<a style="color:red; " href="#">《快捷登录条款》</a></span>
59             </div>
60         </form>
61     </ion-content>
62 </ion-view>

2.controller.js

 1   //用户登录
 2   .controller('LoginCtrl', function ($scope, $state, $ionicLoading, userFactory, Storage) {
 3 
 4         $scope.user = {
 5             username: "",
 6             password:  "",
 7             isChecked: false,
 8             phone: '',
 9             vercode:''
10         }
11         $scope.$on('$stateChangeSuccess', function () {
12             if (Storage.get("loginInfo") != null) {
13                 $scope.user.username = Storage.get("loginInfo").username;
14                 $scope.user.password = Storage.get("loginInfo").password;
15                 $scope.user.isChecked = Storage.get("loginInfo").isChecked;
16             }
17             else {
18                 $scope.user.username = "";
19                 $scope.user.password = "";
20                 $scope.user.isChecked = false;
21             }
22         });
23        
24         //登录
25         $scope.signIn = function () {
26 
27             userFactory.login($scope.user.username, $scope.user.password);
28         }
29         
30         $scope.$on('User.loginUpdated', function () {
31             console.log("User.loginUpdated");
32             var userRel = userFactory.getCurrentUser();
33             console.log(userRel);
34             if (userRel.status != "1") {//登陆失败
35                 $ionicLoading.show({
36                     noBackdrop: true,
37                     template: userRel.msg,
38                     duration: 1500
39                 });
40             } else {
41                 if ($scope.user.isChecked) {
42                     Storage.set("loginInfo", $scope.user);
43                 } else {
44                     Storage.remove("loginInfo");
45                 }
46                 $state.go('app.user');  //路由跳转
47                 
48             }
49         });
50 
51         //登录切换
52         $scope.isloginModel = true;
53         $scope.isgeneralCss = "sub_button_select";
54         $scope.isfastCss = "";
55         $scope.changeModel = function (lm) {
56            
57             if (lm == 0) {
58                 $scope.isgeneralCss = "sub_button_select";
59                 $scope.isloginModel = true;
60                 $scope.isfastCss = "";
61             }
62             if (lm == 1) {
63              
64                 $scope.isgeneralCss = "";
65                 $scope.isfastCss = "sub_button_select";
66                 $scope.isloginModel = false;
67             }
68         }
69         $scope.registerclick = function () {
70             $state.go("register");
71         }
72   })

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{
   100%;
}
.sub_header_list .button{
   50%;
  color:#666;
}
.bar .sub_header_list .button.sub_button_select{
  border-bottom:2px solid #387ef5;
  position:relative;
}
.bar-subheader{
  border-bottom: none;
}

效果图：