42.angularJS自定义服务

转自：https://www.cnblogs.com/best/tag/Angular/

你可以创建自定义服务，链接到你的模块中：

 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5     <meta charset="utf-8">
 6     <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 7 </head>
 8
 9 <body>
10     <div ng-app="myApp" ng-controller="myCtrl">
11
12         <p>255 的16进制是:</p>
13
14         <h1>{{hex}}</h1>
15
16     </div>
17
18     <p>自定义服务，用于转换16进制数：</p>
19
20     <script>
21             var app = angular.module('myApp',[]);
22             app.service('hexafy',function(){
23                 this.myFunc = function(x){
24                     return x.toString(16);
25                 }
26             });
27             app.controller('myCtrl',function($scope,hexafy){
28                 $scope.hex = hexafy.myFunc(255);
29             });
30     </script>
31
32 </body>
33
34 </html>

过滤器中，使用自定义服务

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 6 </head>
 7 <body>
 8
 9 <div ng-app="myApp" ng-controller="myCtrl">
10 <p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
11
12 <ul>
13   <li ng-repeat="x in counts">{{x | myFormat}}</li>
14 </ul>
15
16 <p>过滤器使用服务将10进制转换为16进制。</p>
17 </div>
18
19 <script>
20 var app = angular.module('myApp', []);
21 app.service('hexafy', function() {
22     this.myFunc = function (x) {
23         return x.toString(16);
24     }
25 });
26 app.filter('myFormat',['hexafy', function(hexafy) {
27     return function(x) {
28         return hexafy.myFunc(x);
29     };
30 }]);
31 app.controller('myCtrl', function($scope) {
32     $scope.counts = [255, 251, 200];
33 });
34 </script>
35
36 </body>
37 </html>

转载于:https://www.cnblogs.com/sharpest/p/8176873.html

42.angularJS自定义服务相关推荐

走进AngularJs(六) 服务
今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念 ...
（转）走进AngularJs(六) 服务
原文地址:http://www.cnblogs.com/lvdabao/p/3464015.html 今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录 ...
AngularJS-demo - 常用命令、内置服务、自定义服务、继承
AngularJS-demo - 常用命令.内置服务.自定义服务.继承常用命令: ng-app.ng-controller.ng-init.ng-repeat.ng-click 内置服务: $sco ...
ajax 服务路由,Angular自定义服务路由
什么是跨域不同域名之间进行数据访问,默认情况下是不允许的. 是谁导致了跨域是浏览器导致了跨域,为了数据的安全. 怎样解决跨域使用插件 JSONP Ajax和jsonp是同一个东西么 Ajax的核 ...
如何使用Create-React-App和自定义服务人员构建PWA
Note: This is not a primer on create-react-app or what a service worker is. This post assumes prior ...
AngularJS - 自定义指令
这一篇从自定义指令出发,记录了定义一个指令时影响指令行为的各种因素. 试着感受这些因素,让自己更高效地编写AngularJS应用. Directive 先从定义一个简单的指令开始. 定义一个指令本质上 ...
Nginx的http块自定义服务日志
自定义服务日志 Nginx中日志的类型分access.log.error.log. access.log:用来记录用户所有的访问请求. error.log:记录nginx本身运行时的错误信息,不会记录 ...
linux之systemctl设置自定义服务
1 问题在linux系统上设置自定义服务,或者让我的服务开机就运行起来,比如我们就以tomcat服务为例子 /usr/local/tomcat/bin/startup.sh 启动tomcat的脚本 ...
ROS 学习笔记（三）：自定义服务数据srv+server+client 示例运行
ROS 学习笔记(三):自定义服务数据srv+Server+Client 示例运行一.自定义服务数据: 1.向功能包添加自定义服务文件(AddTwoInts.srv) cd ~/catkin_ws/ ...

42.angularJS自定义服务

过滤器中，使用自定义服务

42.angularJS自定义服务相关推荐

最新文章

热门文章