Question

我是angularJS的新手，我正在浏览AngularJS服务教程。我明白服务是AngularJS中的Singleton。现在我的意图是我将为Service设置一个值，该值应该可以在任何地方访问。

我在一个页面中创建了一个服务，并从一个Controller中设置了值。现在我在另一个页面中访问了此服务。我收到以下错误。

未捕获错误：[$ injector：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>

Answer 1

Angular是一个单页面应用程序框架，你的两个页面是两个不同的角度应用程序和服务（和其他资源）不能在它们之间共享。

您可以使用路线创建多视图应用程序。请查看angular tutorials

Answer 2

当页面重新加载时，例如，从第1页重新加载到第2页，一切都会重置。如果将单例值注入当前页面加载的控制器中，则单例值将保持不变。最常见的方法是使用ng-view / Routing。在这种情况下，您可以创建html，body等的骨架页面，并删除page1和page2之间不同的内容。将这些差异放入.html＆＃34; partial＆＃34;文件，然后使用ng-view / Routing根据URL状态加载每个部分，它将使用相同的服务单例。

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

Answer 3

Angular服务只是javascript对象。它存储在角度以及模块，控制器，指令等内部。在简单的情况下，您的应用程序是＆＃34;单页＆＃34; （但可能非常广泛），这意味着你有index.html，其中包括angular.js和你的自定义组件。

当人们谈论角度的观点和页面时，它们通常意味着页面的一部分，而不是真实的页面＆＃39;像index.html /＃home，index.html /＃view1，...（这个网址可能看起来像/ home，/ view1在html5模式下） - 但是如果您检查任何此类网页的html源代码，您会看到它是一样的。您可以说角度单例是每个角度载荷创建一次的对象。

当您更改真实的浏览器页面时，浏览器将丢弃所有js对象：angular本身以及您的工厂等。

Answer 4

如果您只是使用值在整个应用中共享，则应使用类型服务值：

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

AngularJS单件服务设置值

4 个答案: