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

ionic准备之angular基础———服务provider 和 factory和service（9）

2016-03-28 14:02 716 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
<ul>
<li ng-repeat="item in name">{{item}}</li>
</ul>
</div>
</body>
<script src="angular/angular.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",[],function($provide){
/*创建服务factory*/
$provide.factory("myFactory",function(){
var server={};
server.getMessage=function(){
return "this is  a message";
}

return server;
});
/*用provider创建服务*/
$provide.provider("myprovider2",function(){

this.$get=function(){
var server={};
server.getMessage=function(){
return "this is provider2";
}

return server;
}

});
});

/*也可以再config中定义服务*/
app.config(function($provide){
/*自定义服务*/
$provide.provider("myProvider",function(){
this.$get=function(){

var server={};
server.getName=function(){
var name={
name:"tanxu",
nickName:"xuxu"
}

return name;
}
return server;
}

});
});

app.controller('firstController',function($scope,$filter,myProvider,myprovider2,myFactory){
//用provider
$scope.name=myProvider.getName();
console.log($scope.name);

$scope.name1=myprovider2.getMessage();

console.log($scope.name1);
//
//用factory
$scope.msg=myFactory.getMessage();
console.log($scope.msg);
});

</script>
</html>

我们可以再config中创建服务，或者在module中直接创建，利用provider创建需要this.get()匿名函数，而factory可以直接返回字符串或者对象，建议基于对象去返回。

那么这样会不会太乱，当然还有更好更直观的创建方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
<ul>
<li ng-repeat="item in name">{{item}}</li>
</ul>
</div>
</body>
<script src="angular/angular.js"></script>
<script src="service.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",['myService']);   //引入服务依赖

/*定义服务*/
app.service("service1",function(){
return {
message:"qwewe"
}
})

/*定义服务，用provider必须使用get方法*/
app.provider("provider1",function(){
this.$get=function(){
return {
message:"q34234324"
}
}

})

/*定义服务*/
app.factory("myfactory",function(){
return {
message:"myfactory"
}
})

/**/
app.controller('firstController',function($scope,service1,provider1,myfactory,getMessageFactory){
console.log(service1);
console.log(provider1);
console.log(myfactory);

/*引入外置文件的服务getMessageFactory*/
console.log(getMessageFactory.getMessage());
});

</script>
</html>

上面案例引入了一个外部的js，该js专用于定义各种服务

/**
* Created by Administrator on 2016/3/28.
*/
var service=angular.module('myService',[]);

service.service('getMessageFactory',function(){
var service={};
service.getMessage=function(){
return "这是外置文件的js服务";
}
return service;
})

service.service('getMessageFactory1',function(){
var service={};
service.getMessage=function(){
return "这是外置文件的js服务1";
}
return service;
})

service.service('getMessageFactory2',function(){
var service={};
service.getMessage=function(){
return "这是外置文件的js服务2";
}
return service;
})

在html中的mudule要记得引入依赖关系，引入依赖之前当然你要确保你的service.js已经引入进页面中来了　　

　　

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

标签：

相关文章推荐

新的分享

章节导航