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 ...
随机推荐
- PLU Decomposition
PLU分解的优点是,能够将Ax=b的矩阵,转换成Ly=b, Ux = y 的形式.当我们改变系数矩阵b时,此时因为矩阵L和U均是固定 的,所以总能高效的求出矩阵的解. // LU.cpp : Defi ...
- Jquery第四课 Javascript中this的使用方法
thiskeyword的使用 在JavaScript中使用thiskeyword表示调用方法的对象,这与大部分面向对象语言是一样的.可是因为call.apply.bind等函数的影响.我们能够改变th ...
- 打开google 新地址
还在为谷歌打不开而发愁吗? 那就试试这个吧 91.213.30.151
- hdu 1258 Sum It Up (dfs+路径记录)
pid=1258">Sum It Up Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (J ...
- spoj 1812 LCS2 - Longest Common Substring II (后缀自己主动机)
spoj 1812 LCS2 - Longest Common Substring II 题意: 给出最多n个字符串A[1], ..., A[n], 求这n个字符串的最长公共子串. 限制: 1 < ...
- 将mvvmlight 移植到 ios step1
https://github.com/wangrenzhu/SimpleIoc-For-Objective-c simple ios for objective-c 版 基本实现 全部功能 完美实现 ...
- DNNClassifier 深度神经网络 分类器
An Example of a DNNClassifier for the Iris dataset. models/premade_estimator.py at master · tensorfl ...
- JButton的setRollover出现的奇怪问题
设置了setRollover,可以正常出现状态但是却不会回到默认状态. 研究了一下才发现,repaint的时候不会清除背板而是覆盖上去的, 所以如果原图是透明图就会出现状态不变的情况
- A Go library implementing an FST (finite state transducer)——mark下
https://github.com/couchbaselabs/vellum Building an FST To build an FST, create a new builder using ...
- 三种解密 HTTPS 流量的方法介绍
转载自:https://imququ.com/post/how-to-decrypt-https.html作者: Jerry Qu Web 安全是一项系统工程,任何细微疏忽都可能导致整个安全壁垒土崩瓦 ...