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

<script src="Scripts/stringService.js"></script>

Part 20 Create custom service in AngularJS的更多相关文章

  1. How to Create Custom Filters in AngularJs

    http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction Filter ...

  2. [转]How to Create Custom Filters in AngularJs

    本文转自:http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction F ...

  3. 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 ...

  4. 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 ...

  5. 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 ...

  6. create custom launcher icon 细节介绍

    create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...

  7. 配置ssh框架启动tomcat服务器报异常Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]

    在Spring中配置jdbc时,引用的是dbcp.jar包,在db.properties配置文件中,使用了之前的properties配置文件的用户名username(MySql用户名) 然后在启动服务 ...

  8. 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. ...

  9. 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 ...

随机推荐

  1. P4201-[NOI2008]设计路线【结论,树形dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P4201 题目大意 给出\(n\)个点的一棵树开始所有边都是白色,选出若干条没有公共点的路径将上面所有边变为黑色. ...

  2. oracle常见命令

    1.权限 (1)系统权限 系统权限是指对数据库系统的权限和对象结构控制的权限. 如grant create session to 用户名 -赋予用户登录的权限 (2)对象权限 访问其它用户对象的权利 ...

  3. 5.深入TiDB：Insert 语句

    本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:https://www.luozhiyun.com/archives/605 这篇文章我们看一下 ...

  4. 10.12 LNMP

    yum install nginx php php-fpm mariadb-server php-mysql php.conf server { listen 8000; # pass the PHP ...

  5. FastAPI 学习之路（十）请求体的字段

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  6. AgileConfig 轻量级配置中心 1.5 发布 - 支持多环境配置

    AgileConfig 从发布到现在,收到不同学的 issue 说需要多环境的支持.也就是一个应用在不同的环境下可以配置不同的配置项.这是一个非常有用的功能,就跟我们开发的时候会设置多个 appset ...

  7. DM8数据库单机安装

    一.系统概要 表1 部署情况一览表 操作系统 Windows10 数据库版本 DM8(开发版) 数据库类型 单机 磁盘挂载 无 Key信息 无 二.操作系统信息检查 2.1 操作系统版本 [root@ ...

  8. Java 是编译型语言还是解释型语言？

    Java首先由编译器编译成.class类型的文件,这个是java自己类型的文件.然后在通过虚拟机(JVM)从.class文件中读一行解释执行一行.因此Java是一种半编译半解释的语言,理解这种意思即可 ...

  9. Scrum Meeting 0429

    零.说明 日期:2021-4-29 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 qsy PM&前端 完成部分后端管理 ...

  10. 搬运1：关于对C语言中数组名取地址加减等操作的一点探究

    对于数组名取地址强制转换的操作 偶然在晚上学了C语言指针后网页闲逛找题时,被一个数组名取地址搞糊涂了,在自己试验加探索后我稍微悟了一点东西. 代码如下: #include<stdio.h> ...