angular简单登录注册
最近在学angularJs,今天写了一个非常简单的登录注册页面,大概熟悉了一下angularJs的语法。
后台数据模拟:user_info.json
1 登录页面
步骤一:首先要把页面给div出来。
页面主要代码:
<div class="container main" data-ng-controller="loginCtrl"> <form class="form-horizontal" name="loginForm" novalidate> <div class="form-group "> <div class="col-sm-offset-4 col-sm-3"> <h2 class="title">登录</h2> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-3"> <input type="text" class="form-control" name="username" ng-model="username" value="" ng-focus="hide()" placeholder="输入用户名" required> <span class="red" data-ng-show="loginForm.username.$dirty && loginForm.username.$invalid"> <span data-ng-show="loginForm.username.$error.required">用户名不能为空</span> </span> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-3"> <input type="password" class="form-control" name="password" ng-model="password" value="" ng-focus="hide()" placeholder="密码" required> <span class="red" data-ng-show="loginForm.password.$dirty && loginForm.password.$invalid"> <span data-ng-show="loginForm.password.$error.required">密码不能为空</span> </span> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-3"> <span class="red" ng-model="check_tips"> {{check_tips}} </span> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-3"> <button class="btn btn-primary" value="" data-ng-click="submit()">登录</button> <button class="btn btn-primary" value="" data-ng-click = "register()">注册</button> </div> </div> </form> </div>
步骤二:给需要的DOM元素添加指令。
步骤三:1. 如果点击的是登录按钮:到user_info.json文件和localStorage中查找用户名和密码,判断是否匹配,如果不匹配,显示提示信息。如果匹配,跳转到content.html
2. 如果点击的是注册按钮:跳转到register.html 后续工作逻辑与登录页面类似。
主要js代码:
<script> myApp.controller('loginCtrl', function ($scope,$http) { $scope.username = 'jj'; $scope.password = '123456'; $scope.register = function () { window.location.href = 'register.html' } $scope.hide = function () { $scope.check_tips = ' ' } $scope.submit = function(){ $http.get("json/user_info.json") .success(function (response) { $scope.userList = response.users; angular.forEach($scope.userList, function (item) { if($scope.username == item.username && $scope.password == item.password ){ window.location.href = 'content.html'; } }) var password = localStorage.getItem($scope.username+'P') if(password == $scope.password){ window.location.href = 'content.html'; } $scope.check_tips = '用户不存在或者密码错误' }) } }) </script>
全部代码请参考:https://github.com/hjjia/demo-angularJs