angularjs 自定义服务

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module(‘myApp‘,[]);

//自定义服务
m1.factory(‘myService‘,function(){//服务的名字，回调函数（跟controller语法一样，可以是数组）
    return {
        name : ‘hello‘,
        show : function(){
            return this.name + ‘:angular‘;
        }
    };
});
m1.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){//使用myService服务（要形参传进去）
    console.log(myService.show());
}]);

m1.factory(‘myRandomNum‘,function(){
    return function(num1,num2){
        return Math.random()*(num2 - num1) + num1;
    };
});
m1.controller(‘Aaa‘,[‘$scope‘,‘myRandomNum‘,function($scope,myRandomNum){
    console.log( myRandomNum(-3,6) );
}]);

m1.factory(‘myService‘,function(){
    return {
        name : ‘hello‘,
        show : function(){
            return this.name + ‘:angular‘;
        }
    };
});

m1.provider(‘myService‘,function(){
    return {
        name : ‘hello‘,
        $get : function(){
            return {
                name : this.name,
                show : function(){
                    return this.name + ‘:angular‘;
                }
            };
        }
    };
});

m1.config([‘myServiceProvider‘,function(myServiceProvider){
    console.log(myServiceProvider);
    myServiceProvider.name = ‘hi‘;
}]);

m1.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){
    console.log(myService.show());
}]);

m1.provider(‘myRandomNum‘,function(){
    return {
        bolInt : false,
        int : function(argBol){
            if(argBol){
                this.bolInt = true;
            }
            else{
                this.bolInt = false;
            }
        },
        $get : function(){
            var This = this;
            return function(num1,num2){
                return This.bolInt ? Math.round(Math.random()*(num2 - num1)) + num1 : Math.random()*(num2 - num1) + num1;
            };
        }
    };
});

m1.config([‘myRandomNumProvider‘,function(myRandomNumProvider){
    myRandomNumProvider.int(false);
}]);

m1.controller(‘Aaa‘,[‘$scope‘,‘myRandomNum‘,function($scope,myRandomNum){
    console.log( myRandomNum(-3,6) );
}]);

</script>
</head>

<body>
<div ng-controller="Aaa">

</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module(‘module1‘,[]);
m1.factory(‘myService‘,function(){
    return {
        name : ‘hello‘,
        show : function(){
            return this.name + ‘:angular‘;
        }
    };
});

var m2 = angular.module(‘myApp‘,[‘module1‘]);
m2.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){
    console.log(myService.show());
}]);

</script>
</head>

<body>
<div ng-controller="Aaa">

</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="service.js"></script>
<script>

var m2 = angular.module(‘myApp‘,[‘module1‘]);

m2.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){

    console.log(myService.show());

}]);

</script>
</head>

<body>
<div ng-controller="Aaa">

</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="service.js"></script>
<script>

var m2 = angular.module(‘myApp‘,[‘module1‘]);

m1.config([‘myServiceProvider‘,function(myServiceProvider){

    myServiceProvider.name = ‘hi‘;

}]);

m2.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){

    console.log(myService.show());

}]);

</script>
</head>

<body>
<div ng-controller="Aaa">

</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module(‘myApp‘,[]);
m1.service(‘myService‘,FnService);//FnService是回调函数（也可以使数组[]），跟controller语法一样，
function FnService(){
    this.name = ‘hello‘;
}
FnService.prototype.age = 20;

m1.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){
    console.log(myService.name);
    console.log(myService.age);
}]);

var m1 = angular.module(‘myApp‘,[]);

m1.constant(‘myService‘,‘hello angular‘);
//m1.value(‘myService‘,‘hello angular‘);
m1.config([‘myService‘,function(myService){
    console.log(myService);
}]);

m1.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){

    console.log(myService);

}]);

</script>
</head>

<body>
<div ng-controller="Aaa">

</div>
</body>
</html>

时间： 2025-01-06 07:29:36

angularjs 自定义服务的相关文章

Angularjs 自定义服务 provide 里 provider 方法以及 factory、 service 方法以及 provider 供应商的概念

Angularjs 自定义服务 provide 里 provider 方法以及factory. service 方法以及 provider 供应商的概念学习要点:1. Angularjs 中的 provider 方法2. Angularjs 中的 factory 方法3. Angularjs 中的 service 方法4. provider 供应商的概念5. 研究 ionic 代码中的 services 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆

AngularJS 自定义服务、指令

参考链接:http://www.111cn.net/wy/js-ajax/90977.htm AngularJS 注册服务 AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, AngularJS提供了一个可以依赖注入的方法.我们可以将逻辑处理封装到Service中,需要调用只需要引入对应的Service即可. AngularJS 自定义指令(个人感觉像React的编程思想) 在前端

angularJs自定义服务（实现签名和加密）

写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zhihu.com/question/25539382) 对base64.md5.sha1加密算法简单解释: 1.base64是可逆的.对称的加密算法:base64具有64个基本字符组成的基本字符集 base64加密原理: a.base64以3个字节为一组,而一个字节占8个位(bit) b.再把24bi

深究AngularJS——自定义服务详解(factory、service、provider)

前言 3种创建自定义服务的方式. Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴. dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的. service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容器),以

angularJs自定义服务

在AngularJS中,系统内置的服务都是以$开头,所以我们的自定义服务尽量避免以$开头.自定义服务的方式有如下几种: 使用Module的provider方法使用Module的factory方法使用Module的service方法使用provider方法 app.provider('myProvider', function () { this.$get = function () { //do somthing }; }); 通过provider方法创建的服务一定要包含$get方法,pr

angularJs 自定义服务 provide 与 factory 的区别

<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="angular.min.js" ></script> <script type="t

AngularJS——自定义服务详解(factory、service、provider)

1. factory方式创建的服务,作用就是返回一个有属性有方法的对象.相当于:var f = myFactory(); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l

angularJS自定义服务的几种方式

在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value 使用形式的不同: 1)factory以返回对象的形式定义服务: myapp.factory('factorySer',[function() { return { getName: function () { return 'your name is tomHason-factory'; } } }]) 2)service是使用new关键字实例化,所以直接使用this

angularJS——自定义服务provider之$get

可以认为provider有三个部分: 第一部分是私有变量和私有函数,这些变量和函数会在以后被修改. 第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改.注意,这些变量和函数一定要添加到this上面才行. 第三部分是在控制器里可以访问的变量和函数,通过$get函数返回. 当使用 provider创建服务的时候,唯一可以让控制器访问的属性和方法是在$get()函数里返回的属性和方法. [参考资料:http://sanwen8.cn/p/159AEt2.