Блог

надеюсь, вы, ребята, пинаетесь и прыгаете. Спасибо за ваше обычное понимание.

Фреймворки: AngularJS, NodeJS

Я разрабатываю страницу входа в систему. Но данные, с которыми нужно сравнивать, представляют собой массив элементов в testData.html . Я хочу вызвать данные на login.html и сравните его с вводом пользователя.

Форма входа работает правильно, но данные не считываются. Я попытался скомпилировать dataobject.html файл отдельно, и он не запускался.

Я не хочу хранить эти данные в файле .json. Позже я узнаю, как использовать MongoDB для чтения данных и сравнения, пожалуйста, проверьте коды ниже.

[LOGIN.HTML ]

 <div ng-app="myApp" ng-controller="loginCtrls" style="height:auto;">
    <form name="lForm">
          <div class="container">
            <label><b>Username</b></label>
            <input class="w3-round" type="text" name="username" placeholder="Username" ng-model="username" required>    
            <div align="right" style="width:550px;">amp;nbsp;
                <span style="color:red" ng-show="lForm.username.$dirty amp;amp; lForm.username.$invalid">
                    <span ng-show = "lForm.username.$error.required">Username is required.</span>
                </span>         
            </div>

            <label><b>Password</b></label>
            <input class="w3-round" type="password" name="password" ng-model="password" placeholder="Password" required>
            <div align="right" style="width:550px;">amp;nbsp;
                <span style="color:red" ng-show="lForm.password.$dirty amp;amp; lForm.password.$invalid">
                    <span ng-show = "lForm.password.$error.required">Password is required.</span>
                </span>         
            </div>

            <div align="center">
            <button class="w3-btn w3-teal w3-round" style="height:45px; width:100%; font-size:16px;" ng-disabled = "lForm.username.$dirty amp;amp; lForm.username.$invalid || lForm.password.$dirty amp;amp; lForm.password.$invalid" ng-click="chkData()">Click to Login</button>
            </div>
            <input type="checkbox" checked="checked"> Remember me
          </div>

          <div class="container" style="background-color:#f1f1f1; margin-top:0;">
            <span>Forgot <a href="#forgotpass.html">password?</a></span>
          </div>
    </form>
        <h4>{{result}} login attempt</h4>
</div>

<script src="js/loginCtrl.js"></script>
 

[LOGINCTRL.JS ]

 // JavaScript Document
var app = angular.module('myApp', []);
app.controller('loginCtrls', function($scope, $http) {

//get the file from the dataobject.html file
  $http.get("dataobject.html").then(function (response) {
    //parse the array object to $scope.users    
 $scope.users = response.data.records; 

  });

//this function checks the user's input and 
//compares it with the any match in object array
//the object array data has been passed into $scope.users
    $scope.chkData = function(){
        $scope.users = $scope.data.records;
         angular.forEach($scope.users, function(value, key){

             if(angular.equals(value.Username, $scope.username) amp;amp; (value.Password, $scope.password)){
                $scope.result = "Successful ";//msg to be displayed
             }else {
                $scope.result = "Unsuccessful ";//msg to be displayed
             }
        });
    }
});
 

[ОБЪЕКТ ДАННЫХ.HTML]

 <script src = "js/angular.min.js" type="text/javascript"></script>

<div ng-app="myApp" ng-controller="mdata">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('mdata', function($scope) {
      $scope.data =  
      { "records":[ {"Username":"Alfreds","Password":"alfred","Session ID":"1"}, {"Username":"Ana","Password":"ana","Session ID":"2"}, {"Username":"Moreno","Password":"moreno","Session ID":"3"}] };
      });

});
</script>
 

Я бы рекомендовал сделать это с помощью сервиса. Службы Angular являются одиночными. Итак, с одного контроллера вы помещаете данные в сервис, переключаете страницы, получаете данные из сервиса. ПРИМЕЧАНИЕ: если пользователь обновит страницу, данные в сервисе будут потеряны, поскольку сервисы (или angular, если на то пошло) не сохраняются в состоянии.

конечно, у каждого будет свое собственное решение. Я вижу, вы новичок, поэтому ответ призван помочь вам разобраться в angular.

Вы можете хранить свои данные либо в $ rootScope, либо путем создания служб localStorage, и вы можете получить доступ к данным в любом месте приложения, но наилучшей практикой является создание некоторых служб localStorage.