2017-02-17 9 views
1

2つの異なるページの2つのコントローラ間でデータを共有することはできません。グーグルがサービスについて知りに来て、1つのサービスを作成した後。 1ページから、私は休憩サービスを呼び出してデータを取得することができます。私は別のページにリダイレクトしようとしています。 URLは変更されていますが、ページはロードされていません。ここにはまった。以下のコードを見つけてください。誰でも私が間違っているところで私を助けることができますか?URLが変更された後に角が表示されません。

Data.HTMLに

<!DOCTYPE html> 
<html> 
<head> 
<base href="/"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script> 


    <script src="app.js"></script> 
<script src="usercontroller.js"></script> 
    <script src="userservice.js"></script> 

</head> 

<body ng-app="myApp"> 

<div ng-controller="UserController" > 
<form> 
    <input type="text" name="Name" ng-model="user.userName"> Name <br/> 
    <input type="text" name="password" ng-model="user.password"> Password <br/> 
     <button type="submit" ng-click="getUser(user)" >Submit</button> 
    </form> 

data2.html

<!DOCTYPE html> 
<html> 
<head> 
<base href="/"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script> 
    <script src="app.js"></script> 
<script src="usercontroller.js"></script> 
    <script src="userservice.js"></script> 

</head> 

<body> 
<div ng-controller="UserController2" > 
<form> 
    <input type="text" name="Name" ng-model="user.userName"> Name <br/> 
    <input type="text" name="password" ng-model="user.password"> Password <br/> 
     <button type="submit" ng-click="shareUser()" >Submit</button> 
</form> 
</div> 

app.js 


var App = angular.module('myApp',['ngRoute','ngResource']); 


App.config(['$routeProvider', 
    function (
    $routeProvider 
) { 
     $routeProvider. 
      when('/home', { 
       templateUrl: 'data.html', 
      controller: 'UserController' 
      }). 
      when('/welcome', { 
      templateUrl: '/data2.html', 
      controller: 'UserController2' 
      }). 
      otherwise({ 
       redirectTo: '/home' 
      }); 
}]); 

    usercontroller.js 


App.controller('UserController', ['$scope', 'UserService', '$window',  function($scope, UserService,$window,$location) { 
    alert("inside user controller"); 
    var self = this; 
    $scope.user={}; 
    $scope.user.userName="murali"; 
    $scope.user.password="murali123"; 

    $scope.getUser = function(user){ 
    alert("inside function"); 
     UserService.getUser(user).then(function(data){ 
     alert("data::"+JSON.stringify(data.userName)); 
    $window.location.href ='/welcome'; 
}); 
     }; 

}]); 

    App.controller('UserController2', ['$scope', 'UserService', function($scope, UserService) { 
    alert("inside user controller"); 

    $scope.user={}; 


$scope.findUser = function(){ 
    alert("inside function"); 
     $scope.user = UserService.findUser(); 
     alert("userName::"+$scope.user.userName); 

     }; 

}]); 

userservice.js 

    App.factory('UserService', ['$http', '$q', function($http, $q){ 
    var user = {}; 
    return { 

    getUser : function(user){ 
       return $http.post('http://localhost:8080/user/login', angular.toJson(user)) 
         .then(
           function(response){ 
            alert(JSON.stringify(response.data)); 
            user=response.data; 
            return response.data; 
           }, 
           function(errResponse){ 
            console.error('Error while getting response'); 
            return $q.reject(errResponse); 
           } 
         ); 
     }, 


     shareUser : function(){ 
      return user; 
     } 


     }; 
}]); 

答えて

0

ページ全体がリロードされ、サービスが0から作成された場合、cookieまたはに保存しない限り、データは保存されません。しかし、私はあなたがangular-routeを使用しているのを見ているので、あなたはまだそれを完了することができます。

最初に、angular-routeを使用する場合、ビューは完全なhtmlドキュメントでなくてもかまいません。例:

のindex.htmlが

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script> 
    <script src="app.js"></script> 
    <script src="usercontroller.js"></script> 
    <script src="userservice.js"></script> 
</head> 

<body> 
    <div ng-app="myApp"> 
     <ng-view></ng-view> <!-- Required by angular-route --> 
    </div> 
</body> 
</html> 

<ng-view></ng-view>要素に注意してください、それはangular-routeによって必要とビューがロードされる場所です。 data2.htmlに私はUserController2としてng-click="findUser()"ng-click="shareUser()"を変更したこと

Data.HTMLに

<form> 
    <input type="text" name="Name" ng-model="user.userName"> Name <br/> 
    <input type="text" name="password" ng-model="user.password"> Password <br/> 
    <button type="submit" ng-click="getUser(user)" >Submit</button> 
</form> 

data2.html

<form> 
    <input type="text" name="Name" ng-model="user.userName"> Name <br/> 
    <input type="text" name="password" ng-model="user.password"> Password <br/> 
    <button type="submit" ng-click="findUser()" >Submit</button> 
</form> 

shareUser機能はありません。

さて、UserController代わりにwindow.location.href ='/welcome';使用$location.path('/welcome');を使用して、これはあなたが、angular-routeは魔法を行いますページ全体をリロードせずにナビゲートするために使用するために必要なものです。依存サービスとして$locationサービスを追加する必要があります。 UserController2

UserServicefindUser機能を持っていない、と私はshareUserはあなたが使用しようとしているものだと思うので、UserService.shareUser();UserService.findUser();を変更します。

また、$routeProviderの設定をもう一度見て、'/data2.html'が間違った場所を指している可能性があります。

準備が整ったので、ページを再ロードして、ハッピーコーディングしてください。

関連する問題