Part 20 Create custom service in AngularJS
Whenever the case changes from lower to upper, a single space character should be inserted. This means the string "AngularVideoTutorial" should be converted to"Angular Video Tutorial". 
Let us first see, how to achieve this without using a custom service.
HtmlPage1.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<tr>
<td>Your String</td>
<td><input type="text" ng-model="input" /> </td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" ng-model="output" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" ng-click="transformString(input)"
value="Process String" />
</td>
</tr>
</table>
</div>
</body>
</html>
Script.js : Notice, all the logic to insert a space when the case changes is in the controller. There are 2 problems with this
1. The controller is getting complex
2. This logic cannot be reused in another controller. If you have to use this logic in another controller, we will have to duplicate this same code with in that controller.
When we use our own custom service to encapsulate this logic, both of these problems go away. The custom service can be injected into any controller where you need this logic.
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
$scope.transformString = function (input) {
if (!input)
return input; var output = ""; for (var i = 0; i < input.length; i++) {
if (i > 0 && input[i] == input[i].toUpperCase()) {
output = output + " ";
} output = output + input[i];
} $scope.output = output;
};
});
Now let's create a custom service. Here are the steps
1. Add a JavaScript file to the Scripts folder in the project. Name it stringService.js.
2. Copy and paste the following code. Notice we are using the factory method to create and register the service with Angular.
app.factory('stringService', function () {
return {
processString: function (input) {
if (!input)
return input;
var output = "";
for (var i = 0; i < input.length; i++) {
if (i > 0 && input[i] == input[i].toUpperCase()) {
output = output + " ";
}
output = output + input[i];
}
return output;
}
};
});
3. Copy and paste the following code in Script.js. Notice that we have injected stringService into the controller function.
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, stringService) {
$scope.transformString = function (input) {
$scope.output = stringService.processString(input);
};
});
4. On HtmlPage1.html, only one change is required and that is to reference the stringService.js script file
Part 20 Create custom service in AngularJS的更多相关文章
- How to Create Custom Filters in AngularJs
http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction Filter ...
- [转]How to Create Custom Filters in AngularJs
本文转自:http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction F ...
- Part 13 Create a custom filter in AngularJS
Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...
- Deploy custom service on non hadoop node with Apache Ambari
1 I want to deploy a custom service onto non hadoop nodes using Apache Ambari. I have created a cu ...
- Part 17 Consuming ASP NET Web Service in AngularJS using $http
Here is what we want to do1. Create an ASP.NET Web service. This web service retrieves the data from ...
- create custom launcher icon 细节介绍
create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...
- 配置ssh框架启动tomcat服务器报异常Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]
在Spring中配置jdbc时,引用的是dbcp.jar包,在db.properties配置文件中,使用了之前的properties配置文件的用户名username(MySql用户名) 然后在启动服务 ...
- Unable to create requested service org.hibernate.cache.spi.RegionFactory
hibernate 4.3.11+struts2.3.28.1+spring 4.2.5,在搭框架的时候,报的这个错误: Unable to create requested service org. ...
- Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]
使用hibernate的时候,报出这个错误Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvir ...
随机推荐
- Python3入门系列之-----列表
列表 列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. ...
- Ueditor Version 1.4.3.3 SSRF
点以前挖的洞.Ueditor是支持获取远程图片,较为经典的进行限制url请求,但是可以通过DNS重绑定绕过其验证. 代码分析 一般请求的url如下,其中source为数组,值为图片地址: /edito ...
- NOIP模拟69
T1 石子游戏 大坑未补 T2 大鱼吃小鱼 解题思路 set+桶可以得到 60pts (code) 线段树上二分每一次优先递归右区间从右区间贪心选择,并且记录下更改过的值,在处理完答案之后再复原回去. ...
- python-docx 页面设置
初识word文档-节-的概念 编辑一篇word文档,往往首先从页面设置开始,从下图可以看出,页面设置常操作的有页边距.纸张方向.纸张大小4个,而在word中是以节(section)来分大的块,每一节的 ...
- 11.4.2 LVS—NAT
Virtual Server via NAT(VS-NAT) 用地址翻译实现虚拟服务器｡地址转换器有能被外界访问到的合法IP地址,它修改来自专有网络的流出包的地址｡外界看起来包是来自地址转换器本身,, ...
- Go语言之Goroutine与信道、异常处理
一.Goroutine Go 协程可以看做成一个轻量级的线程,Go 协程相比于线程的优势: Goroutine 的成本更低大小只有 2 kb 左右,线程有几个兆. Goroutine 会复用线程,比如 ...
- 双指针之滑动窗口（长度最小的子数组 和 和为s的连续正数序列）
双指针之滑动窗口 (长度最小的子数组:和为s的连续正数序列) 1, 什么时候使用? (与子数组/字符串 有关的题目)~如果给了某个具体值的target,即用滑动窗口 不然就双指针(一般做法,左边< ...
- 洛谷4455 [CQOI2018]社交网络 (有向图矩阵树定理)(学习笔记）
sro_ptx_orz qwq算是一个套路的记录 对于一个有向图来说 如果你要求一个外向生成树的话,那么如果存在一个\(u\rightarrow v\)的边 那么\(a[u][v]--,a[v][v] ...
- 洛谷3244 落忆枫音 （拓扑图dp+式子）
题目大意就是 给你一个DAG 然后添加一条边\(x->y\) ,询问以1为根的生成树的个数 QWQ 首先假设没有添加的边 答案就应该是 \[ans=\prod_{i=1}^{n} in[i] \ ...
- 一次简单的SQL注入绕WAF
本人也是小白一枚,大佬请绕过,这个其实是六月份的时候做的,那时候想多点实战经验,就直接用谷歌搜索找了一些网站,这个是其中一个 1.目标网站 2.发现有WAF防护 3.判断存在注入 4.猜测了一下闭合为 ...