AngularJs学习笔记5——自定义服务
前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等。
过滤器:filter,就是对数据进行格式化,注意管道格式,例如:
{{表达式 | number/currency/data/orderBy : " 相应的格式或表达式 "}}
函数:function,应该不用介绍了。这里需要注意的是forEach函数的形参顺序,基本格式如下:
var obj={name:"fanfan",age:"20",gender:"female"};
angular.forEach(obj,function(value,key){
console.log(key+":"+value);});
);
服务:Angular services are singletons objects or functions that carry out specific tasks common to web apps.它是一个单例对象或函数,对外提供特定的功能。这也是我今天整理的重点。
内置服务:ng提供了很多内置的服务,我们可以直接使用。
1.$scope/$rootScope
首先我们要掌握的就是之前出现过的$scope,以及它的父级$rootScope。$scope/$rootScope都是ng内置的服务,服务的本质其实是一个对象
如何使用:在控制器所对应的方法中注入进来 function($scope,$rootScope)
$scope与$rootScope的关系/区别
$rootScope是在ng启动时就会初始化一个对象,id为1;
$scope是在调用控制器的方法时,注入过来的对象,id根据加载顺序向上递增,不同的控制器之间$scope数据时无法共享的,由于都是$rootScope的子元素,所以解决数据共享的问题,就是把数据放在$rootScope对象。实现控制器的嵌套,父元素中的模型数据是可以被子元素引用的。
2.$http服务
$http服务是AngularJS中的AJAX,其中$http中get和post方法(设置请求头app.run)的不同,数据序列化($.param)。
app.run(function($http){
$http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};//post方法需要的请求头设置
});
app.controller('fanCtrl', function ($scope,$http) {
// $http的get方法
// $http.get('data/server.php').success(function(data){
// console.log(data);
// $scope.list=data;
// })
varobj={name:'Jerry',age:20};
console.log($.param(obj));
$scope.add=function(){
$http.post('data/server2.php', $.param(obj)).success(function(data){
console.log(data);
$scope.list=data;
})
}
})
自定义服务:
1.factory
app.factory(‘服务名称’,function(){
return {
funcName:function(){}
}
});
6app.controller(‘myCtrl’,function($scope,服务器名称){
7 服务器名称.funcName;
8 });
2.service
app.service(‘服务器名称’,function(){
this.变量名=值;
this.方法名=function(){};
})
app.controller(‘myCtrl’,function($scope,服务器名称){
服务器名称.funcName;
});
factory和service的区别就是:factory里是普通的function,而service里是构造函数,在Angular中,调用service会用new关键字实例一个服务,而调用factory就是调用普通的function,所有factory可以返回任何的值,而service可以不返回。
以上就是自定义服务的两种方法。还有几种常量定义的服务方法。constant/value à创建的服务器返回一个常量。我们自定义的服务在依赖注入里再细说怎么使用。晚安
AngularJs学习笔记5——自定义服务的更多相关文章
- AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11
1.切换目录 git checkout step- npm start 2.效果图 效果图和step 10的没有什么差别,这里主要的改动都是代码,代码做了很多优化,这里效果图就不再贴出来了. 3.实现 ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
- AngularJs学习笔记--Creating Services
原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...
- AngularJs学习笔记--I18n/L10n
原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...
随机推荐
- 使程序能够引入.json文件, 为网站添加 MIME 映射
确认启用了 MIME 映射,或使用命令行工具 appcmd.exe 为网站添加 MIME 映射. 若要设置 MIME 类型,请在 IIS Express 安装目录中运行以下命令: appcmd set ...
- GDI+基础(2)
使用钢笔,画笔用来填充图形内部,钢笔则用来绘制带有一定宽度,样式和色彩的线条和曲线. 可以使用标准的pens类 <%@ Page ContentType="image/gif" ...
- linux下查看所有用户及所有用户组
groups 查看当前登录用户的组内成员groups gliethttp 查看gliethttp用户所在的组,以及组内成员whoami 查看当前登录用户名 /etc/group文件包含所有组/etc/ ...
- 【C++学习之路】派生类的构造函数(二)
二.有内嵌对象的派生类 1.一般来说,我们会这样定义构造函数 student( int i, string nam, int pid, string pnam, int sid) : person( ...
- vim编辑器命令
Vim介绍 vim(vimsual)是Linux/Unix系列OS中通用的全屏编辑器. vim分为两种状态,即命令状态和编辑状态,在命令状态下,所键入的字符系统均作为命令来处理,如:q代表退出,而编辑 ...
- Jenkins修改域认证,非域用户忘记密码处理
一.认证域地址修改 1. 编辑配置文件 vi $JENKINS_HOME/jenkins/config.xml 2.修改如下内容: <securityRealm class="huds ...
- eclipse在当前项目里面批量替换所有单词
ctrl+f里面只能单个文件用,要整个项目批量替换. 1. 先选中你要替换字符串, 2. 再菜单栏中找到Search→Text→Project,这样就会在整个项目中查找单词. 3. 然后在Search ...
- PHP扩展开发(5) - PHP常量的定义和读取
1. 定义 //定义PHP常量REGISTER_STRINGL_CONSTANT("SIMPLE_VERSION", PHP_SIMPLE_VERSION, sizeof(PH ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- 查看文件系统类型的Linux命令
不需挂载就能查看的命令: 1. file [root@localhost dev]# file -s /dev/sda1 /dev/sda1: Linux rev 1.0 ext4 filesy ...