Angularjs自定义服务~使用Module的factory方法

最新推荐文章于 2024-05-15 19:31:45 发布

Dewey666

最新推荐文章于 2024-05-15 19:31:45 发布

阅读量2.1k

点赞数 1

分类专栏：效果初现文章标签： Angularjs自定义服务factor app.factory

本文链接：https://blog.csdn.net/IT666DHW/article/details/78272177

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Angularjs自定义服务~使用Module的factory方法</title>
      <!--  如同指令一样，系统内置的服务以$开头，自己定义一个服务。定义服务的方式有如下几种：
         · 使用Module的factory方法
         · 使用Module的service方法
         · 使用系统内置的$provide服务    
         
          1. 使用Module的factory方法：作用就是返回一个有属性有方法的对象
              第一步：通过module对象调用factory方法。第一个参数是自定义服务名称，第二个参数是一个匿名函数
              第二步：定义服务数据（对象或变量），通过var关键字定义的私有化变量要添加getter和setter方法，最后返回对象。
              第三步：注入到module的控制器中使用。 -->
      <script type="text/javascript" src="../js/angular.js" ></script>
      <script>
         var app = angular.module("myApp",[]);
         
         // （1）在当前应用程序app自定义服务：myUser   
         app.factory("myUser",function(){
            var user = {};     //（2）创建一个object类型的对象
            user.name = "玛尼";  //（3）定义user对象的属性
            var age;           //（4）定义一个私有变量
            
            // （5）调用setter方法，把自定义的私有变量通过匿名函数以传参的形式赋值给user对象，成为一个新属性
            user.setAge = function(newAge){
               age = newAge;
            };
            // （6）调用getter方法，返回赋好值后的user对象中的新age属性值
            user.getAge = function(newAge){
               return age;
            };
            
            return user;   //（7）最后返回新的user对象
         });
         
         //在控制器myCtrl的作用域中调用服务myUser中数据
         app.controller("myCtrl",function($scope,myUser){
            alert(myUser.name);
            //（8）设置age的数值
            myUser.setAge(18); 
            
            //（9）通过自定义服务调用age属性的值赋值给作用域中的age值，使作用域中的变量有值，方便下步操作
            $scope.age = myUser.getAge();
            $scope.name = myUser.name;
            alert("姓名："+myUser.name+"，年龄："+myUser.getAge());
            alert("姓名："+$scope.name+"，年龄："+$scope.age);
         });
      </script>
   </head>
   
   <body ng-app="myApp" ng-controller="myCtrl">
      <p>{{age}}</p>
      <p>{{name}}</p>
      <p>姓名：{{name}} 年龄：{{age}}</p>
   </body>
</html>

Dewey666

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angularjs自定义服务~使用Module的factory方法

html>html> head> meta charset="UTF-8"> title>Angularjs自定义服务~使用Module的factory方法title> <!-- 如同指令一样，系统内置的服务以$开头，自己定义一个服务。定义服务的方式有如下几种： · 使用Module的factory方法 · 使用Mo
复制链接

扫一扫