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;
		}
	});

總結

1."value"可以建立跨控制器的訪問物件，"constant"可以建立的時候，不背其他人所覆蓋和篡改， "factory"可以在初始化的時候執行特殊程式碼 。

2."service" 和 "provider" 區別：provider需要通過"this.$get" 來設定。service需要在使用的時候才初始化，提高性功能。但是provider無論頁面中是否有使用，都會被初始化。