Angular——自定义服务

基本介绍

之前我们介绍了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——自定义服务的更多相关文章

angular 自定义服务封装自定义http请求
在angular中将http请求,放置在一起封装成服务,可减少代码重复,方便使用 var ngpohttprest = angular.module('ngpohttprest', []); ngpo ...
Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
angular factory Services provider 自定义服务工厂
转载于作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...
Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Angular factory自定义服务
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
Angular定义服务-Learn By Doing
1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...
angularjs 自定义服务的三种方式
angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...
angularJs自定义服务（实现签名和加密）
写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...
angularJs 自定义服务 provide 与 factory 的区别
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

随机推荐

Centos7最小安装下Install Clamav（2017-06-09最后更新）
If you are installing ClamAV for the first time, you have to add a new user and group to your system ...
Ubuntu下Zabbix安装及使用问题
1.configure: error: MySQL library not found MySQL library not found root@kallen:~# apt-get install l ...
【智能路由器】让MT7620固件openwrt支持USB
[智能路由器]系列文章连接 http://blog.csdn.net/u012819339/article/category/5803489 首先确定硬件有USB,这个得检查板子是否引出了usb口,一 ...
python批量删除文件
敲代码測试时总会碰到要删除日志目录下的日志或者删除一些历史文件.每次都会生成,再測试的时候为了查找错误原因方便总是要在測试前删除这些文件.手动删除比較麻烦.所以写一个批量删除脚本 import os ...
合并小图片利器TexturePacker GUI
合并小图片,能够非常大的节省网络开销.尤其如今的站点非常喜欢使用大量的小图标来做一些友好提示.当然使用图片文字也是一种选择. 只是这里推荐的是TexturePacker GUI ,这个确实是一款利器. ...
cocos2dx 纹理优化
description: 为什么要谈纹理的问题,游戏的画面无时无刻不充斥着图像,通俗意义上一款精致的游戏都有着非常精美的画面.这样往往能给玩家带来更好的游戏体验,这一点也是对于游戏制作者来说所尽力追求 ...
数据结构 - 希尔排序(Shell's Sort) 具体解释及代码(C++)
数据结构 - 希尔排序(Shell's Sort) 具体解释及代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/2 ...
Bridge Page
http://www.zzbaike.com/wiki/%E6%A1%A5%E9%A1%B5 桥页(Bridge Page),又叫“门页”(Doorway/Portal/Jump/Entry Page ...
DEDE织梦后台特别卡，有时响应超时的解决办法
跟大家一样,大致情况是: 1.打开后台首页第一次没问题,但是刷新或者点其他菜单就一直卡着了. 2.关掉浏览器重新进首页没问题,但是一旦进了首页再打开php页面就卡死了. 3.服务器返回Maximum ...

Angular——自定义服务

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

随机推荐

热门专题