基本介绍

之前我们介绍了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. 条款九: 避免隐藏标准形式的new

    因为内部范围声明的名称会隐藏掉外部范围的相同的名称,所以对于分别在类的内部和全局声明的两个相同名字的函数f来说,类的成员函数会隐藏掉全局函数 class x { public: void f(); / ...

  2. js逻辑执行判断

    两个变量或者函数,如果与的关系,a && b,如果a是真则在运行b,如果a是假则不运行b了:如果是或的关系,前者是真则不运行后边的了,否则反过来. 举个例子: <span cla ...

  3. 使用Docker部署Gitlab

    由于公司的代码server已使用Gitosis搭建,但由于用户和权限管理太麻烦. 如今想在原有server上再搭建Gitlab,使用Gitlab官方方法直接安装. 会导致与Gitosis冲突,使得Gi ...

  4. keepalived + lvs marster 与 backup 之间的 高可用

    简介 keepalived 是linux下一个轻量级的高可用解决方案,它与HACMP实现功能类似,都可以实现服务或者网络的高可用,但是又有差别:hacmp是一个专业的.功能完善的高可用软件,它提供了H ...

  5. sdut 4-1 复数类的运算符重载

    4-1 复数类的运算符重载 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 通过本题目的练习能够掌握成员运算符重载及友元运算符重载 要求定义一个复数类.重 ...

  6. HDU 5752Sqrt Bo

    Sqrt Bo Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  7. Massive Data Mining学习记录

    第一周: 学习PageRank, 知识点:每个节点的权值由其他节点的投票决定,所有节点的权值和为1 当节点很多时候必须转换成矩阵运算来计算节点的最终值,由马尔可夫链可以证明,这个值可以迭代得到 问题: ...

  8. OTN / SONET / SDH

    ①OTN(光传送网,OpticalTransportNetwork),是以波分复用技术为基础.在光层组织网络的传送网,是下一代的骨干传送网; ②SONET (Synchronous Optical N ...

  9. emma中文显示乱码问题解决(ubutnu)

    vim -/.emma/emmarc 找到  db_encoding=latin1 改为  db_encoding=utf8  然后重新运行emma,此时发现还是乱码,不要着急,在执行所有的sql语句 ...

  10. 【FFmpeg】FFmpeg常用基本命令（转载）

    转自:http://www.cnblogs.com/dwdxdy/p/3240167.html 1.分离视频音频流 ffmpeg -i input_file -vcodec copy -an outp ...