AngularJs #12 How To Create a Custom Service in Angular JS ( Tutorial )

Image Source

What Will I Learn?

I will learn how to create a custom service in angular js .

• How to design the table using HTML and angular directives .
• How to create a function that process string in the controller .
• How to create the service and link it with the controller function .

Requirements

• Basic Knowledge of HTML and CSS language .
• Basic Knowledge of JavaScript language .
• Has an editor text support HTML and JavaScript .
• Must has the angular files from the official site .

Difficulty

• Basic

Tutorial Contents

In this tutorial we will discuss how to create and use a costume service in Angular JS , let's understand it with an example , I want to generate two text boxes the first is a string without any spaces like it ' AngularUtopianTutorial ' and I have a button named " process String " when I click on it the second text box " result " will contain our String but with spaces " Angular Utopian Tutorial " so I will include a space between the letters before the letter U and the letter T , so the first thing is to design our idea

Here I created a table with 3 table rows the first is Your String which is our string without spaces that I want to add a spaces when we click on the button , the second row has also two table data < td> the first is the input with the type text also the label result , the third one is the button which is an input with type = button and a value is " Process String " , I have linked some CSS proprieties to be more beauty

I used the border-collapse : collapse , border black with 1px finally a padding to be like it

If we click on the button nothing going to happen we need to implement this logic , I need firstly to add a ng-model for the input let's do it

So the first input it has ng-model attribute that will have as propriety " input " , similarly for the result text box will actually be displaying the result I called the model "output", and when we click on the button we want to call a function on the scope object , I used the ng-click attribute to call " transformString(input) " function with the input item , now we must define this function in our controller function

So I checked into the function if the not an input element by the sign " ! " is the opposite of our value , if it's not an input element I will return the input element we will do no process string

The first thing that am going to do is to create a variable named " output " which is an empty string and another variable named " i " which is going to be a counter to use in the for loop and I initialized it with the value " 0 " , I used a for loop the first choice is the ' i ' variable , the second is the condition the variable will be less then the length of our input text and the i will increment by 1 , inside the loop I have a condition if(i>0) why I added this condition ? just to skip the first letter because the first letter will be for example in uppercase form but I don't want to apply this transformation for it for that I skip the first letter , I added also another condition which is if the input of i of this place now equals at the letter of the input in the place i also to uppercase which is a JavaScript function if it's true the output will add a space but if the condition is false it will continue appending the letters of input to the output variable .

I attached the output to the $scope object after added the input[i] letter to the output .let's reload the page and see what's the result of our function

So I type the string that I want to add spaces which is " AngularUtopianTutorial " and when I click on the button this is the result

Great look at that it doing all what we want , so all the logic with our controller function there are two problems , the first is the controller code has become a big complex and big large , the second is when we want to reuse this function in other controller we must duplicate this code so this is simple example to use the service , so the first thing to do is to add another JavaScript file to the project

I added a reference from the custom.js file and I have create a new factory to create the new service named ' stringService ' this service has a function that's return also another function which is our function that I have created in the custom js file it will return the output variable to this function .

I included the stringService like a parameter to the controller function and I used it to call the processString function , and I included the script page in the HTML view and this is the result

The same result here by using the service method to help us because it's reusable you can use it in any controller .

Curriculum

• AngularJs #08 How To Create A Custom Filter in Angular JS ( Tutorial )
  
• AngularJs #09 How To Use ng-show And ng-hide Directives in Angular JS ( Tutorial )
  
• AngularJs #10 How To Use ng-init Directives in Angular JS ( Tutorial )
  
• AngularJs #11 How To Use ng-include Directive in Angular JS ( Tutorial )

---

Posted on Utopian.io - Rewarding Open Source Contributors

---