zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    linux command line send email
    js的小随笔
    JavaScript的严格模式
    nodejs学习笔记<六>文件处理
    nodejs学习笔记<五>npm使用
    nodejs学习笔记<四>处理请求参数
    nodejs学习笔记<三>关于路由(url)
    nodejs学习笔记<一>安装及环境搭建
    转:HTTP 301 跳转和302跳转的区别
    前端代码新写法——Zen Coding
  • 原文地址:https://www.cnblogs.com/yaowen/p/5746941.html
Copyright © 2011-2022 走看看