AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

1、使用$http服务

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

HTML代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

JS代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

DATA数据:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

运行效果:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

2、创建自己的service

HTML代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

JS代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

数据代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

运行效果1:初始状态

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

运行状态2:当文本框输入内容时:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

注意事项:

  1. 创建:xxxModuleApp.factory("自定义服务名",["$http",function($http){/*自定义代码块*/}]);
  2. 使用:xxxModuleApp.controller("控制器名",["$scope","myService",function($scope,myService){ mySerivce.方法}]);
  3. 这样就可以使myService独立化。每次使用只需要调用即可。

3、service的特性

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

4、Service、Factory、Provider本质上都是Provider

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

5、使用$filter服务

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

5.1使用$filter的date方法:

HTML+JS代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

运行效果:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

PS:$filter提供9种数据格式化的方法,详情了解文档。

5.2自定义$filter

HTML代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

JS代码:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

运行效果:

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

PS:过滤真是太帅了。这思路太帅了!{原始string | 规则名} 太帅了

6、其他内置的service介绍

AngularJS 学习笔记 (六) 基本概念和用法 之 Service与Provider

 

PS:

  1. 以上是常用的AngularJS的Service中常用的方法。一定要会用。
  2. 文档地址:http://docs.ngnice.com/api/ng/service

 

转载于:https://my.oschina.net/asktao/blog/706029