Part 21 AngularJS anchorscroll example

  • $anchorscroll service is used to jump to a specified element on the page
  • $location service hash method appends hash fragments to the URL
  • $anchorscroll() method reads the hash fragment in the URL and jumps to that element on the page
  • yOffset property specifies the vertical scroll-offset
Example : HtmlPage1.html
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">

<head>

    <title></title>

    <script src="Scripts/angular.js"></script>

    <script src="Scripts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-controller="demoController">

    <button id="top" ng-click="scrollTo('bottom')">

        Go to bottom of the page

    </button>

    <br /><br />

    <div>

        <b>What is AngularJS</b>

        <br />

        AngularJS is a JavaScript framework that helps build applications that run in a web browser.

        <br /><br />

        <b>Who developed AngularJS</b>

        <br />

        Google is the company that developed AngularJS. AngularJS is an open source project, which means it can be be freely used, changed, and shared by anyone.

        <br /><br />

        AngularJS is an excellent framework for building both Single Page Applications (SPA) and Line of Business Applications. Many companies are using Angular today, and there are many public facing web sites that are built with angular.

        <br /><br />

        There is a website, https://www.madewithangular.com, that has the list of web sites that are built using AngularJS. Within this list you can find many popular websites.

        <br /><br />

        <b>What are the benefits of using AngularJS</b>

        <br />

        <b>1. Dependency Injection : </b>Dependency Injection is something AngularJS does quite well. If you are new to Dependency Injection, don't worry, we will discuss it in detail with examples in a later video.

        <br /><br />

        <b>2. Two Way Data-Binding : </b>One of the most useful feature in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

        <br /><br />

        <b>3. Testing : </b>Testing is an area where Angular really shines. Angular is designed with testing in mind right from the start. Angular makes it very easy to test any of it's components through both unit testing and end to end testing. So there's really no excuse for not testing any of your angular application code.

        <br /><br />

        <b>4. Model View Controller : </b>With angular it is very easy to develop applications in a clean MVC way. All you have to do is split your application code into MVC components. The rest, that is managing those components and connecting them together is done by angular.

        <br /><br />

        <b>5. Many more benefits like controlling the behaviour of DOM elements using directives and the flexibility that angular filters provide.</b>

        <br /><br />

        We will discuss directives, filters, Modules, Routes etc with examples in our upcoming videos in this series.

        <br /><br />

        To build angular applications you only need one script file and that is angular.js.

        <br /><br />

        <b>To get the script file visit https://angularjs.org. From here</b>

        <br />

        1. You can download the angular script file<br />

        2. CDN link - We discussed the benefits of using CDN in Part 3 of jQuery tutorial.<br/>

        3. Various resources to learn angular - Here you will find videos, Free courses, Tutorials and Case Studies. You will also find API reference which is extremeley useful.<br/>

        <br /><br />

        <b>To get started with angular</b>

        <br />

        1. Add a reference to the angular script

        <br />

        2. Include ng-app attribute

        <br /><br />

        <b>What is ng-app</b>

        <br />

        In angular, ng-app is called a directive. There are many directives in angular. You can find the complete list of directives on https://angularjs.org. The ng prefix in the directive stands for angular. The ng-app directive is a starting point of AngularJS Application. Angular framework will first check for ng-app directive in an HTML page after the entire page is loaded. If ng-app directive is found, angular bootstraps itself and starts to manage the section of the page that has the ng-app directive.

        <br /><br />

        <b>So the obvious next question is, where to place the ng-app directive on the page</b>

        <br /><br />

        It should be placed at the root of the HTML document, that is at the html tag level or at the body tag level, so that angular can control the entire page.

        <br /><br />

        However, there is nothing stopping you from placing it on any other HTML element with in the page. When you do this only that element and it's children are managed by angular.

        <br /><br />

        <span>Double curly braces are called binding expressions in angular.</span>

    </div>

    <br />

    <button id="bottom" ng-click="scrollTo('top')">

        Go to top of the page

    </button>

</body>

</html>
Script.js
/// <reference path="angular.js" />

var demoApp = angular.module("demoApp", [])

                     .controller("demoController", function

                         ($scope, $location, $anchorScroll) {

                         $scope.scrollTo = function (scrollLocation) {

                             $location.hash(scrollLocation);

                             $anchorScroll.yOffset = 20;

                             $anchorScroll();

                         }

                     });
Styles.css
div {

    width: 400px;

    border: 1px solid black;

    font-family: Arial;

    font-size: large;

    padding: 5px;

}

 Part 22 Angular anchorscroll with database data 

In Part 21 we discussed using anchorscroll service with hardcoded data. In this video we will discuss using angular anchorscroll service with database data. 
So here is what we want to do. Retrieve the countries and cities data from respective tables in the SQL server database and display it on the web page. When we click on a country button, the page should automatically scroll to the respective country and it's cities. 


Step 1 : Create SQL Server tables and insert data 

Create Table tblCountry

(

    Id int primary key identity,

    Name nvarchar(50)

)

Go

Insert into tblCountry values ('India')

Insert into tblCountry values ('USA')

