1

In the Component Template section of this angular tutorial, they use the following code: 

...
<ul class="phones">
  <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
    <a href="#/phones/{{phone.id}}" class="thumb">
      <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
    </a>
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
</ul>
...

In the anchor tag they use following value for href "#/phones/{{phone.id}}". As far as I know href="#" would jump to the top of page on click. And href="#mydiv" would jump to the element with id mydiv.

I've never seen something like href="#/folder1/myimg.jpg". Is it equivalent to href="/folder1/myimg.jpg"?

user31782
  • 7,087
  • 14
  • 68
  • 143
  • 2
    Hash component of the URL is not eligable to sent to the server, so its changes doesn't affect to page reload. Angular uses that fact to build its SPA framework. – Hamlet Hakobyan Jul 18 '16 at 11:32

2 Answers2

1

Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

However, if there is no id or name then it goes "no where."

for more info you can see ... What is href="#" and why is it used?

But in angularJS it is used for routing the request ... as angularJS provide very good support to built Single Page Application .. the parameter after # used to find out proper page to render ....

here is a nice example .. but you need time to understand it in depth ..

Community
  • 1
  • 1
Moumit
  • 8,314
  • 9
  • 55
  • 59
0

It seems like all anchor events will be interrupted by javascript and perhaps page will be loaded on background using ajax and browser's address line will change but it will not be cause for browser to reload the page. In HTML4 it was unable to change address line without reloading the page. So It's kind of workaround to:

  1. Specify which page should be loaded by js.
  2. Give the user ability to refer to specific page in future or share it.
frist
  • 1,918
  • 12
  • 25