基本介绍

之前我们介绍了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. Websphere优化 （四个方面）举例

    Websphere优化 一.简单介绍 环境 名称 版本号 server操作系统 Centos 5.6 应用server操作系统 Windows 7 Websphere版本号 WAS 7.0 数据库 O ...

  2. android 加密手机完毕后待机两分钟出现有频率的杂音

    这个音效是code里面主动加的,是为了提醒end user输入PIN的一个提示音,也标志着加密手机动作的完毕. 详细位置是在alps\packages\apps\Settings\src\com\an ...

  3. WebForms UnobtrusiveValidationMode 须要“jquery”ScriptResourceMapping。

    一.问题产生的背景: 在敲牛腩新闻公布系统的后台登录页面的时候,我们用到了RequiredFieldValidator控件(验证非空控件),该控件的作用是禁止输入规定的内容,RequiredField ...

  4. Java 编码 UTF-8

    近期在处理文件时发现了相同类型的文件使用的编码可能是不同的.所以想将文件的格式统一一下(由于UTF-8的通用性,决定往UTF-8统一),遇见的第一个问题是:怎样查看现有文件的编码方式. 文件编码问题集 ...

  5. Python爬虫开发【第1篇】【Json与JsonPath】

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.适用于进行数据交互的场景,比如网站前台与 ...

  6. MySQL-数据库创建与删除

    创建数据库 在MySQL中,数据库是用于存储和操作诸如表,数据库视图,触发器,存储过程等数据的对象的集合. 要在MySQL中创建数据库,使用CREATE DATABASE语句,如下: CREATE D ...

  7. Deferred Rendering（二）G-Buffer的组织

    先来看一张网上广为流传的<杀戮地带2>典型的Deferred Shading的G-Buffer组织: 这里补充解释下几个点: 不存Position,而由depth和屏幕像素坐标反推出来.參 ...

  8. 2016/1/1 运算符 笔记整理 接2015/12/30 Java 语法

    ④运算符 1,赋值运算符:实现从右向左的赋值,符号= 2,算术运算符:符号 + - * / %(求余或求模),结果自动转成最大的                      类型,自动升级. 3, 比较 ...

  9. 蓝桥 ADV-233 算法提高 队列操作 【STL】

      算法提高 队列操作   时间限制:1.0s   内存限制:256.0MB      问题描述 队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. ...

  10. HDU 5832A water problem

    大数 判断整除 /* *********************************************** Author :guanjun Created Time :2016/8/14 1 ...