Insert into tblCountry values ('UK')

Go

Create Table tblCity

(

    Id int primary key identity,

    Name nvarchar(50),

    CountryId int foreign key references tblCountry(Id)

)

Go

Insert into tblCity values ('Mumbai', 1)

Insert into tblCity values ('Delhi', 1)

Insert into tblCity values ('Bangalore', 1)

Insert into tblCity values ('Chennai', 1)

Insert into tblCity values ('Hyderabad', 1)

Insert into tblCity values ('New York', 2)

Insert into tblCity values ('Los Angeles', 2)

Insert into tblCity values ('Chicago', 2)

Insert into tblCity values ('Houston', 2)

Insert into tblCity values ('Philadelphia', 2)

Insert into tblCity values ('London', 3)

Insert into tblCity values ('Birmingham', 3)

Insert into tblCity values ('Coventry', 3)

Insert into tblCity values ('Liverpool', 3)

Insert into tblCity values ('Manchester', 3)

Go

create data

Step 2 : Create new empty asp.net web application project. Name it Demo. 

Step 3 : Include the following settings in web.config file.

<?xml version="1.0" encoding="utf-8"?>

<configuration>

  <connectionStrings>

    <add name="DBCS"

         connectionString="server=.;database=SampleDB; integrated security=SSPI"/>

  </connectionStrings>

  <system.web>

    <webServices>

      <protocols>

        <add name="HttpGet"/>

      </protocols>

    </webServices>

  </system.web>

</configuration>

Step 4 : Add a class file to the project. Name it City.cs. Copy and paste the following code.

namespace Demo

{

    public class City

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public int CountryId { get; set; }

    }

}

Step 5 : Add a class file to the project. Name it Country.cs. Copy and paste the following code.

using System.Collections.Generic;

namespace Demo

{

    public class Country

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public List<City> Cities { get; set; }

    }

}

Step 6 : Add a new WebService (ASMX). Name it CountryService.asmx. Copy and paste the following code.

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Web.Script.Serialization;

using System.Web.Services;

namespace Demo

{

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [System.ComponentModel.ToolboxItem(false)]

    [System.Web.Script.Services.ScriptService]

    public class CountryService : System.Web.Services.WebService

    {

        [WebMethod]

        public void GetData()

        {

            List<Country> listCountries = new List<Country>();

            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

            using (SqlConnection con = new SqlConnection(cs))

            {

                SqlCommand cmd = new SqlCommand("Select * from tblCountry;Select * from tblCity", con);

                SqlDataAdapter da = new SqlDataAdapter(cmd);

                DataSet ds = new DataSet();

                da.Fill(ds);

                DataView dataView = new DataView(ds.Tables[1]);

                foreach (DataRow countryDataRow in ds.Tables[0].Rows)

                {

                    Country country = new Country();

                    country.Id = Convert.ToInt32(countryDataRow["Id"]);

                    country.Name = countryDataRow["Name"].ToString();

                    dataView.RowFilter = "CountryId = '" + country.Id + "'";

                    List<City> listCities = new List<City>();

                    foreach (DataRowView cityDataRowView in dataView)

                    {

                        DataRow cityDataRow = cityDataRowView.Row;

                        City city = new City();

                        city.Id = Convert.ToInt32(cityDataRow["Id"]);

                        city.Name = cityDataRow["Name"].ToString();

                        city.CountryId = Convert.ToInt32(cityDataRow["CountryId"]);

                        listCities.Add(city);

                    }

                    country.Cities = listCities;

                    listCountries.Add(country);

                }

            }

            JavaScriptSerializer js = new JavaScriptSerializer();

            Context.Response.Write(js.Serialize(listCountries));

        }

    }

}

WebService code

Step 7 : Add a new folder to the project. Name it Scripts. Add a new JavaScript file to the Scripts folder. Name it Script.js. Copy and paste the following code.

/// <reference path="angular.js" />

var demoApp = angular.module("demoApp", [])

                     .controller("countryController",

                        function ($scope, $location, $anchorScroll, $http) {

                         $http.get("CountryService.asmx/GetData")

                              .then(function (response) {

                                  $scope.countries = response.data;

                              });

                         $scope.scrollTo = function (countryName) {

                             $location.hash(countryName);

                             $anchorScroll();

                         }

                     });

Step 8 : Add a new stylesheet to the project. Name it Styles.css. Copy and paste the following styles in it. 

body {

    font-family: Arial;

}

div {

    display: block;

    font-size: xx-large;

    height: 350px;

    width: 400px;

    border: 1px solid black;

    padding: 10px;

    overflow-y: scroll;

}

Step 9 : Add an HTML page to the ASP.NET project. Copy and paste the following HTML and Angular code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">

<head>

    <title></title>

    <script src="Scripts/angular.js"></script>

    <script src="Scripts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-controller="countryController">

    <span ng-repeat="country in countries">

        <button ng-click="scrollTo(country.Name)">{{country.Name}}</button>

    </span>

    <br /><br />

    <div class="containerDiv">

        <fieldset ng-repeat="country in countries" id="{{country.Name}}">

            <legend>{{country.Name}}</legend>

            <ul>

                <li ng-repeat="city in country.Cities">

                    {{city.Name}}

                </li>

            </ul>

        </fieldset>

    </div>

