<!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)的更多相关文章

  1. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  2. angularJS 服务-$provide里factory、service方法

    当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化 ...

  3. ionic准备之angular基础——格式化数据以及过滤器(8)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ionic准备之angular基础——dom操作相关(6)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ionic准备之angular基础——模板引入(7)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ionic准备之angular基础——$watch,$apply,$timeout方法(5)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ionic准备之angular基础——run方法(4)

    可以看到整个angular.module对象具有以下各种属性和方法 <!DOCTYPE html> <html lang="en"> <head> ...

  8. ionic准备之angular基础——继承(3)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 深究AngularJS——自定义服务详解(factory、service、provider)

    前言 3种创建自定义服务的方式.  Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...

随机推荐

  1. 百度之星初赛(A)——T1

    小C的倍数问题 Problem Description 根据小学数学的知识,我们知道一个正整数x是3的倍数的条件是x每一位加起来的和是3的倍数.反之,如果一个数每一位加起来是3的倍数,则这个数肯定是3 ...

  2. [ CodeVS冲杯之路 ] P3116

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/3116/ 基础的高精度加法,注意一下两个数长短不一和答案第一位的处理即可,当然也可以用压位的方法做 #include&l ...

  3. linux缺页异常处理--内核空间【转】

    转自:http://blog.csdn.net/vanbreaker/article/details/7867720 版权声明:本文为博主原创文章,未经博主允许不得转载. 缺页异常被触发通常有两种情况 ...

  4. 菜单栏选中时CSS3过渡效果

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 未点击时: 点击后: HTML代码: <ul> <li class="active">菜单1 ...

  5. mybatis的模糊查询格式

    mybatis的模糊查询格式: <select id="xxx" parameterType="com.model.xxx" resultMap=&quo ...

  6. Java异常throws与throw的区别

    throws关键字通常被应用在声明方法时,用来指定可能抛出的异常.多个异常可以使用逗号隔开.当在主函数中调用该方法时,如果发生异常,就会将异常抛给指定异常对象.谁调用谁处理: 抛出异常throws: ...

  7. Cookies/Session机制详解

    # 转载自:https://blog.csdn.net/fangaoxin/article/details/6952954/ 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话 ...

  8. 用RegisterHotKey注册系统热键

    函数功能:该函数定义一个系统范围的热键. 函数原型:BOOL RegisterHotKey(HWND hWnd,int id,UINT fsModifiers,UINT vk): 参数: hWnd:接 ...

  9. JS基础用法-向数组指定位置插入对象

    在做省市区三级联动的时候,需要在省市区默认位置放上请选择字样. 由于后台的API接口返回的没有请选择字样,那么就需要给返回的数组手动增加请选择 代码如下 // 原来的数组 var array = [& ...

  10. json model 互转

    1.json转model TestModel tm = new TestModel();JavaScriptSerializer js = new JavaScriptSerializer();tm ...