AngularJS 的自定义服务 (五)

chenjiaquan4321

于 2019-08-31 00:41:00 发布

阅读量131

点赞数

原文链接：https://my.oschina.net/u/4198293/blog/3100088

版权

AngularJS 允许我们自定服务，它类似于跨控制器的“全局变量”，为控制器之间的数据传递提供了可能。

1.使用 `value` 可以自定义服务，代码如下




    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>


    <div ng-controller="inputController">
        <input type="text" value="" ng-model="inputText">
        <button ng-click="save(inputText)">保存</button>
    </div>

    <div ng-controller="showController">
        <p>{{ showMsg }}</p>
        <button ng-click="show()">显示</button>
    </div>

    <script src="js/libs/angular.js"></script>

    <script>
        var app = angular.module("app", []);

        app.value("myService", {});

        app.controller("inputController", ["$scope", "myService", function ($scope, myService) {
            $scope.save = function (inputText) {
                myService.msg = inputText;
            }
        }]);

        app.controller("showController", ["$scope", "myService", function ($scope, myService) {
            $scope.show = function () {
                $scope.showMsg = myService.msg;
            }
        }]);
    </script>

使用 `app.value("myService", {});` 自定义名为 “myService” 的服务

效果图如图，在`input`中输入内容后点击保存，然后点击显示，就可以看到数据同步到了另一个控制器

2.使用 `app.constant("myService", {});` 定义了一个 ‘constant’ ，特点与 “value”区别。只是定义的时候只生效第一次定义的数据，重复定义无效。但是在注入后，是可以修改内容的。




    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>


    <div ng-controller="inputController">
        <input type="text" value="" ng-model="inputText">
        <button ng-click="save(inputText)">保存</button>
    </div>


    <script src="js/libs/angular.js"></script>

    <script>
        var app = angular.module("app", []);

        app.constant("myService",
            {
                msg : "123"
            });

        app.constant("myService",
            {
                msg: "333"
            });
        app.controller("inputController", ["$scope", "myService", function ($scope, myService) {
            $scope.save = function (inputText) {
                console.log(inputText);
            }
        }]);


    </script>

在上述中重复定义了两次 “myService”，但是只有首次定义的才会生效

app.constant("myService",
            {
                msg : "123"
            });

app.constant("myService",
            {
                msg: "333"
            });

3.使用 `app.factory("myService", function () {});` 定义了一个 ‘factory’ 工厂，在方法中是可以执行初始化代码的，灵活性更高

 app.factory("myService", function () {
            var obj = {};
            obj.msg = "123";

            return obj;
        });

4.使用 service服务相当于本身已经构建了一个空白对象，在服务内部所有内容的操作均通过this.来完成

var app = angular.module('app', []);
	app.service('FrankService', function (){

		this.pname = 'frank';
		var secret = '这是一个小秘密';
		//特权函数
		this.setSecret = function (tempSecret){
			secret = tempSecret;
		}
		this.getSecret = function (){
			return secret;
		};
	});

	//controller1
	app.controller('controller1', ['$scope', function ($scope){
		$scope.msg = '';
		$scope.submit = function (tempMsg){
			console.log('controller1中的内容被保存到了全局变量中');
		};
	}]);

5.provider服务，描述：provider服务通过.provider()方法添加，并在第二个参数的函数内，通过this.$get = function (){...}的固定结构对服务内容进行扩充，特殊：provider服务只要被创建，就会直接添加到app当中，无论是否对controller进行注入，provider服务都会一直存在。其余四种自定义服务都不能做到这点。

app.provider('FrankService', function (){
		console.log('provider initialized');
		this.$get = function (){
			var obj = {};
			obj.pname = 'franky';
			return obj;
		}
	});