<!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>
Angularjs自定义服务~使用Module的factory方法
最新推荐文章于 2018-10-31 13:21:00 发布