基本介绍

之前我们介绍了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. man中文手册

    Ubuntu安装man手册 sudo apt-get install manpages-zh CentOS安装man手册 yum install man man中文安装包 yum install ma ...

  2. HDU2577 How to Type【DP】

    题目链接: pid=2577">http://acm.hdu.edu.cn/showproblem.php? pid=2577 题目大意: 给你一个仅仅包括大写和小写字母的字符串,如今 ...

  3. android中怎么将桌面较长的图标名称显示完整

    找到相应的 res 资源, 改动其 styles.xml <style name="WorkspaceIcon.Portrait">         <item ...

  4. 一起talk C栗子吧（第九十回：C语言实例--使用管道进行进程间通信三）

    各位看官们,大家好,上一回中咱们说的是使用管道进行进程间通信的样例.这一回咱们说的样例是:使用管道进行进程间通信.只是使用管道的方式不同样.闲话休提,言归正转.让我们一起talk C栗子吧! 我们在前 ...

  5. swoole简易实时聊天

    最近公司拓展业务,需要做一个即时聊天业务,就顺带研究了一下swoole,文档地址贴出来:https://wiki.swoole.com/ 文档写得很详细,demo也很简洁明了,所以废话就不多说了. 工 ...

  6. luogu 1121 环状最大两段子段和

    题目大意: 一个序列看做一个环 选两段数使它们和最大 思路: 定义一个dp数组i j 0/1 表示前i个取了连续的j段 0/1表示取不取第i个 但是因为看做一个环 首尾相接的情况可以看做是选三段,其中 ...

  7. python cmd 启动python项目报错：no module named “xxx”

    场景:使用pycharm编辑器启动pyhon项目时可以启动,但使用cmd启动时,会报:no module named “xxx”的错误,此时,有两种情况: 1.no module named “xxx ...

  8. python re正则表达式模块

    模块的的作用主要是用于字符串和文本处理,查找,搜索,替换等 复习一下基本的正则表达式吧  .:匹配除了换行符以为的任意单个字符  *:匹配任意字符,一个,零个,多个都能匹配得到 俗称贪婪模式 +:匹配 ...

  9. JSP-Runoob：JSP 教程

    ylbtech-JSP-Runoob:JSP 教程 1.返回顶部 1. JSP 教程 JSP 与 PHP.ASP.ASP.NET 等语言类似,运行在服务端的语言. JSP(全称Java Server ...

  10. bzoj题目大体分类

    http://m.blog.csdn.net/article/details?id=51387623