您的位置：首页 > Web前端 > AngularJS

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

2017-10-18 14:06 691 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航