【AngularJs】--入门实例

AngularJs是一款优秀的前端框架，今天我们一起通过一个简单的登录页面来体会一下angularjs框架的一些特性。
首先大家先看一下项目的整个目录结构。

通过每个文件夹的名，大家也基本了解哪里存放js，哪里存放样式，哪里存放页面等。

接下来开始写登录了。先画一个界面。

<ion-pane ng-controller="userCtrl">    <!-- 顶部图片 -->    <div align="center" style="margin-top: 80px;">      <img src="img/logo.png" style="width:28%;height:28%">    </div>    <div class="content has-header">      <div class="list list-inset">        <label class="item item-input">          <i class="icon ion-person" placeholder-icon></i>          <input  style="margin-left:8px;" type="text" placeholder="登录账号" ng-model="userInfo.userCode">        </label>        <label class="item item-input">         <i class="icon ion-android-lock" placeholder-icon></i>          <input style="margin-left:8px;" type="password" placeholder="登录密码" ng-model="userInfo.password">        </label>      </div>      <div class="padding" style="margin-top:50px;">        <button class="button button-block button-balanced" ng-click="login()">立即登录</button>      </div>    </div>  </ion-pane>

这是一个登录界面

第二步：
这时候，需要在route.js中进行路由的配置。也就是能通过输入地址，访问到当前页面。

第三步：
接下来我们做点击登录的流程。

.controller('userCtrl', function($scope,$ionicPopup,$state,userService){  /*点击登录按钮执行的方法*/    $scope.login=function(){        if($scope.userInfo==undefined || ($scope.userInfo.userCode=="" && $scope.userInfo.password=="")){          var alertPopup = $ionicPopup.alert({                    title: '提示',                    template: '请输入用户名密码!',                    okType: 'button-balanced'                });          return false;        }        /*获取用户输入的用户名和密码*/        var userCode=$scope.userInfo.userCode;        var password=$scope.userInfo.password;        if($scope.userInfo.userCode=='' || $scope.userInfo.userCode==undefined){           var alertPopup = $ionicPopup.alert({                    title: '提示',                    template: '请输入用户名!',                    okType: 'button-balanced'                });               return false;        }        if($scope.userInfo.password==undefined || $scope.userInfo.password==''){           var alertPopup = $ionicPopup.alert({                    title: '提示',                    template: '请输入密码!',                    okType: 'button-balanced'                });           return false;        }        /*根据获取到的用户名查询用户信息并判断该用户登录信息是否正确*/        userService.query({userCode:userCode,password:password},function(data){          //判断返回结果是否为真          if(data.result==true){            if(data.allUsers.password==password){              /*如果用户名密码正确，将用户名密码写入localStorage中，跳转到学生评教任务页面*/              localStorage.setItem("userCode", userCode);              localStorage.setItem("password", password);              /*alert(localStorage.getItem("userCode"));*/              /*跳转到学生评教任务界面*/              $state.go("evaluationTask");            }else{                var alertPopup = $ionicPopup.alert({                    title: '提示',                    template: '密码错误!',                    okType: 'button-balanced'                });                alertPopup.then(function(res) {                  $scope.userInfo.password='';                });            }          }else{            var alertPopup = $ionicPopup.alert({                    title: '提示',                    template: '用户名错误!',                    okType: 'button-balanced'                });                alertPopup.then(function(res) {                  $scope.userInfo.userCode='';                  $scope.userInfo.password='';            });          }                 },function(){});    }})

上述中用到的userServer方法是我们在services.js中写的。