Question

我正在尝试学习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;
        }


         };
 }]);

Answer 1

如果重定向整个页面重新加载并且服务是从0创建的，则不会保存任何数据，除非您将其存储在cookie或local/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'可能指向错误的位置。

你准备好了，重新加载页面并快乐编码。

URL更改后，Angular无法加载视图

1 个答案: