Would you like to add a fragment identifier that directs the user to a particular section of your page? This blog article will show you how to add these to pages served via AngularJS Web UI.
A fragment identifier, is a short string of characters that refers to a resource that is subordinate to another primary resource.
Normally, when adding a fragment identifier to your anchor, you would write HTML code that maps the section of the page using the attribute such as href=”#FRAGMENT_IDENTIFIER” to the correct element with id=”FRAGMENT_IDENTIFIER”. For more information on this method, go to:
http://www.w3schools.com/html/html_links.asp
Thrinacia Web UI uses AngularJS, a JavaScript framework made by Google, for the front-end of the website. It is commonly known that AngularJS does not handle the fragment identifiers in the traditional way due to it’s routing, as shown from links below:
http://stackoverflow.com/questions/14026537/anchor-links-in-angularjs
http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs
So how do I add a fragment identifier to my web page?
If you would like the fragment identifier to direct the user to a particular section of your Thrinacia Web UI page, do the following:
For the first HTML element that the user clicks on, add the following attribute:
scroll-to=”FRAGMENT_IDENTIFIER”
For the second HTML element that the user is directed to, add the following attribute:
id=”FRAGMENT_IDENTIFIER”
Here is an example:
Notice there is no # at the beginning of the element id.
You do not need to use the h2 tag, you can add the attribute id to any HTML tag that you would like the page to scroll to. Scroll-to is a special custom directive which we added into Thrinacia Core Web UI so that fragment identifiers will work accordingly.