ionic准备之angular基础———服务provider 和 factory和service（9）
<!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已经引入进页面中来了
ionic准备之angular基础———服务provider 和 factory和service（9）的更多相关文章
- angularjs中provider，factory，service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
- angularJS 服务-$provide里factory、service方法
当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化 ...
- ionic准备之angular基础——格式化数据以及过滤器（8）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ionic准备之angular基础——dom操作相关（6）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ionic准备之angular基础——模板引入（7）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ionic准备之angular基础——$watch,$apply,$timeout方法（5）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ionic准备之angular基础——run方法（4）
可以看到整个angular.module对象具有以下各种属性和方法 <!DOCTYPE html> <html lang="en"> <head> ...
- ionic准备之angular基础——继承（3）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深究AngularJS——自定义服务详解(factory、service、provider)
前言 3种创建自定义服务的方式. Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...
随机推荐
- sqlmap注入一般步骤
1. 找到注入点url2. sqlmap -u url -v 1--dbs 列出数据库或者 sqlmap -u url -v 1 --current-db 显示当前数据库3. sqlmap -u ur ...
- 配置wpa_supplicant调试wifi linux下命令行连接wifi
调试wpa_supplicant先读一下对应的README.txt文件.根据README.txt修改编译配置. wpa_supplicant需要打开以下开关进行编译CONFIG_DRIVER_NL80 ...
- SqlServer 2014安装指引
具体步骤看整理的Word文档 链接:https://pan.baidu.com/s/1zOhaFVpro2DNnJlJ6dbSEg 密码:lj4m 具体步这里不介绍了,这里记录下报错信息 这个是说系统 ...
- 牛客nowcoder Noip提高组第四场
https://www.nowcoder.com/acm/contest/175#question A-动态点分治 Description CJK 是一个喜欢数据结构的同学.一天他看到 BZOJ 40 ...
- 洛谷——2871[USACO07DEC]手链Charm Bracelet——01背包
题目描述 Bessie has gone to the mall's jewelry store and spies a charm bracelet. Of course, she'd like t ...
- js日常笔记
写在前面: 在工作中,有时候会遇到一些零零碎碎的小知识点,虽然这些网上都可以查询到,但还是想把一些自己不是很熟悉的当做笔记记录下来,方便以后查询. 1.按钮隐藏/显示/可用/不可用 $("# ...
- extjs combo中给Store插入一条数据
{ xtype: 'combo', columnWidth: .55, name: 'AQLLevel', store: Ext.create('Scripts.Code.Common.store.I ...
- ostu进行遥感图像的分割
城市地区道路网的简单的阈值分割.采用的是单ostu(最佳阈值分割)算法,废话少说,如果不太清楚该算法,请参考文献[1]中的图像分割这一章的介绍.程序直接运行的效果如下.
- [转] IplImage, CvMat, Mat 的关系
拼装小火车 的原文 IplImage, CvMat, Mat 的关系 opencv中常见的 与图像操作有关的数据容器有Mat,cvMat和IplImage,这三种类型都可以代表和显示图像,但是,Mat ...
- mybatis-mysql小优化
原文:http://blog.csdn.net/jinzhencs/article/details/51656548 1.查询某条记录是否存在 <!-- 查询s是否被创建过:Uuid,name, ...