JavaScript - Simple Anchor Scroll Using AngularJS
Submitted by razormist on Friday, January 4, 2019 - 21:35.
Language
In this tutorial we will create a Simple Anchor Scroll Using AngularJS. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template.
There you have it we successfully created a Simple Anchor Scroll Using AngularJS. I hope that this very simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!
Getting started:
First you will need to download & install the AngularJS here's the link https://angularjs.org/.Creating the Main Interface
This code contains the interface of the application. This code will render application and display the form. To do that just kindly write these block of code inside the text editor and save this as index.html.- <!DOCTYPE html>
- <html lang="en" ng-app="apps">
- <head>
- <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
- </head>
- <body ng-controller="controller">
- <nav class="navbar navbar-default">
- <div class="container-fluid">
- </div>
- </nav>
- <div class="col-md-6 well">
- <hr style="border-top:1px dotted;"/>
- <div>
- <p>AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.</p>
- <p>AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?</p>
- <ul>
- </ul>
- <p>AngularJS is not a single piece in the overall puzzle of building the client-side of a web application. It handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a well-defined structure. This makes AngularJS opinionated about how a CRUD (Create, Read, Update, Delete) application should be built. But while it is opinionated, it also tries to make sure that its opinion is just a starting point you can easily change. AngularJS comes with the following out-of-the-box:</p>
- <ul>
- </ul>
- </div>
- <br />
- </div>
- </body>
- </html>
Creating the Script
This code contains the main function of the application. This code will automatically jump to the target page container without scrolling. To that just kindly copy and write these block of codes inside the text editor, then save it as script.js- var apps = angular.module("apps", [])
- .controller("controller", function($scope, $location, $anchorScroll){
- $scope.scrollTo = function (scrollTarget){
- $location.hash(scrollTarget);
- $anchorScroll();
- }
- });
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Add new comment
- 158 views