首页 > 代码库 > AngularJs学习笔记5——自定义服务

AngularJs学习笔记5——自定义服务

2024-08-24 21:03:40   223人阅读

前面整理了AngularJs双向数据绑定和自定义指令的相关内容，从手册上看也知道，ng部分还包括过滤器和函数，以及服务等。

　　过滤器：filter，就是对数据进行格式化，注意管道格式，例如：　　　　

{{表达式 | number/currency/data/orderBy :  " 相应的格式或表达式 "}}

　　函数：function，应该不用介绍了。这里需要注意的是forEach函数的形参顺序，基本格式如下：

1 var obj={name:"fanfan",age:"20",gender:"female"};
2 angular.forEach(obj,function(value,key){
3     console.log(key+":"+value);});
4 );

　　服务：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）。

 1 app.run(function($http){
 2         $http.defaults.headers.post = {‘Content-Type‘:‘application/x-www-form-urlencoded‘};//post方法需要的请求头设置
 3     });
 4 app.controller(‘fanCtrl‘, function ($scope,$http) {
 5 //       $http的get方法
 6 //        $http.get(‘data/server.php‘).success(function(data){
 7 //            console.log(data);
 8 //            $scope.list=data;
 9 //        })
10 varobj={name:‘Jerry‘,age:20};
11 console.log($.param(obj));
12         $scope.add=function(){
13             $http.post(‘data/server2.php‘, $.param(obj)).success(function(data){
14 console.log(data);
15                 $scope.list=data;
16             })
17         }
18     })

　　自定义服务：

　　1.factory 

 1 app.factory(‘服务名称’,function(){
 2     return {
 3          funcName:function(){}
 4 　　}
 5});
 6app.controller(‘myCtrl’,function($scope,服务器名称){
 7 　　服务器名称.funcName;
 8 });

　　2.service    

1 app.service(‘服务器名称’,function(){
2          this.变量名=值；
3          this.方法名=function(){};
4 })
5 app.controller(‘myCtrl’,function($scope,服务器名称){
6     服务器名称.funcName;
7 });

    factory和service的区别就是：factory里是普通的function，而service里是构造函数，在Angular中，调用service会用new关键字实例一个服务，而调用factory就是调用普通的function，所有factory可以返回任何的值，而service可以不返回。

　　以上就是自定义服务的两种方法。还有几种常量定义的服务方法。constant/value  à创建的服务器返回一个常量。我们自定义的服务在依赖注入里再细说怎么使用。晚安

AngularJs学习笔记5——自定义服务


联系
我们