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. Orchard Core 配置项说明

    Orchard Core使用IShellConfiguration扩展了ASP.NET Core IConfiguration,以允许在应用程序范围的配置之上进行特定于租户的配置.虽然本文档使用Orc ...

  2. bzoj3729-Gty的游戏【Splay,博弈论】

    正题 题目链接:https://darkbzoj.tk/problem/3729 题目大意 给出\(n\)个点的一棵树,第\(i\)个节点上有\(a_i\)个石子,然后每次可以选择不超过\(L\)个石 ...

  3. Mybatis里@InsertProvider、@UpdateProvider方法里使用if test标签

    例如: ··· insert into TEST1(<if test="base_id!=null and base_id!=''">base_id,</if&g ...

  4. 轻量级 Java 基础开发框架，Solon & Solon Cloud 1.5.40 发布

    Solon 已有120个生态扩展插件,此次版本以细节打磨为主: 增加 mybatisplus-solon-plugin 插件 //至此,Solon 已完成国内外主流的5个ORM框架插件适配 插件 so ...

  5. 为什么'\x1B'.length===1？\x与\u知识延伸

    背景 先讲一下背景,再说原因 大多数库都会在日志中使用chalk库为console的内容进行上色 被chalk处理后,其原本的内容会被'\x1B...'所包裹 console.log(chalk.bl ...

  6. mysql8 主从搭建

    主:192.168.10.2 从:192.168.10.3 主:1.登录mysql,授权账号,让从数据库可以进行复制. mysql CREATE USER 'repl'@'192.168.10.3' ...

  7. xshell连接VMware中的Linux

    [前言]最近想压测一下ITOO的考试系统,所以想在自己电脑上安装一下linux,然后安装一下jmeter进行压测一下. 不过为什么要连接xshell呢,因为在虚拟机上总是会和主机切换鼠标,而且也不能粘 ...

  8. RA-28000 账号被锁定的解决办法

    ORA-28000 账号被锁定的解决办法 错误场景:当使用sqlplus进行登录时报错:ORA-28000 账号被锁定.错误原因:由于oracle 11g 在默认在default概要文件中设置了密码最 ...

  9. Python - faker

    安装 faker pip install Faker pip install Dumper 设置生成器 from faker import Faker fake = Faker() 它可以通过访问以想 ...

  10. PAT (Basic Level) Practice （中文）1026 程序运行时间 (15分)

    1026 程序运行时间 (15分) 要获得一个 C 语言程序的运行时间,常用的方法是调用头文件 time.h,其中提供了 clock() 函数,可以捕捉从程序开始运行到 clock() 被调用时所耗费 ...