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>

View Code

步骤二：给须要的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>

View Code

 

所有代码请参考：https://github.com/hjjia/demo-angularJs

运行效果请点击：http://hjjia.github.io/demo-angularJs/