Suggested Videos
Part 18 - $http service in AngularJS
Part 19 - AngularJS Services
Part 20 - Create custom service in AngularJS
In this video we will discuss $anchorscroll service with an example
Part 18 - $http service in AngularJS
Part 19 - AngularJS Services
Part 20 - Create custom service in AngularJS
In this video we will discuss $anchorscroll service with an 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;
}
Great job sir! Sir could you please upload one video on how to create token based authentication on web api.
ReplyDeleteThank you so much sir, sir please upload the web api with mvc.
ReplyDeletehi Venkat sir,
ReplyDeleteI need u r help sir,
Maintain filter rows of Data Grid after sorting in c#.I want sort based on the columns.After filter it has to maintain that filter rows.Give any solution to these scenario.thank u sir.
Hi prof,
ReplyDeletei followed your way of removing the # from url and it worked fine but if i refresh the page it gives me blank and error(cannot get home)
everytime i have to go back and forth to make it work and i cant refresh the page,, why is that?please
Hi Sir,
ReplyDeleteThank you for Knowledge Sharing,
In this article21 ng-app is missed.
Ng-app is on top html tag.
Deletehtml xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"
I try this code for html page and it work properly , But in .aspx page case it not work. it goes on original stage like post.
ReplyDeletePlease help me.
Couple of thing needs to be remembered.
DeleteFor this case, you should not use a server control and it has runat property which would post the page to sever and it will reload to it original state after going to bottom.top for few milliseconds.
2nd, you should not put your html button control in any server control since it will again do a post back to server.
3rd, Angular does work with server controls but they will also do a post back as well.