Introduction

Hello Everyone!

Today I am here to tell you about AngularJS timeout service. As it is clear from the name that it will deals with the time. This service work is based on some time driven periods. So for making my goal real I need some tools for AngularJS timeout service. What do I need then? I need a HTML page because we all know AngularJS works in HTML. We need javascript to control AngularJS directives. We needed AngularJS library source to handle our text.

Before going  on further details I wanted to tell you the steps which we need to follow.

Outlines

  • New Project
  • Important Points
  • AngularJS Library Source
  • JavaScript
  • HTML Code for AngularJS timeout service
  • AngularJS Timeout Service Code
  • Images
  • Precautions
  • Conclusion

Description

There points tells us what we needed for our project. On the basis of these points we shall work to make our goal.

New Project

As you all know We need to make a new project. If you don’t know how to make new project do visit my previous lecture “AngularJS Development – Hello Word“.

Important Points

  • ng-app

It is the main directive required for every app of AngularJS. I described it in previous lecture “AngularJS Development – Hello Word“. Do visit them.

  • ng-controller

It is also defined in previous lecture “Controller directive in AngularJS with scope inheritance“. The controller which controller the module of javascript.

  • $scope

It is a predefined object of AngularJS as I explained it in my previous lecture “Controller directive in AngularJS with scope inheritance“. Do visit it.

  • JavaScript

As you know AngularJS is the library of javascript. So It requires so script to handle it’s code. It contains a module and a controller function for controlling this module. Inside the controller function a new function containing the logic. $scope will be passed in this function for writing the logic.

  • $timeout

It is basically a service which works on time driven period. It helps you to show running time.

Description

These above are the important points which you should know before handling AngularJS timeout service. This all we needed in our code to make it run.

AngularJS Library Source

As you know we need AngularJS library source in every AngularJS app to make it work properly. So The below script is the source of AngularJS library to make AngularJS timeout service work.

Description

This script must be added in the header so that the could can get the source and work properly. If you don’t add this the code will not work at all.

 JavaScript

The below code is the script required of AngularJS timeout service implementation.

Description

So what do we have here? The above code is showing the javascript containing a module. I named my module as “mymodule“.I placed the module inside a variable as per the same name of the module. Now as you know I needed a predefined controller function to handle my module. I named my controller function as “x“. You can give names what ever you like to but remember these names while reusing them.

Now inside the function I created another function and passed $scope object init. Now I am able to write my logic in this function.

Look closer I placed $timeout with $scope. After that I made a property with the help of $scope and initialized it with zero “0“. Inside the same controller I made a function in which I am incrementing the “seconds” property with “+=10“. Every time I am going to call up my counter function with 10 seconds of time interval.

The logic of this $timeout service is that it will take the function we need to call with the interval “10”. Every time after this interval it will call again and again this function. To initialize the startup counting the same property outside the function.

HTML Code for AngularJS filter Object

As you all know AngularJS only works inside the HTML file. So we needed the HTML for AngularJS timeout service. The required HTML code is shown below.

Description

This is a simple HTML page needed for AngularJS timeout service. As you can see I placed a div tang inside the body tag. Then I placed a form tag inside the div tag. I placed a div tag which contains a span tag inside the form. This simple structure will help us to implement AngularJS timeout service code.

AngularJS Timeout Service Code

The below code is the complete implementation of AngularJS timeout service.

Description

As you see in the above code, I placed the AngularJS library source in the head of HTML file. Then I placed my javascript in it which will control my functions of AngularJS timeout service. Now take a closer look, I applied ng-app directive on the body to make it the owner of AngularJS timeout service code and I passed the name of the module to make a bond.

In the div tag I applied ng-controller directive and placed the name of the controller function in it as “x” because it is to be controlled by it. The span tag inside the form contains a simple expression calling the property “seconds”. Now just run this AngularJS timeout service into the browser.

Images

The following picture will show you what we were doing so far for AngularJS timeout service.

AngularJS timeout service

AngularJS timeout service

As you see in both the pictures that seconds are running to fast after every interval of time. This is the AngularJS timeout service browser view. This is how it works.

Precautions

Always place the script tag of source of AngularJS. Must define the ng-app directive. Always place “;” at the end of every statement inside the script. Be careful with the names you provide, they are care sensitive.

Conclusion

So We learned the use of services of AngularJS. AngularJS timeout service is used to see the counter time. If you have any problem or if something is missing do comment us. AngularJS filter service is not restricted to do filter only. I can do more tasks also.