2016-01-11 2 views
0

Я новичок в angularJS, и я проходил обучение по AngularJS. Я понял, что услуги Singleton в AngularJS. Теперь мое намерение - . Я установил значение для Сервиса, и это значение должно иметь доступ в любом месте.AngularJS singleton service значение

Я создал службу на одной странице и установил значение с одного контроллера. Теперь я получил доступ к этой службе на другой странице. Я получаю ошибку ниже.

Uncaught Ошибка: [$ Инжектор: modulerr]

Я попытался код ниже.

page1.html

<html> 

<head> 
<title>Angular JS Services</title> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 
<body> 
    <h2>AngularJS Services</h2> 
    <div ng-app="myApp"> 
     <div ng-controller="FirstCtrl"> 
      Set name: <input type="text" ng-model="test"> 
      <!-- <button ng-click="next('page2.html')">next</button> --> 
      <button ng-click="next()">Set the value</button> 
     </div> 

      <div ng-controller="SecondCtrl">    
      <button ng-click="next()">Go to next page</button> 
     </div> 
    </div> 
    <script>   
     var myApp = angular.module('myApp', []);   
     myApp.service('HelloService', function() {   
      var value ='';   
      this.setValue = function(a) { 
       value = a ; 
      }; 

      this.getValue= function(){ 
       return value ; 
      } 

     });   
     myApp.controller('FirstCtrl', function($scope, HelloService) {   
      $scope.next= function() { 
       alert("Value "+$scope.test); 
       HelloService.setValue($scope.test); 
       $scope.answer = HelloService.getValue(); 
       alert($scope.answer); 
       }   
     });  

     myApp.controller('SecondCtrl', function($scope, HelloService,$window) {   
      $scope.next= function() {   
       $scope.newvalue = HelloService.getValue(); 
       alert($scope.newvalue); 
       $window.location.href = 'page2.html'; 
      }   
     }); 

    </script> 
</body> 
</html> 

page2.html

<html> 
<head> 
<title>Angular JS Services</title> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 
<body> 
    <h2>AngularJS Service test</h2> 
    <div ng-app="myApp"> 
     <div ng-controller="SecondCtrl"> 
      <button ng-click="retrieve()">Retrieve the value</button> 
     </div> 
    </div> 
    <script>   
     var myApp = angular.module('myApp', ['HelloService']); 
     myApp.controller('SecondCtrl', function($scope, HelloService) {   
      $scope.retrieve= function() { 
       alert("2nd page"); 
       $scope.newvalue = HelloService.getValue(); 
       alert($scope.newvalue); 
      } 
     });  
    </script> 
</body> 
</html> 

ответ

1

Угловая является одной рамки страницы приложения, ваши две страницы две разные угловые приложения и услуги (и другие ресурсы) не могут быть разделены между ними.

Вы можете создать приложение с несколькими видами просмотра, используя маршруты. пожалуйста, проверьте angular tutorials

0

Когда страница перезагружается, например, со страницы 1 на страницу 2, все сбрасывается. Значение singleton будет сохраняться, если вы введете его в контроллеры в текущую загрузку страницы. Наиболее распространенный способ сделать это - использовать ng-view/Routing. В этом случае вы создадите страницу скелета html, body и т. Д. И удалите содержимое, которое отличается между страницами1 и page2. Поместите эти различия в .html «частичные» файлы, а затем используйте ng-view/Routing для загрузки каждого частичного на основе состояния URL-адреса, и он будет использовать один и тот же сервисный синглтон.

https://docs.angularjs.org/api/ngRoute/directive/ngView

0

Угловое обслуживание только объекты JavaScript. Он хранится в угловом, а также в вашем модуле, контроллерах, директивах и т. Д. В простом случае ваше приложение является «одной страницей» (однако может быть вполне доступно), а это значит, что у вас есть index.html, где вы включаете угловые. js и ваши пользовательские компоненты.

Когда люди говорят о взглядах и страницах в угловом, они обычно означают «часть страницы», а не настоящие «страницы», такие как index.html/# home, index.html/# view1, ... (эти URL-адреса могут выглядите как/home,/view1 в режиме html5) - однако, если вы проверите html-источник любой такой страницы, вы увидите, что это то же самое. Вы можете сказать, что угловой синглтон - это объект, который создается один раз на угловую нагрузку.

При изменении страницы в реальном браузере, браузер будет отбрасывать все объекты JS: Угловой сам, а также ваши заводы и т.д.

0

Если вы просто использовать значение для обмена через приложение, вы должны использовать услуги типа значение:

angular.module('myValue') 
    .value('myShareValue', 123); 

, а затем ввести в приложение и контроллер модуля.

myApp = angular.module('myApp', ['myValue']); 
myApp.controller('myController', [ 
    '$scope', 'myShareValue', 
    function($scope, myShareValue){ 
     $scope.valueShare = myShareValue; 
    } 
]); 

Вы можете прочитать slides in spanish и увидеть различие между типами услуг угловых.Также это video