2017-02-17 48 views
1

我想學習angularjs.I不想在兩個不同頁面的兩個控制器之間共享數據。谷歌搜索後才知道服務並創建了一項服務。從一個頁面我可以打電話給我的休息服務,並能夠獲得數據。在我嘗試重定向到不同的頁面之後。網址正在更改,但頁面未加載。卡在這裏。請找到下面的代碼。任何人都可以幫助我,我做錯了什麼?角度無法加載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創建,則不會保存數據,除非將其存儲在cookielocal/session storage中。但是我看到你正在使用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需要並且是其中的觀點將被加載。

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> 

注意,在data2.html我改變ng-click="shareUser()"ng-click="findUser()"UserController2沒有shareUser功能。現在

,在UserController而不是使用window.location.href ='/welcome';使用$location.path('/welcome');,這就是你需要使用導航無需重新加載整個頁面,angular-route會做的魔力。您將需要添加$location服務作爲依賴項。

UserController2,改變UserService.findUser();UserService.shareUser();因爲UserService沒有一個findUser功能,我想shareUser是你要使用的東西。

另外,請再次看看$routeProvider配置,'/data2.html'可能指向錯誤的位置。

而你準備好了,重新加載頁面和開心編碼。