Create custom service in AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 20 of angularjs tutorial in
this video well disk is creating and
using a custom service in angular let's
understand this with an example notice
on the web page right here we've got two
text boxes within the first text box we
have the string Angela video tutorial
without any spaces when we click this
process string button we want to
introduce a single space character
whenever we detect the case change
notice the letters R and V there is a
case change from lower to upper so
whenever we detect that we want to
insert a single space character before
the capital letter
so with this string angular video
tutorial when we click this process
string button we want to convert that
string into something that you see in
the result text box notice there is a
single space character between the words
angular and video and another single
space character between the words video
and tutorial so let's see how to achieve
this along the way we'll understand
creating and using a custom service the
first step here is to design a web page
that looks like this which I have
already done and here is the HTML for
that so the HTML is very straightforward
we have called this table element and
within this table element we've got
three TR elements and within each TR
element we've got two TDs within the
first TD we have this little text and
within the second TD we have a text box
the same is the case for the second here
within the final TR again we have got
two TDs within the first TD we don't
have anything it's empty and within the
second TD we have a button the value on
the button is processed rain so if we
view this HTML in the browser this is
how it looks like at the moment when we
click this process string button nothing
is going to happen we need to implement
that logic now the first thing that I'm
going to do is introduce the ng model
directives on the text boxes so the
value for ng model on the input text box
is going to be input so this is where
the end user provides his input
similarly for the result text box we
will actually be displaying the result
let's call the model as output okay and
whenever we click this button process
string button we want to call a function
on the scope
object so ng - click equals let's call
this transform string okay that's the
function that we want to call and to
that function we want to pass whatever
the end user enters into this text box
so let's pass the input now we have to
define this function on our scope object
within the controller so we are already
injecting the scope object so dollar
scope dot the name of the function is
going to be transform string so that is
going to be a function to that function
we will be passing the input from the UI
so this is where we want to implement
the logic to introduce that single space
character so the first thing that I'm
going to check is for truthiness if not
input so if the string that is present
in the textbox is null or empty then we
simply want to return that we don't want
to do any processing whatsoever if it is
not another empty that's when we want to
do something so the first thing that I
am going to do is create an variable
output which is going to hold our result
string with the spaces whenever you know
we detect a case change so now let's use
a for loop so far I equals 0 I less than
input dot length i plus plus so we are
looping through each character within
the string the user has entered now the
first thing that we are going to do is
skip the first letter so if I greater
than 0 so why do we want to skip the
first letter now if the first letter is
capital we don't want to introduce that
single space character in front of that
capital letter so we want to skip that
that's the reason why we are checking if
I greater than 0 and input of I is equal
to input of I dot I'm going to use to
uppercase JavaScript function and
convert that character at that index
position to uppercase and then compare
it to what we have in that string if
that is an uppercase letter then what we
want to do
within that output variable we want to
you know store that single space
character so output equals whatever we
already have in the output variable and
then introduce a single space character
if that condition is not true then what
we want to do simply continue appending
the characters that we have in the input
to the output variable so output equals
whatever we already have in the output
plus input of I take the character at
the index position and append that to
the output variable and then once we are
done looping through each character in
that string you now attach the output
property to the scope object and within
that property store whatever value we
have in our output variable so once we
attach that value to the output property
on the scope object that is the property
that we are using as the model for this
textbox so it will show they converted
string in the textbox so that's all
required so let's see where it changes
and reload this page let's type angular
video-tutorial their process string and
look at that it's doing what we want now
at the moment all the logic is within of
a controller function there are two
problems in doing so first the
controller code has become a bit complex
and it has become become a bit large
okay
the second problem is if we want to
reuse this logic within any of the
controller then we will have to
duplicate this code within that
controller the moment we start
duplicating code the maintainability of
the application is gone for a toss so
this is a preferred example for using a
service so we want to encapsulate all
this logic into its own service and
inject that service into any controller
where you need that okay so let's see
how to do that so the first thing to do
here is add another JavaScript file to a
project so I'm going to right click on
this scripts folder add a new item and I
want to add a JavaScript file and I'm
going to call this
String service so this is the javascript
file which is going to contain our
custom service the first thing that i'm
going to do here is drag-and-drop the
script dot JS file into this file so
that we get some intellisense all right
so within our script JS file we have a
module and the variable that's pointing
to it is app so I want that so we have
the module and on that we have the
factory method which we use to create a
custom service and register that with
angular so we use the factory method and
the first parameter for the factory
method is the name of the service so the
name of our custom service is going to
be string service and the second
parameter is an anonymous function so
this function is actually going to
return a JavaScript object remember in
the previous video session we discussed
that is service in angular is nothing
but a JavaScript object with some
properties and functions okay so usually
the service is an angular or stateless
okay now the service that we are going
to create here are not going to contain
any properties it's going to contain
just one function so first of all these
servers is going to return a JavaScript
object right and this object is going to
have just one function and that is going
to be process string and this function
is going to receive an input and you
know that's the input that we want to
convert with spaces whenever we detect a
case change so what I'm going to do now
is move all the logic that we have
within the controller into that function
okay so let's copy that
from here so I'm going to cut all this
from there and paste it right here so
the same logic once we are done looping
through and constructing our output
variable what we want to do is return
the output so all our logic is now
within this object so whatever you have
in this object that you are returning
that will be publicly available to
consume so wherever we use this service
you know this process string function
will be available now all that is left
is to inject the string service into any
controller that you need and call this
process string function let's look at
that in action now so notice here with
no control over here already injecting
the dollar scope object in addition to
that I'm going to inject our service
which is string service that's the name
of our service so we want to inject that
into our controller function and I'm
going to use that service and on that
service we have a function what is the
name of the function process string so
let's call that function and that
function has got one parameter and that
is the input parameter that we have to
pass so what is this function going to
do it's going to process that string and
whatever we get back it's initializing
that you know into this variable into
this property that we have on the scope
object alright so the last thing that is
left is to reference that string service
to our JS file on our HTML page one dot
HTML so just below the reference to
script or JS file I am going to drag and
drop this script service I mean string
service to rjs so let's save all our
changes and let's reload this page the
behavior now should be exactly identical
so angular video tutorial and we click
the button notice that we get exactly
the same behavior now if you look at our
controller right here look at that
it is clean and short now this service
is reusable you can use it in any
controller that you want just by
injecting that service and calling that
process string function so here we have
the controller all the logic is present
within the controller the controller is
complex and long whereas here we have
moved that reusable logic into its own
service called string service and then
we injected that service into the
controller way we need that logic and
then we are calling that process string
function on that service thank you for
listening and have a great day