angular的自定义五种服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.min.js"></script>
     <!--factory服务-->
 <script>
        var myapp=angular.module("myapp",[]);
        myapp.factory("User",function () {
            var user={
                id:"6",
                name:"Mary",
                Email:"mary@bawei.com"
            };
            console.log(user.name);
            var _getUser=function () {
                return user;
            };
            console.log(user);
            var _setUser=function (id,name,email) {
                user.id=id;
                user.name=name;
                user.Email=email;
            };
            return {
                getUser:_getUser,
                setUser:_setUser

            }
            console.log(getUser);
        });
        myapp.controller("myctrl",function($scope,User){
            console.log(User.getUser());
            $scope.user=User.getUser();
            $scope.saveUser=function(){
                User.setUser($scope.id,$scope.name,$scope.email);
            }
        });
      </script>
    
    <!--service服务-->
<script>
    var myapp=angular.module("myapp",[]);
    myapp.service("User",function () {
        var user={
            id:"6",
            name:"Mary",
            email:"mary@bawei.com"
        };
       this.getUser=function () {
            return user;
        };
        this.setUser=function (id,name,email) {
            user.id=id;
            user.name=name;
            user.email=email;
        };

    });
    myapp.controller("myctrl",function ($scope,User) {
        $scope.user=User.getUser();
        $scope.saveUser=function(){
            User.setUser($scope.id,$scope.name,$scope.email);
        }
    });
</script>

 <!--provider服务-->
<script>
    var myapp=angular.module("myapp",[]);
    myapp.provider("User",function () {
        var user={
            id:"6",
            name:"Mary",
            Email:"mary@bawei.com"
        };
        console.log(user.name);
        var _getUser=function () {
            return user;
        };
        console.log(user);
        var _setUser=function (id,name,email) {
            user.id=id;
            user.name=name;
            user.Email=email;
        };
        this.$get=function () {
            return {
                getUser:_getUser,
                setUser:_setUser

            }
            console.log(getUser);
        };


    });
    myapp.controller("myctrl",function($scope,User){
        console.log(User.getUser());
        $scope.user=User.getUser();
        $scope.saveUser=function(){
            User.setUser($scope.id,$scope.name,$scope.email);
        }
    });
</script>
<!--value服务-->

<script>
    var myapp=angular.module("myapp",[]);
    //value
    myapp.value("apikey","123123111123");
   
    myapp.controller("myctrl",function ($scope,apikey) {
     $scope.a=apikey;
     $scope.contanst=aaa;
    });
</script>

<!--contant服务-->
<script>
    var myapp=angular.module("myapp",[]);
    
    //constant
    myapp.constant("aaa","34534534445");
    myapp.controller("myctrl",function ($scope,aaa) {
     $scope.a=apikey;
     $scope.contanst=aaa;
    });
</script>




 </head><body ng-app="myapp" ng-controller="myctrl"><ul> <li>{{user.id}}</li> <li>{{user.name}}</li> <li>{{user.Email}}</li></ul><div> id:<input type="text" ng-model="id"><br/> name:<input type="text" ng-model="name"><br/> email:<input type="text" ng-model="email"><br/> <button ng-click="saveUser()">按钮</button>
//value和contant
//<p>value值:{{a}}</p>
//<p>constant值:{{contanst}}</p>
 </div></body></html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值