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是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...
随机推荐
- Struts2的类型转换机制
Struts2的类型转换机制 在基于HITP 协胆的Web 应用中,客户端〈浏览器〉和服务器之间传输的都是字符串形式的数据,换句话说,服务器接收到的用户数据只能是字符串或字符数组, 但在服务器端的Ja ...
- msvc/gcc:中用#pragma指令关闭特定警告(warning)
在使用一些第三方库或源码的时候,经常会遇到编译时产生warnings情况,这些warning不是我们自己的代码产生的,当然也不好去修改,但每次编译都显示一大堆与自己代码无关的警告也着实看着不爽,更麻烦 ...
- JQuery实现多个菜单的显示隐藏
(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 点击各个菜单显示/隐藏,以及点击灰色部分隐藏. 比如点击了第一个菜单,然后点击第二个菜单,第一个菜单会隐藏,再显示第二个菜单,不会叠加. ...
- 终于遇到了传说的ie 6 img 3px的bug
最近在做一个网站,基本上已经算完成,就开始完善细节部分了. IE6可能是微软最为YD 的一款浏览器了吧,至今还没有退出历史的舞台,尽管google都宣布不在支持它了. 因为该死的ie6,虽死但是牢牢地 ...
- array数据初始化
#include <iostream> int main() { ]={}; std::cout<<array[]<<]; } 试了试上面的代码发现,数组在用{}赋 ...
- [BZOJ4989][Usaco2017 Feb]Why Did the Cow Cross the Road 树状数组维护逆序对
4989: [Usaco2017 Feb]Why Did the Cow Cross the Road Time Limit: 10 Sec Memory Limit: 256 MBSubmit: ...
- asp.net如何更改默认的登陆帐号/密码:16aspx/16aspx
修改数据库,在DB_16aspx文件夹下面 sql server 2005+的数据库打开.
- Codeforces 938D Buy a Ticket (转化建图 + 最短路)
题目链接 Buy a Ticket 题意 给定一个无向图.对于每个$i$ $\in$ $[1, n]$, 求$min\left\{2d(i,j) + a_{j}\right\}$ 建立超级源点$ ...
- luogu P1041 传染病控制
题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染病,难以准确判别病毒携带 ...
- 六. 异常处理5.多重catch语句的使用
某些情况,由单个代码段可能引起多个异常.处理这种情况,你可以定义两个或更多的catch子句,每个子句捕获一种类型的异常.当异常被引发时,每一个catch子句被依次检查,第一个匹配异常类型的子句执行.当 ...