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 ...
随机推荐
- 在modal中的datetimepicker插件BUG修复
前言:因为在模态框用到datetimepicker这一日期控件,而选中日期时,会触发模态框的再次打开,导致上面表单选的值会重新加载 解决办法: 用stopPropagation() 方法阻止事件传播, ...
- WPF进阶技巧和实战04-资源
资源集合 每个元素都有Resources属性,该属性存储了一个资源字典集合(它是ResourceDictionary类的实例).资源集合可以包含任意类型的对象,并根据字符串编写索引. 每个元素既可以访 ...
- 【Go】Golang实现gRPC的Proxy的原理
背景 gRPC是Google开始的一个RPC服务框架, 是英文全名为Google Remote Procedure Call的简称. 广泛的应用在有RPC场景的业务系统中,一些架构中将gRPC请求都经 ...
- [Linux]Ansible自动化运维② - 工具与模块
目录 一.Ansible的工具 1.1 Ansible的工作前提 1.2 Ansible的安装文件 1.3 Ansible的配置文件 1.4 Ansible的相关工具 1.4.1 [帮助工具]Ansi ...
- 基于Hexo+Github Pages搭建的博客
概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...
- 【原创】C语言和C++常见误区（一）
本文仅在博客园发布,认准原文地址:https://www.cnblogs.com/jisuanjizhishizatan/p/15414469.html 问题1:int类型占几个字节? 常见误区:占4 ...
- Python读取Excel表格
前言:需要进行自动化办公或者自动化测试的朋友,可以了解下此文,掌握Python读取Excel表格的方法. 一.准备工作: 1.安装Python3.7.0(官网下载安装包) 2.安装Pycharm(官网 ...
- 3.3 Execution Flow of a DDD Based Application 基于DDD的应用程序执行流程
3.3 Execution Flow of a DDD Based Application 基于DDD的应用程序执行流程 The figure below shows a typical reques ...
- mac无坑安装nginx
mac无坑安装nginx 首先需要mac下有一个缺失的软件包的管理器------->homebrew 1.打开终端输入 brew update 说明homebrew已经安装好了 2.继续执行以下 ...
- 【UE4 C++】 Config Settings配置文件(.ini)
简介 常见存储路径 \Engine\Config\ \Engine\Saved\Config\ (运行后生成) [ProjectName]\Config\ [ProjectName]\Saved\Co ...