Introduction

Hello Everyone!!

Today I am here to tell you about the use of AngularJS location service with the use of anchorScroll service. These predefined objects are normally used in single page applications. In which we need to scroll down for reading full details provided.

Outlines

  • New Project
  • Important Points
  • AngularJS Library Source
  • JavaScript
  • CSS Style
  • HTML Code for AngularJS Location service
  • AngularJS Location 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.

  • CSS

This programming language, used to give design. The view of any web page is designed by this language. It makes the page friendly.

  • $location

$location is helping to find the location on browser page. We use it when our application needs to react to a change in the current URL or if we want to change the current URL in the browser. It takes Us where we wanted to go.

  • $anchorScroll

It gives the scroller to the page. You can do scrolling when you wanted to go up/down. It is predefined object of AngularJS. It helps in the use of $location.

  • Hash Routing

Basically hash is a predefined function of javascript. It takes the ID of another location and mover towards that ID when it is clicked.

  • ng-click

It is also defined in previous lecture AngularJS click-init-blur directives useDo visit it.

Description

These above are the important points which you should know before handling AngularJS location 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 location 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 location 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.

Inside My controller I made another function and passed three predefined objects init. The $scope, which is well known to us and the other two are $location and $anchorScroll. They both are used together normally. The $location helps to find out the location of some this on our page while $anchorScroll take us to that location.

Now inside the logic portion there are two functions “GoDown” and “GoUp“. In these functions I concatenated My hash function with $location and passed the ID’s of the anchor tags. Basically they are carries the locations of the different places.

 

HTML Code for AngularJS Location Object

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

Description

This is the CSS style We will use to make the required looks of the page. I applied the style on ID, which is basically the property of the HTML tags.

HTML Code for AngularJS Location Object

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

Description

This is a simple HTML page. It contain a div tag. In side the div tag there are two div tags containing anchor tags. These tags contain the ID property . The simple statements are written inside the anchor tags.

AngularJS Location Service Code

The below code is the complete implementation of AngularJS location service. Take a closer look.

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. The additional this, I placed CSS style in the head portion also.

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. Inside the anchor tag I placed ng-click directive which contains my functions present in javascript. I also placed a property ID and assigned a value to it. These values I used in the function to define the location.

 

Images

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

AngularJS location

In the above image you can see the first statement of the first anchor tag and the scroll at the right side. When we click the statement it will take us directly to the other location the the same page. Take a look to the below image.

AngularJS location

In this image you can see the second statement and the stroller is at the bottom. It came at the bottom when I clicked the upper statement

 

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 what We learned today? We learned the use of AngularJS location service with the help of anchorScroll service. We learned how to use these objects in a single webpage. If some thing is missing or you didn’t understand, to comment us.