</body>

</html>

Part 21 to 22 AngularJS anchorscroll的更多相关文章

  1. 记一次metasploitable2内网渗透之21，22，23，25端口爆破

    Hydra是一款非常强大的暴力破解工具,它是由著名的黑客组织THC开发的一款开源暴力破解工具.Hydra是一个验证性质的工具,主要目的是:展示安全研究人员从远程获取一个系统认证权限. 目前该工具支持以 ...

  2. SICP 1.21 1.22 体会

    1.21 简单的将书上代码敲了一遍. 非常顺利就过了. 1.22 就悲剧了. 先按书本的意思.代码非常快就写完了.但计算的时间在机子上漂浮不定. 3-5倍之间. 代码例如以下: (define (se ...

  3. 2-1赋值运算符 & 2-2自增自减运算符 &2-3

    2-1赋值运算符 先定义一个变量,把定义好的变量在赋值给另外一个变量.变向之间的互相赋值 2-2自增自减运算符 元素符,放在变量前和变量后的区别 先进行自增运算,再进行赋值运算.这里先进行num1的+ ...

  4. 端口渗透·网站渗透过程 --21 ，22，873，3306，6379，8080（8080端口是针对CMS的渗透）

    声明:文章渗透网站为模拟环境,文章只为利用过程 文章为信息收集和端口渗透两部分,21端口为ftp版本漏洞 8080端口为CMS的渗透 信息收集: ·使用扫描工具nmap ,PortScan 对整个网段 ...

  5. 例题 2-1 aabb 2-2 3n+1问题

    例题2-1  aabb 输出全部形如aabb的四位全然平方数(即前两位数字相等,后两位数字也相等) #include <stdio.h> #include <stdlib.h> ...

  6. AngularJs $anchorScroll、$controller、$document

    $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过 ...

  7. Python之旅.第二章数据类型 3.19/3.20/3.21/3.22/3.23

    一.数字类型 1.int类型: 基本使用: 用途:用于年龄,手机号,身份证号: 定义: age=18: 常用操作+内置方法: 正常的运算赋值: 进制转换: print(bin(3)); 把十进制3转换 ...

  8. 记录21.07.22 —— Vue.js基础（一）

    VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...

  9. AngularJS 模态对话框

    本文内容 项目结构 运行结果 index.html mymodal.js 参考资料 本文讲解 Angular JS 实现模式对话框.基于 AngularJS v1.5.3.Bootstrap v3.3 ...

随机推荐

  1. Erase-Remove 惯用法

    看到<Effective STL>条款 9 的时候想到了我以前复习的"如何正确使用迭代器删除元素",我面试时使用的也是里面的方法,看面试官的反应好像也没有什么问题,还问 ...

  2. ❤️【Python从入门到精通】（二十六）用Python的PIL库（Pillow）处理图像真的得心应手❤️

    您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本篇重点介绍Python处理图像的标准库PIL库,处理图像真的的很方便. 干货满满,建议收藏,需要用到时常看看. 小伙伴们如有问题及需要,欢迎踊跃 ...

  3. 飞猪基于 Serverless 的云+端实践与思考

    作者 | 王恒飞(承荫) 本文整理自飞猪旅行前端技术专家--王恒飞(承荫)在[阿里云 Serverless Developer Meetup 上海站]上的分享.点击查看直播回放:https://dev ...

  4. 前段---css

    css主要是用来做如何显示html元素的 当浏览器读到一个样式表,它就会按照这个样式表来对文档做渲染 注意:每一个css样式表都是由两个部分组成的, 1,选择器 2,声明 声明又包括属性值和属性,每个 ...

  5. Python 3.10 正式发布，新增模式匹配，同事用了直呼真香！

    关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 前几天,也就是 10 月 4 日,Python 发布了 3.10.0 版本,什么?3.9 之后居 ...

  6. Java（8）详解Random使用

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201556.html 博客主页:https://www.cnblogs.com/testero ...

  7. 【UE4 C++ 基础知识】<10>资源的引用

    2种引用方式 硬引用(Hard Reference) 即对象 A 引用对象 B,并导致对象 B 在对象 A 加载时加载 硬引用过多会导致运行时很多暂时用不到的资源也被加载到内存中 大量资源会导致进程阻 ...

  8. 通过Nacos动态刷新Spring Cloud Gateway的路由

    通过Nacos动态刷新Spring Cloud Gateway的路由 一.背景 二.解决方案 三.实现功能 四.实现步骤 1.网关服务的实现 1.pom文件 2.bootstrap.yml配置文件 3 ...

  9. 扩展spring data jpa的repository

    在我们编写代码的过程中,spring data jpa为我们的持久层提供的极大的方便,但有时spring data jpa提供的repository并不能完全满足我们开发的需求,因此就需要进行扩展.s ...

  10. CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框

    本文将通过一个实际的业务需求,讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题: 在文字展示的时候,利用了 font-weig ...