Angular anchorscroll with database data Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 22 of angularjs tutorial in
our previous video we discussed using
angular anchor scroll servers with data
that is hard-coded on the web page in
this video we'll discuss using the
anchor scroll service with database data
let me explain what I mean in our sequel
server database we are going to have
these two tables the first table
contains three country names and the
second table contains the cities that
belong to these three countries look at
the country ID column for the first five
rows it's 1 so the first 5 cities they
belong to country India similarly we
have cities belonging to USA and UK so
we want to retrieve data from these two
tables and display it on the web page as
you can see here notice at the top of
the page we have three buttons one
button for each country and then here we
have a field set the legend for the
field set is the name of the country and
then within the field set we have an
unordered list which is displaying the
cities that belong to that country so on
this page we've got three field sets one
field set for each country at the moment
country India along with its cities is
visible now if we want to see country
USA then we have to use the scroll bar
and then scroll down to the page
similarly if you want to see the country
UK then we have to scroll a bit more
further down instead of manually
scrolling like that we want to use these
buttons so whenever I click on a button
we want the page to automatically scroll
to that country so all this data is
coming from the database tables so let's
see how to achieve this using anchor
scroll service the first step here is to
create these two database tables which I
have already done so here is the sequel
script to create those tables and
populate them with test data I will have
the script available on my blog in case
you need it
the next step is to create our asp.net
web application project I have done that
also and to this project I have added
this web tour config file within the web
config file we have a connection string
that is pointing to sample DB database
which contains our tables to this web
tour config file I'm going to add
another section
and this section is required because we
want to enable HTTP GET protocol for a
SMX web services because we are going to
use SMX web service to retrieve data
from the database
so within system dot web i am going to
include web services and under that
protocols and the protocol that we are
going to add is HTTP GET so this enables
HTTP GET for asp.net web service the
next step is to add two classes we have
got two tables country and cities so
within the country table we have ID and
name columns so we will have a country
class which will have ID and name
properties similarly we will have a city
class which contains ID name and country
ID properties so let's add a class file
to a project so I'm going to add a class
file let's name this city dot CS so the
city class is going to contain and
integer property let's name it ID this
is going to be auto implemented property
similarly we are going to have name and
Country ID the name property is going to
be of type string and country ID is of
type India so those are the three
properties of the city class I'm going
to add another class file let's name
this country dot CS country class is
also going to have ID name and this is
going to have another property and this
is going to be of type list of city and
I'm going to call this cities so this
property is going to contain all the
cities that belong to a given country
the next step is to add a web service
itself so let's right click on the
project add any item and the new item
that we want to add is a SMX web service
and let's call this country service dot
ASM x in the interest of time I've
already typed the required code for a
web service so let's copy and paste it
right here now within this web service
we have some ad ordinate code so that's
the reason why we have imported these ad
a.net namespaces system dot
configuration system data systems or
data dot sick little client and we are
also using javascript serializer class
within this web service to serialize the
data to json format and that JavaScript
serialize a class is present in this
namespace system dot web dot script or
serialization so the name of our web
service is country service and since we
want this web service to be called from
JavaScript we decorated with with script
service attribute since it's a web
service it inherits from web service
base class and within our web service we
have a single web method get data within
this method we have some radial or net
code which is retrieving data from the
database so first we are creating a
variable of type list of country so this
variable is going to contain all the
countries that we want to convert to J
and return so first we are reading the
connection string from web.config file
we are then using that connection string
and creating a sequel connection object
and then we are creating our sequel
command object look at the sequel
command object it has got two select
statements select star from TBL country
semicolon select star from TBL city and
then we are creating sequel data adapter
object and then the data set object and
then we are calling the fill method of
the data adapter object so at this point
it's going to open a connection to the
database execute these two sequel
statements retrieve the data and fill
that in the data set so by the time this
line executes within our data set we are
going to have two tables the first table
is for countries and the second table is
for cities so countries table is present
at index position 0 within the data set
and cities table is present at index
position 1 the next step here is to
create a data view and notice this data
view is based on CDs table because at
index position 1 we have the CDs table
now this default data view contains all
the rows from the CDs table and then we
are looping through each data row that
is present in the countries table at
index position 0 may have the countries
table so we are looping through each
data row that is present in the
countries table and then we are creating
the country object and if you look at
our country class it has got ID name and
cities properties so here we are
populating ID and name properties now we
need to populate cities property as well
now to populate cities property we first
have to build the list of cities that
belong to the given country so if we are
looping through let's say for example
India at the moment then we only want to
get Indian cities and then add them to
the city's collection and set that as
the value for cities property on the
country object so that's what we will be
doing next so here we are using the data
view so this is the data view that is
based on cities table so on that we are
applying it
no filter and we are saying give me all
country countries where country ID
equals whatever is the ID property value
of the country object so at the moment
if we are looping through India country
then the ID will be one so this data
view is only going to contain cities
that belong to India and then we are
creating a variable of type list of city
and we are looping through each data row
view that is present in this filtered
data view and then to get the underlying
data row that is present within the data
row view object we use the rule property
and then we are creating the city object
populating ID name country ID properties
and then adding that CTO object to this
list of cities and then finally once we
are done looping through all the cities
of a given country object we are setting
that as the value for the cities
property of the country object and
finally we are adding the country object
to list of countries so we have the list
of countries right here and then finally
we are creating an instance of Java
Script serializer class and serializing
the list of countries to JSON format so
let's quickly test a web service to make
sure it's doing what it is supposed to
do so now we should see get data method
and then the invoke it notice we get the
ID of the country the name of the
country and all the cities that belong
to that specific country all right so
now let's write our angular code to call
that web service so here within our
scripts folder we already have the
angular j/s script so let's add another
script file so I'm going to call this
script dot J s now we want intellisense
for angular so I am going to drag and
drop that there so we are going to
create a variable here I am going to
call this demo app equals let's use
angular dot module method going to
create a module let's name our module
demo app
and we don't have any dependencies so
I'm going to pass an empty array the
next step is to create our controller so
let's give our controller a meaningful
name I'm going to call it country
controller so this is going to be a
function and that the country controller
function is going to have four
parameters the first one is going to be
the dollars cop object the next one is
going to be dollar HTTP service and the
next one is going to be location service
and the final one is going to be anchor
scroll
service so the first thing that we want
to do here is use the HTTP service and
call the web service so I'm going to use
the get method and the name of a web
service is country service dot a SMX so
let's copy that from here and within our
country service we have a web method
with name get data so that's what we
want to call so if you a get request to
country service toward a SMX and the
name of the method is a get data so this
is going to give us a promise so we are
going to use dot then and as soon as the
request completes you know we are going
to get a response back and what we want
to do is attach a property to our scope
object and I'm going to call it
countries so countries equals whatever
we have in the response so set the data
as the value so our country's property
that we have attached to the scope
object so this countries will have the
data that we have retrieved from the
database we are going to do another
thing within our controller so I'm going
to attach a function to the scope object
I'm going to call this scroll to so this
is going to be a function and to this
function
let's pass the name of the country
country name and we're going to use the
location service and it has got hash
method so what does this hash method
going to do it's going to append that
country name to the URL okay with a
pound sign in front of that and then
when we call anchor scroll method anchor
scroll method will read that country
name from the URL and automatically
scroll to that location on the web page
we'll see that in action in just a bit
so that's our controller there now the
next step is to create some styles for
the data that we want to display on the
web page look at this the phone stylus
area the font size is extra large and we
have a border around the development
that is a heightened bit set for the
development as well which is surrounding
the field sets so let's apply those
styles so I'm going to add a style sheet
to a project so let's add a style sheet
and I'm going to call this Styles dot
CSS so font family is going to be area
so let's apply it on the body element
I'm going to create a style for the
development so first of all we want the
div to be displayed as a block and we
want font size to be extra large and we
want height to be 350 pixels width to be
400 pixels and we want a border of one
pixel solid black and we want a padding
of maybe 10 pixels and finally we want a
scrollbar
if the data within the div overflows we
want a scrollbar so overflow
why is scroll okay so those are that
styles we want and now all that is left
is to write the required HTML so I'm
going to drag and drop the angular
script and we want our JavaScript code
that we have written and the style sheet
itself okay so within our body section
so before we write any HTML here the
first thing that we want to do is at the
HTML element travel we want to specify
our ng app and what's the name of the
module that we have created it's demo
app so let's copy that and specify it
right there and we want our country
controller to be in charge of the body
section and if you remember the name of
the controller is country controller all
right so how do we want to display the
data first we want these patterns so
what I'm going to do here is actually
using span element and on the span
element I'm going to use ng repeat
directive so I'm going to loop through
each country in countries so where is
this countries coming from this is
coming from the scope object to remember
within our controller we are attaching a
property to the scope object which is
countries so that contains all the data
that we retrieved from the database so
we are looping through each country and
what do we want to do we want to create
a button and when we click the button
what do we want to do we want to call
this scroll to function and to this
function we have to pass the name of the
country right so we want to call that
scroll to function and look at this we
have access to the country that we are
currently looping over using this
variable and we are going to use the
name property of the country object and
then on the button itself what do we
want to do we want to display
the name of the country okay so that's
going to take care of displaying these
three buttons and let's give some break
between the button element and the field
sets so I'm going to include a break two
breaks in fact and then we are going to
include a development and inside the
development what do we want we want to
feel set so that's what will first
create so for the field set what do we
want to do we want to I mean we want a
field set for every country so we are
going to loop through again each country
so let's use ng-repeat directive again
and let's loop through each country and
let's give an ID for each of the fill
set and that the ID is going to be the
name of the country country dot name
okay so what is the legend that we want
within the field set the name of the
country so again we are going to use
country dot name and then once we have
the legend within the field set we want
an unordered list to display all the
cities that belong to the country so
let's create an unordered list and
within that we are going to create a
list item and on the list item we are
going to use the ng-repeat
so we want a list item for every city
within a given country so I'm going to
loop through each city so for each city
in country dot cities property has the
list of cities belonging to a given
country so what do we want to do we want
to display city dot name so that's all
there to it now let's run this page and
see if we get what we expect look at
that we get the data as we expect so
India USA UK at the moment we are
looking at India and look at the URL
right here we don't have anything on the
URL the moment we click this
button what is going to happen when we
click the button it's going to call
scroll to function and pass the name of
the country so when we pass the name of
the country what's happening is you know
this hash method is going to add that
country name to the end of the URL using
the hash symbol and then when this
anchor scroll method is called it's
going to scroll to that location to that
element with that ID and if you look at
what we are doing within the HTML notice
for the field set we have set the ID
also to the country name itself for
example when we click USA notice what
happens to the URL it appends hash USA
to the URL and keep in mind the ID of
this field set is also USA so when this
anchor scroll method is called it reads
the hash fragment that is USA we also
have an element with ID USA on the page
so it's automatically going to jump to
that element on the page so that's how
we are able to jump to any element by
simply clicking on the respective button
thank you for listening and have a great
day