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. selenium--启动不同的浏览器

    在自动化测试经常用到 Firefox,Chrome,IE 浏览器,Firefox 自带驱动,所以我一直用这个测试.那么同一段代码能不能在同时打开两个浏览器呢?当然是可以,浏览器名称参数化. 重点:Ch ...

  2. 深入浅出WPF-07.Property（属性）

    依赖属性 1)字段与属性:字段被封装在实例中,要么能够被外界访问(非Private),要么不能够被外界访问(Private).但是我们直接把数据暴露给外界的做法不安全,容易把错误的数据写入字段.于是我 ...

  3. redis无法连接

     Exception in thread "main" redis.clients.jedis.exceptions.JedisDataException: DENIED Redi ...

  4. TCP协议基本概念

    TCP协议最主要的特点 TCP是面向连接的运输层协议.这就是说,应用程序在使用TCP协议之前,必须要建立TCP连接,且在传输完毕后,还要断开连接. 每一条TCP连接只能有两个端点,每一条TCP连接只能 ...

  5. 关于国密HTTPS 的那些事（二）

    关于国密HTTPS 的那些事(二) 三. 需要解决的问题 前文我们了解了https,并梳理了国密https的流程.那么完成这些流程的目的是什么呢?又是怎么来保护数据的安全性呢?我们继续... 上文我们 ...

  6. S_型文法到q_型文法再到LL(1)型文法演进笔记

    title: S_型文法到q_型文法再到LL(1)型文法演进笔记 date: 2020-08-23 S_型文法到q_型文法再到LL(1)型文法演进笔记 S_型文法(简单的确定性文法) 每个产生式的右部 ...

  7. 流量治理神器-Sentinel的限流模式，选单机还是集群？

    大家好,架构摆渡人.这是我的第5篇原创文章,还请多多支持. 上篇文章给大家推荐了一些限流的框架,如果说硬要我推荐一款,我会推荐Sentinel,Sentinel的限流模式分为两种,分别是单机模式和集群 ...

  8. Java（5）输入和输出

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201515.html 博客主页:https://www.cnblogs.com/testero ...

  9. 分布式表示(Distributed Representation)

    NLP模型笔记 - 分布式表示 ziuno 2020-03-08 19:52:50 410 收藏 2 分类专栏: NLP 模型 笔记 文章标签: nlp 最后发布:2020-03-08 19:52:5 ...

  10. [对对子队]Alpha阶段项目展示博客

    Alpha阶段项目展示博客 1 团队成员的简介和个人博客地址 成员 头像 岗位 博客 个人介绍 黄贤昊 PM 17373253 喜欢玩游戏和做游戏,项目经验基本都和游戏相关,擅长摸鱼,偶尔敬业. 刘子 ...