How/when to use ng-click to call a route?

Question

Suppose you are using routes:

// bootstrap 

myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 

      $routeProvider.when('/home', { 

         templateUrl: 'partials/home.html', 

          controller: 'HomeCtrl' 

      }); 

      $routeProvider.when('/about', { 

           templateUrl: 'partials/about.html', 

           controller: 'AboutCtrl' 

     }); 

 ...

And in your HTML, you want to navigate to the about page when a button is clicked. One way would be

<a href="#/about">

 but it seems ng-click would be useful here too.

1. Is that assumption correct? That ng-click be used instead of anchor?

2. If so, how would that work? IE:

<div ng-click="/about">

Answer 1

You can use ng-click to call a route then routes monitor the $location service and respond to changes in URL. To "activate" a route, you simply change the URL. The easiest way to do that is with anchor tags see the code as follows:-

<a href="#/home">Go Home</a> 

<a href="#/about">Go to About</a>

The proper way is by using the $location service:-

$scope.go = function ( path ) { 

  $location.path( path ); 

};

It can be triggered by the below-mentioned code:-

<button ng-click="go('/home')"></button>