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/