自定义服务
2017-10-12 本文已影响0人
小草莓蹦蹦跳
-
自定义服务和自定义指令,自定义过滤器写法类似,一共有 三种关键字 定义服务
-
使用服务必须注入，使用原生的服务注入方式是"$" + 原生服务名称。而自定义服务方式是将服务名称直接注入
- 通过service关键字自定义服务
<body ng-app = "app" ng-controller = "wmxController">
<p>{{said}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
//使用自定义服务：先注入自定义服务wmxService
app.controller('wmxController',['$scope','wmxService',function ($scope,wmxService) {
//调用服务的方法
wmxService.say('我是调用后传递的参数');
//接受函数的返回值
$scope.said = wmxService.say('接受函数的返回值');
}]);
// 通过service关键字自定义服务
// 参数一：自定义服务的名称
// 参数二：回调的方法
// this代表当前作用域（wmxService的对象）
app.service('wmxService',function () {
//可传递参数，也可不传递参数
this.say = function (args) {
alert(args);
//也可以有返回值
return args;
}
})
</script>
</body>
- 通过factory关键字自定义服务1 (直接把函数返回出去)
<body ng-app = "app" ng-controller = "wmxController">
<p>{{data}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
//注入自定义服务
app.controller('wmxController',['$scope','wmxService',function ($scope,wmxService) {
//调用自定义服务的方法，并且使用它的返回值
$scope.data = wmxService('我是调用自定义服务后的数据');
}]);
//自定义服务：关键字factory
app.factory('wmxService',function () {
return function (args) {
alert('我是自定义服务的数据');
return args;
}
})
</script>
</body>
- 通过factory关键字自定义服务2 （返回一个函数名出去）
<body ng-app = "app" ng-controller = "wmxController">
<p>{{data}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
//注入自定义服务
app.controller('wmxController',['$scope','wmxService',function ($scope,wmxService) {
//调用自定义服务的方法，并且使用它的返回值
$scope.data = wmxService.myTimer('我是调用之后的数据');
}]);
//自定义服务：关键字factory
app.factory('wmxService',function () {
//无法直接返回该函数，所以巧妙的使用了下面的方法返回出去
function showDate(args) {
alert('返回自定义服务中的数据');
return args;
}
return{
//key:value形式返回（取两个别名）
myTimer:showDate
}
})
</script>
</body>
-
- 通过value关键字自定义服务
- 该服务的作用是使用 angular 定义常量
- 通过 const 定义的是常量，是不允许修改的
const wmx = 100;
//后面不能对wmx这个常量值进行修改
<body ng-app = "app" ng-controller = "wmxController">
<p>{{data}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
//注入自定义服务
app.controller('wmxController',['$scope','username',function ($scope,username) {
$scope.data = username;
}]);
//自定义服务：关键字factory
/**
* 相当于定义了 const username='wmx';
* username只能永远等于wmx,不能够修改
* 参数一：服务名称，同时也是常量，别名为username
* 参数二：常量值为wmx
*/
app.value('username','wmx');
</script>
</body>
