AngularJs学习笔记3-服务及过滤器

距离上次别博客有有一段时间了,因为最近公司和个人事情比较多,也因为学习新的知识所以耽搁了,也有人说Angularjs1.5没有人用了,没必要分享,我个人感觉既然开头了我就坚持把他写完,对一些还在使用或者维护项目的朋友能有一些帮助吧;

服务:服务提供能够在应用的整个生命周期保持数据的方法,它能在控制器之间通信,且能保持数据的一致性。

服务分类:

常量及变量使用场景及区别:
       1.value不可以在config里注入,但是constant可以
       2.value可以修改,但是constant不可以修改,一般直接用constant配置一些需要经常使用的数据(同名值不可修改)。
      3、可以通过value()来注册服务对象或函数,用constant()来配置数据
      4、 value不能在provider内访问,constant可以

Service()、Fanctory()、Provider():直接上代码更直观的看一下:

 1  //1、工厂服务声明:
 2     //注入factory,相当于注入factory定义时的函数调用入口
 3     app.factory(‘testFactory‘, function() {
 4         //1、定义对象
 5         var factory = {};
 6         //2、对象上添加用户属性
 7         factory.username = "我是工厂服务!";
 8         //2、对象属性上添加提交函数
 9         factory.submit = function() {
10             console.log("工厂服务提交方法");
11         };
12         //3、返回对象
13         return factory;
14     });
1  //2、构造器服务声明
2     //注入service,相当于注入service定义时的function实例
3     app.service(‘testService‘, function() {
4         // 通过this上添加属性或方法绑定
5         this.username = "我是构造器服务";
6         this.submit = function() {
7             console.log("构造服务提交方法!");
8         }
9     });
 //3、提供者服务
    //注入provider,相当于注入provider内$get定义的函数实例的调用
    app.provider(‘testProvider‘, function() {
        this.setUrl = "";
        this.$get = function() {
            var that = this;
            var privateProvider = {};
            privateProvider.user = function() {
                return "我是Provider服务方法";
            };
            privateProvider.submit = function() {
                console.log("我是Provider服务提交方法");
                console.log("我是config配置部分:" + that.setUrl);
            }
            return privateProvider;
        }
    });

从上面代码可以看得出来,Service返回定义时的函数实例,所以不能直接返回字符串,Factory返回的是定义时的函数调用入口,所以能返回字符串,个人感觉该两个服务没有太大区别,平时本人比较用的多的是Factory,provider提供者比他们俩更底层,使用更灵活,主要对提供对外接口之类时可以灵活使用;

decorator():

 app.config(function($provide, testProviderProvider) {
        testProviderProvider.setUrl = "这是config配置内容";
        //声明装饰者服务
        $provide.decorator(‘testProvider‘, function($delegate) {
            return {
                submit: function() {
                    var startDate = new Date();
                    console.log("提交时间记录开始:" + startDate);
                    $delegate.submit();
                    var endDate = new Date();
                    console.log("提交时间记录结束:" + endDate);
                    console.log("提交时间总耗时:" + (startDate - endDate) + "毫秒");
                },
                user: function() {
                    var result = $delegate.user();
                    console.log("结果:" + result);
                }
            }
        });
    });

该服务只要针对已有服务通过横向切面的方式添加一些自定义的代码来实现自定义内容,例如上面代码中在提交服务执行前后添加日志代码,来记录运行时间,但对于调用者没有任何影响,使用该服务时注意的是以上注入的服务名称testProviderProvider必须以Provider结束;

过滤器(Filter):过滤器这里不详细讲解了,因为这个比较简单,网上也有很多相关例子;

时间: 2024-08-26 15:39:28

AngularJs学习笔记3-服务及过滤器的相关文章

-_-#AngularJS学习笔记

AngularJS学习笔记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .done{display:none} .ignore{color:#999} </style> <ul> <li class="

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

Symfony2 学习笔记之服务容器

现在的PHP应用程序都是面向对象开发,所以主要是由对象构成.有的对象可以方便的分发邮件信息而有的可能帮你把信息写入到数据库中.在你的应用程序中,你可能创建一个对象用于管理你的产品库存,或者另外一个对象处理来自第三方API的数据.重要的是现在应用程序要做的这些事情都是被组织到许许多多的对象中来处理它的每一项任务的. 我们将套路一下Symfony2中一个特殊的PHP对象,它帮助我们实例化,组织和获取你应用程序汇总的许多对象.这个对象叫做服务容器,它可以帮助你使用标准统一的方式来创建你程序中的对象.它

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht

AngularJS学习笔记filter

filter是对数据进行过滤操作,比如按某个字段搜索.格式化数据等等,是一个非常有用的接口.下面就简单介绍下它的用法. AngularJS自带的filter接口,|是filter的分隔符,参数用:分隔: currency,格式化number,货币化,默认是转化成美元  param(number,symbol),返回值将会把数字每3位加一个逗号 <input type="number" ng-model="amount"/> <p>默认美元:{