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 ...
随机推荐
- 解决联想R720双系统Ubuntu16.04的无线网卡开启问题及信号不稳定
问题一:1.问题描述笔记本型号:Lenovo r720笔记本(i5-7300hq,gtx1060 maxq 6g),默认装入Win10系统,然而当装入Ubuntu16.04双系统时,会出现无线网卡(型 ...
- windows中抓包命令，以及保存为多个文件的方法
本文主要介绍windows中抓包命令,以及保存为多个文件的方法 说一说保存为多个文件存储数据包这个问题的由来,一般如果长时间抓包,有可能需要等上几个小时,因为这个时候抓包的内容都是存放在内存中的,几个 ...
- 高德 Serverless 平台建设及实践
作者 | 邓学祥(祥翼) 来源 | Serverless 公众号 高德从 FY21 财年开始启动 Serverless 建设,至今一年了,高德 Serverless 业务的峰值超过十万 qps 量级, ...
- 【Ubuntu】VirtualBox 您没有查看“sf_VirtualDisk”的内容所需的权限
但是现在发现无法去访问,没有权限: 即使是: crifan@crifan-Ubuntu:~$ sudo chown -R crifan /media/sf_win7_to_ubuntu/ cr ...
- python中return的返回和执行
1 打印函数名和打印函数的执行过程的区别 例子1.1 def a(): print(111) print(a) # 打印a函数的内存地址,不会对a函数有影响,a函数不会执行 print(a()) # ...
- 禅道开源版 Ldap认证插件开发
禅道开源版-Ldap插件开发 背景 由于开源版无法使用ldap认证,所以在此分享一下自己开发禅道的ldap开发过程,希望对你有所帮助. 简单说一下这个插件的功能: 1.跳过原有禅道认证,使用ldap认 ...
- [对对子队]Beta设计和计划
需求再分析 Alpha阶段用户反馈的问题主要有三个 新手引导部分没有明确指出合成按钮可以使用下拉框切换目标,因此不少玩家卡在第三关 觉得合成动画太长,希望可以快进或者跳过 对游戏目标很迷惑,不知道为什 ...
- [敏捷软工团队博客]Beta阶段发布声明
项目 内容 2020春季计算机学院软件工程(罗杰 任健) 博客园班级博客 作业要求 Beta阶段发布声明 我们在这个课程的目标是 在团队合作中锻炼自己 这个作业在哪个具体方面帮助我们实现目标 对Bet ...
- 第0次 Beta Scrum Meeting
本次会议为Beta阶段第0次Scrum Meeting会议 会议概要 会议时间:2021年5月27日 会议地点:「腾讯会议」线上进行 会议时长:1小时 会议内容简介:本次会议为Beta阶段启程会议,主 ...
- java中延时队列的使用
最近遇到这么一个需求,程序中有一个功能需要发送短信,当满足某些条件后,如果上一步的短信还没有发送出去,那么应该取消这个短信的发送.在翻阅java的api后,发现java中有一个延时队列可以解决这个问题 ...