星空网 > 软件开发 > Java

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"

Part 20 Create custom service in AngularJS 

Let us first see, how to achieve this without using a custom service. 

HtmlPage1.html :  

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <title></title>  <script src='/images/loading.gif' data-original="Scripts/angular.js"></script>  <script src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="Scripts/stringService.js"></script>



原标题:Part 20 Create custom service in AngularJS

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

lazada各站点网址:https://www.goluckyvip.com/tag/85491.html
lazada马来站网址:https://www.goluckyvip.com/tag/85492.html
lazada菲律宾站:https://www.goluckyvip.com/tag/85493.html
lazada前台网址:https://www.goluckyvip.com/tag/85495.html
lazada马来站:https://www.goluckyvip.com/tag/85496.html
lazada泰国站入口:https://www.goluckyvip.com/tag/85497.html
字节跳动辟谣!TikTok收紧美国开店政策为不实信息:https://www.kjdsnews.com/a/1836537.html
字节跳动辟谣!TikTok收紧美国开店政策为不实信息:https://www.goluckyvip.com/news/188212.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流