基本介绍

之前我们介绍了angular内置的几种服务，这里我们介绍如何自己定义自己的服务，主要是通过三个方法：factory、service、value

基本使用

factory：可以返回对象，也可以返回一个函数

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-controller="DemoController">

<h1>{{now}}</h1>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.factory('showTime', ['$filter', function ($filter) {

        return function () {

            var now = new Date();

            return $filter('date')(now, 'yy-MM-dd');

        }

    }]);

    App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {

        $scope.now = showTime();

    }]);

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-controller="DemoController">

<h1>{{now}}</h1>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.factory('showTime', ['$filter', function ($filter) {

        var now = new Date();

        return {

            now: $filter('date')(now, 'yy-MM-dd')

    }

    }]);

    App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {

        $scope.now = showTime.now;

    }]);

</script>

</body>

</html>

service：和上面的factory有些区别，service里面可以用this追加属性和方法

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-controller="DemoController">

<h1>{{now}}</h1>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.service('showTime', ['$filter', function ($filter) {

        var now = new Date();

        this.now = $filter('date')(now, 'yy-MM-dd');

    }]);

    App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {

        $scope.now = showTime.now;

    }]);

</script>

</body>

</html>

value：类似于常量，和最开始初始化应用模块的ng-init十分相似，全局都可以访问

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-controller="DemoController">

<h1>{{text}}</h1>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.value('text', 'Hello World!');//定义一个常量，相当于ng-init

    App.controller('DemoController', ['$scope', 'text', function ($scope, text) {

        $scope.text = text;

    }]);

</script>

</body>

</html>

Angular——自定义服务的更多相关文章

  1. angular 自定义服务封装自定义http请求

    在angular中将http请求,放置在一起封装成服务,可减少代码重复,方便使用 var ngpohttprest = angular.module('ngpohttprest', []); ngpo ...

  2. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  3. angular factory Services provider 自定义服务 工厂

    转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...

  4. Angular.js之服务与自定义服务学习笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Angular factory自定义服务

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  6. Angular定义服务-Learn By Doing

    1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...

  7. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  8. angularJs自定义服务（实现签名和加密）

    写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...

  9. angularJs 自定义服务 provide 与 factory 的区别

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

随机推荐

  1. SaltStack学习系列之state常用模块

    常用模块:cron,cmd,file,mount,ntp,pkg,service,user,group cmd模块 参数: name:要执行的命令 unless:用于检查的命令,只有unless指向的 ...

  2. 学习javascript 非常好的博客

    这个大牛写的非常好!!推荐一下 http://www.cnblogs.com/xiaohuochai/tag/javascript%E6%80%BB%E7%BB%93/default.html?pag ...

  3. [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type

    ypeScript 2.2 introduced the object, a type that represents any non-primitive type. It can be used t ...

  4. python搭建web server

    假设你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比方:Apache,ISS等.那么, Python 可能帮助你.使用Python能够完毕一个简单的内建 HT ...

  5. 连通分量模板：tarjan: 求割点 &amp;&amp; 桥 &amp;&amp; 缩点 &amp;&amp; 强连通分量 &amp;&amp; 双连通分量 &amp;&amp; LCA(近期公共祖先)

    PS:摘自一不知名的来自大神. 1.割点:若删掉某点后.原连通图分裂为多个子图.则称该点为割点. 2.割点集合:在一个无向连通图中,假设有一个顶点集合,删除这个顶点集合,以及这个集合中全部顶点相关联的 ...

  6. ≪统计学习精要(The Elements of Statistical Learning)≫课堂笔记（三）

    照例文章第一段跑题,先附上个段子(转载的哦~): I hate CS people. They don't know linear algebra but want to teach projecti ...

  7. iPhone微信防止撤销插件开发

    导语: 随着移动时代的发展以及微信的普及流行,越来越多的用户使用微信发送消息,但经常出现撤销消息的情况.因此需要一款微信防止消息撤回插件,微信用户可以防止对方撤回消息,看到对方发出的任何消息,妈妈再也 ...

  8. c#生成AVI自动设置压缩格式，不调用AVISaveOptions

    工作中遇到生成AVI视频的项目,代码中会调用AVISaveOptions来设置压缩格式,针对单个文件还好说,但是批量生成视频的时候,每一个都要设置格式, 体验不是很好,经过查询资料问题得到解决 最开始 ...

  9. 【bzoj1787】&【bzoj1832】[Ahoi2008]Meet 紧急集合 & 聚会

    bzoj1787就是bzoj1832 bzoj1832 空间和时间少了一些... 求三个结点到一个结点距离之和最小的结点以及距离和 求出两两lca,其中有两个相同,答案则为另一个 感觉就是一大暴力.. ...

  10. 第二步：将LAD结果的属性值二（多）值化，投入计算模型

    一文详解LDA主题模型 - 达观数据 - SegmentFault 思否 https://segmentfault.com/a/1190000012215533 SELECT COUNT(1) FRO ...