angularJS自定义服务

1. 自定义服务value

说明

value自定义服务常用全局变量

代码列子

<!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1'>
	<input type="text" ng-model='msg'>
	<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2'>
	<p ng-bind='showMsg'></p>
	<button ng-click='download()'>获取</button>
</div>

</body>
<script>

var app = angular.module('app', []);
app.value('globalObj',{});

app.controller('mainController', ['$scope', function ($scope){
	$scope.mainControllerTitle = '自定义服务--value服务';
	
}]);
app.controller('controller1', ['$scope','globalObj',function($scope,globalObj){
	$scope.msg="";
	$scope.submit = function(tempMsg){
		globalObj.inputMsg = tempMsg;
	};
		
}]);
app.controller('controller2',['$scope','globalObj',function($scope,globalObj){
	$scope.showMsg = "";
	$scope.download = function(){
		$scope.showMsg = globalObj.inputMsg;
	}
}]);

2. 自定义服务constant

说明

constant 和value一样唯一不一样就是联支出重写

代码列子

<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2'>
	<p ng-bind='showMsg'></p>
	<button ng-click='download()'>获取</button>
</div>

</body>
<script>

var app = angular.module('app', []);
app.constant('globalObj',{
	pname : "1234"
});

app.constant('globalObj',{
	pname : "test123"
});

app.controller('mainController', ['$scope', function ($scope){
	$scope.mainControllerTitle = '自定义服务--value服务';
	
}]);
app.controller('controller2',['$scope','globalObj',function($scope,globalObj){
	$scope.showMsg = "";
	$scope.download = function(){
		$scope.showMsg = globalObj.pname;
	}
}]);

3. 自定义服务factory

说明

描述：factory服务是通过.factory()方法去创建一个object结构并直接返回的操作。
说明：乍一看返回一个对象，和直接value式提供一个对象并无区别
但是通过函数返回一个对象，那么这个对象的所有结构就都是在函数内完成
而函数内是可以对对象进行任意的操作和扩充的
但是在value式固定结构中却无法做到

代码列子

    <!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1' style="width:300px; height:100px; border:1px solid black;">
	<input type="text" ng-model='msg'>
	<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2' style="width:300px; height:100px; border:1px solid black;">
	<p ng-bind='showMsg'></p>
	<button ng-click='download()'>获取</button>
</div>
<script src="../../script/angular/angular.js"></script>
<script>
	var app = angular.module('app', []);
	app.factory('factoryService',function(){
		var obj = {};
		obj.name = 'huxiaolong';
		return obj;
	});
	
	app.controller('controller1', ['$scope', 'factoryService', function ($scope, factoryService){
		$scope.msg = '';
		$scope.submit = function(msg){
			factoryService.name = msg ;
		}
	}]);
	
	app.controller('controller2', ['$scope', 'factoryService', function ($scope, factoryService){
		$scope.showMsg = '';
		$scope.download = function (){
			$scope.showMsg = factoryService.name;
		}
	}]);
	

4. 自定义服务service

说明

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

代码列子

    <!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1' style="width:300px; height:100px; border:1px solid black;">
	<input type="text" ng-model='msg'>
	<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2' style="width:300px; height:100px; border:1px solid black;">
	<p ng-bind='showMsg'></p>
	<button ng-click='download()'>获取</button>
</div>

<script src="angular.js"></script>
<script>
	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中的内容被保存到了全局变量中');
		};
	}]);
	//controller2
	app.controller('controller2', ['$scope','FrankService', function ($scope, FrankService){
		$scope.showMsg = '';
		$scope.download = function (){
			console.log('controller2中从全局变量中读取具体内容');
			FrankService.setSecret('我饿了');
			console.log(FrankService.getSecret());
		};
	}]);

	

5. 自定义服务provider

说明

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

provider 和前面四种不一样在加载，前面4总使用当注入的时候才会使用， 而provider 开始加载的时候就执行暂用空间读取缓存用时间换空间

代码列子

<!-- controller1 向全局变量储存内容 -->
<div class="div1" ng-controller='controller1' style="width:300px; height:100px; border:1px solid black;">
	<input type="text" ng-model='msg'>
	<button ng-click='submit(msg)'>保存</button>
</div>
<!-- controller2 从全局变量获取内容 -->
<div class="div2" ng-controller='controller2' style="width:300px; height:100px; border:1px solid black;">
	<p ng-bind='showMsg'></p>
	<button ng-click='download()'>获取</button>
</div>

<script src="angular.js"></script>
<script>
	var app = angular.module('app', []);
	app.provider('FrankService', function (){
		console.log('provider initialized');
		this.$get = function (){
			var obj = {};
			obj.pname = 'franky';
			return obj;
		}
	});

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