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 ...
随机推荐
- P5212-SubString【LCT,SAM】
正题 题目链接:https://www.luogu.com.cn/problem/P5212 题目大意 开始一个字符串\(S\),有\(n\)次操作 在\(S\)末尾加入一个字符串 询问一个串在\(S ...
- 基于 Ubuntu 21.04 BPF 开发环境全攻略
本文地址:https://www.ebpf.top/post/ubuntu_2104_bpf_env 1. 系统安装 1.1 Vagrant Vagrant 是一款用于构建及配置虚拟开发环境的软件,基 ...
- Python setattr() 函数 ，Python super() 函数： Python 内置函数 Python 内置函数
描述 setattr 函数对应函数 getatt(),用于设置属性值,该属性必须存在. 语法 setattr 语法: setattr(object, name, value) 参数 object -- ...
- 【C++ Primer Plus】编程练习答案——第10章
1 // chapter10_1_account.h 2 3 #ifndef LEARN_CPP_CHAPTER10_1_ACCOUNT_H 4 #define LEARN_CPP_CHAPTER10 ...
- C++： 基于四叉树数据结构的自适应网格（初探）
C++: 基于四叉树数据结构的自适应网格 二叉树是一种典型的非线性存储数据结构,查找效率可以达到\(O(log_2N)\),同样,这类树状结构存在许多种变体,详细参考邓俊辉老师的<数据结构C++ ...
- Go的Select
Go 的通道有两种操作方式,一种是带 range 子句的 for 语句,另一种则是 select 语句,它是专门为了操作通道而存在的.这里主要介绍 select 的用法. 一.select的语法 se ...
- 从源码分析node-gyp指定node库文件下载地址
当我们安装node的C/C++原生模块时,涉及到使用node-gyp对C/C++原生模块的编译工作(configure.build).这个过程,需要nodejs的头文件以及静态库参与(后续称库文件)对 ...
- Visual Studio Docker调试端口设置
一.前言 在Visual Studio 调试程序时,Docker中的容器端口和主机端口映射随机生成,导致每次调试都需要修改前端API接口的地址 二.解决方案 1.修改Docker调试启动参数,找到启动 ...
- 关于C、Java、Python程序运行耗时及内存用量
最近没有刷题,而是在PTA找几个题目寻找有关程序输入流问题以及各种语言在运行时对计算机消耗内存的问题, 以免很多同学解题的时候发现自己做的对但是出现运行超时的问题:针对运行内存,肯定用C/C++的同学 ...
- 利用 CSS Overview 面板重构优化你的网站
本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel,并且介绍如何更好地利用这个面板.通过 CSS Overview Panel,可能可以帮助我们: 更准确(高保真) ...