2017-02-17 2 views
1

Я пытаюсь изучить angularjs.I не хочу делиться данными между двумя контроллерами двух разных страниц. После того, как googling узнал об услугах и создал одну услугу. С одной страницы я могу позвонить в службу отдыха и получить данные. После того, как я попытаюсь перенаправить на другую страницу. URL меняется, но страница не загружается. Застрял здесь. Пожалуйста, найдите код ниже. Кто-нибудь может помочь мне, где я ошибаюсь?Angular не может загрузить изображение после изменения 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 или 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' может указывать на неправильное расположение.

И вы готовы, перезагрузите страницу и счастливое кодирование.

Смежные вопросы