CODEWITHSUNDEEP
angularjs
Jwan622
Jwan622

Reputation: 11639

angular link. What is # and what does it do?

I am working through the CA angular course. I had a question about this code:

<div class="main">
  <div class="container">

    <h2>Recent Photos</h2>
    <div class="row">
      <div class="item col-md-4" ng-repeat="photo in photos">
        <a href="#/photos/{{$index}}">
          <img class="img-responsive" ng-src="{{ photo.url }}">
          <p class="author">by {{ photo.author }}</p>
        </a>
      </div>
    </div>

  </div>
</div>

In the

So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?

Upvotes: 0

Views: 71

Answers (3)

S Vinesh
S Vinesh

Reputation: 539

Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page. I hope you have noticed using <a href="#"> for dummy urls too.

Upvotes: 1

eroak
eroak

Reputation: 1045

The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.

If you look your url you will see a hash # followed by /photos/{{$index}}

How to deal with Hash in AngularJS ?

In AngularJS, you can use the $location service to manage url

The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.

https://docs.angularjs.org/guide/$location

Upvotes: 2

mikeswright49
mikeswright49

Reputation: 3416

# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.

Upvotes: 1

Related Questions