Page 1からアレイを取得し、オン・クリック（AngularJS）を使用してページ2で使用してください。

Question

あなたが蹴ってジャンプしてくれることを願っています。あなたの通常の理解に感謝します。

フレームワーク：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;">&nbsp; 
       <span style="color:red" ng-show="lForm.username.$dirty && 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;">&nbsp; 
       <span style="color:red" ng-show="lForm.password.$dirty && 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 && lForm.username.$invalid || lForm.password.$dirty && 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) && (value.Password, $scope.password)){ 
       $scope.result = "Successful ";//msg to be displayed 
      }else { 
       $scope.result = "Unsuccessful ";//msg to be displayed 
      } 
     }); 
    } 
}); 

[DATA OBJECT.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> 

Answer 1

私は、サービスを利用してそれを行うに推薦します。角度サービスはシングルトンです。したがって、1つのコントローラから、データをサービスに入れ、ページを切り替えて、サービスからデータを取得します。 注：ユーザーがページをリフレッシュすると、サービス（またはそれに関する角度）が状態を維持しないため、サービス内のデータが失われます。

ofcでは、誰もが独自の解決策を用意しています。私はあなたが初心者であることを知っています。答えは角度の把握に役立ちます。

Answer 2

データを$ rootScopeに保存するか、localStorage Servicesを作成すると、アプリケーション内のどこにでもデータにアクセスできますが、ベストプラクティスではlocalStorageサービスがいくつか作成されます。