angularjs1-6，自定义服务

最新推荐文章于 2024-11-13 01:18:00 发布

weixin_34345753

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量85

点赞数

文章标签： javascript ViewUI

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

</head>
当你初试Angular 时，很自然地就会往controller 和scope 里堆满不必要的逻辑。一定要早点意识到，
controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在service 
里。很多人问道，关于如何在controller 该干的事。出于内存性能的考虑，controller 只在需要
的时候才会初始化，一旦不需要就会被抛弃。因此，每次当你切换或刷新页面的时候，Angular 会清空当前的
controller。与此同时，service可以用来永久保存应用的数据，并且这些数据可以在不同的controller之间使用。
Angular 提供了3种方法来创建并注册我们自己的服务。1.Provider2.Factory3.Service
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
    var m1 = angular.module('myApp',[],function($provide){//通过angular.module的第三个参数配置服务
        $provide.provider('providerServices01',function(){//providerServices01是服务的名称，第二个参数是函数，自定义的服务。
            this.$get=function(){
                return {
                    message:'this is providerServices01'
                }
            }
        })
    });

    console.log(m1);
    m1.controller('firstController',['$scope','providerServices01',function($scope,providerServices01){//在controller中使用服务
        console.log(providerServices01);
        $scope.name='张三';
    }]);
</script>
</body>
</html>

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

</head>

<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}

</div>
<script>
    var m1 = angular.module('myApp',[]);//module.config配置服务
    m1.config(function($provide){
        $provide.provider('providerServices01',function(){
            this.$get=function(){//服务的方法
                return {
                    message:'this is providerServices01'
                }
            }
        });

        $provide.provider('providerServices02',function(){
            this.$get=function(){
                var _name='';
                var service={};
                service.setName=function(name){
                    _name=name;
                }
                service.getName=function(){
                   return _name;
                }
                return service;
            }
        });
    })
    console.log(m1);

    m1.controller('firstController',['$scope','providerServices01','providerServices02',function($scope,providerServices01,providerServices02){
        console.log(providerServices01);
        providerServices02.setName('李四1111');
        $scope.name= providerServices02.getName();
        console.log( providerServices02);
    }]);

</script>
</body>
</html>

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

</head>
//自定义服务
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
    var m1 = angular.module('myApp',[],function($provide){
        $provide.provider('providerServices01',function(){
            this.$get=function(){//需要get
                    return 'this is providerServices01';
            }
        });
        $provide.factory('factoryServices01',function(){
                return {//不需要$get
                    message:'this is factoryServices01'
                }
        });
        $provide.factory('factoryServices02',function(){
                return 'this is factoryServices01  text';
        });
        $provide.service('serviceServices01',function(){
            return {
                message:'this is serviceServices01'
            }
        })
    });
    console.log(m1);

    m1.controller('firstController',['$scope','providerServices01','factoryServices01','factoryServices02','serviceServices01',function($scope,providerServices01,factoryServices01,factoryServices02,serviceServices01){
        console.log(providerServices01);
        console.log(factoryServices01);
        console.log(factoryServices02);
        console.log(serviceServices01);
        $scope.name='张三';
    }]);
</script>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
    var m1 = angular.module('myApp',[]);
    m1.provider('providerServices01',function(){
        this.$get=function(){
            return {
                message:'this is providerServices01'
            }
        }
    });
    m1.service('serviceServices01',function(){
        return {
            message:'this is serviceServices01'
        }
    })
    console.log(m1);
    m1.controller('firstController',['$scope','providerServices01','serviceServices01',function($scope,providerServices01,serviceServices01){
        console.log(providerServices01);
        console.log(serviceServices01);
        $scope.name='张三';
    }]);
</script>
</body>
</html>