AngularJSのユーザベースのログインページ

Question

Iamは、ログインページに入力されたユーザの詳細に基づいてデータが表示されるアングルアプリを作成します。 は簡単に言うと、私は以下をacheivingで助けを必要とする：

1. ユーザーは、ユーザー名とパスワードを入力すると、URLがこれらのユーザ名とパスワードとURLを使用して構築されるように一意のID（数字の桁）と呼ばれますユーザーごとに生成されます。このユニークなIDは、{"Record"：[{"Id"：12}]のようなJSON形式です。

2. URLから一意のIDが返された場合は、tab.htmlが表示されるか、nullの場合間違った資格情報のエラーメッセージが表示される必要があります。

3. 正常にログインしたユーザーの場合、usernameとpasswordから生成されたuniqueidに基づいてtab.html内のテーブルが表示されます。以下は

私が持っているコードです：

login.htmlと：

<form ng-submit=submit()> 
      <input type="text" name="username" placeholder="Username" ng-model="person.firstName" required /> 
      <span class="error" ng-show="mainForm.usernamename.$error.required">required</span> 
      <input type="password" name="pswd" placeholder="Password" ng-model="person.pswd" required /> 
      <span class="error" ng-show="mainForm.pswd.$error.required">required</span> 
      <div class="submit"> 
       <div> 
        <label> 
         <input name="remember" type="checkbox" data-ng-model="remember" data-ng-click="rememberMe()"> Remember Me 
        </label> 
       </div> 
       <input type="submit" value="LOGIN"> 
      </div> 
      <div class="row"> 
       <div class="col-sm-10"><p><a href="#">Forgot Password?</a></p></div> 
      </div>    
     </form> 

tab.html：

<div ng-controller="SampleController"> 
     <table class="table table-striped table-bordered table-hover dataTables-example"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>ID</th> 
        <th>Qualification</th>   
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="x in tableContent" >     
       <td>{{x.Name}} </td> 
        <td>{{x.DT}}</td> 
        <td>{{x.Qualification}}</td> 
        </tr> 
      </tbody> 
     </table>  
</div> 

app.js：

var wc = angular.module('wc', []); 
wc.config(function ($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise('/login'); 
$stateProvider 
     .state('login', { 
      url: '/login', 
      templateUrl: 'views/login.html', 
      controller: 'LoginCtrl' 
     }) 
.state('tab', { 
    url: '/tab1', 
    templateUrl: 'views/tab.html' 
}); 
}); 

wc.controller('LoginCtrl', function ($scope,$http, $location) { 
$scope.submit = function() { 
    $http.get("URL-PartAame=" + $scope.person.firstName + "&Password=" + $scope.person.pswd) 
     .success(function (data) { 
//how to get the id from above url and display data based on condition// 
      $scope.tableData = data; 
      console.log(data) 
      $location.path('/tab1'); 
     }) 
     .error(function (response, status, headers, config) { }); 
} 
}); 
wc.controller('SampleController', function ($scope, $http, $modal) { 
    $http.get("UrlA-UserId="returnedId) 
    .success(function (response) { 
     $scope.tableContent = response.Table; 
    }); 
}; 

これはサービスや工場を使って解決できると理解しましたが、ここでsubmit（）と一緒にサービスを呼び出す方法はありますか？これが正しい方法でない場合は、それを行う別の方法を提案してください。前もって感謝します！！

Answer 1

$state.goおよび$stateParamsサービスを使用します。あなたは、URLの状態で$ stateParamsサービスに含まれるidプロパティを追加必要

wc.controller('LoginCtrl', function ($scope,$http, $location, $state) { 
$scope.submit = function() { 
    $http.get("URL-PartAame=" + $scope.person.firstName + "&Password=" + $scope.person.pswd) 
     .success(function (data) { 
//how to get the id from above url and display data based on condition// 
      $scope.tableData = data; 
      console.log(data) 

      $state.go('tab', {id: the_necesarry_id}); 
      //$location.path('/tab1'); 
     }) 
     .error(function (response, status, headers, config) { }); 
} 
}); 


wc.controller('SampleController', function ($scope, $http, $modal, $stateParams) { 
    var returnedId = $stateParams.id; 
    $http.get("UrlA-UserId="returnedId) 
    .success(function (response) { 
     $scope.tableContent = response.Table; 
    }); 
}; 

注意してください。

.state('tab', { 
    url: '/tab1/:id', 
    templateUrl: 'views/tab.html' 
});