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    lt a href    about  gt        but it seems ng-click would be useful here too    Is that assumption correct   That ng-click be used instead of anchor  If so  how would that work   IE      lt div ng-click   about  gt

User · Answer

Remember that if you use ng-click for routing you will not be able to right-click the element and choose  open in new tab  or ctrl clicking the link  I try to use ng-href when in comes to navigation  ng-click is better to use on buttons for operations or visual effects like collapse   But     About I would not recommend  If you change the route you might need to change in a lot of placed in the application  Have a method returning the link  ex  About  This method you place in a utility

User · Answer

Another solution but without using ng-click which still works even for other tags than  lt a gt     lt tr  routerLink      about    gt    This way you can also pass parameters to your route  https   stackoverflow com a 40045556 838494   This is my first day with angular  Gentle feedback is welcome

User · Answer

I used ng-click directive to call a function  while requesting route templateUrl  to decide which  lt div gt  has to be show or hide inside route templateUrl page or for different scenarios   AngularJS 1 6 9  Lets see an example  when in routing page  I need either the add  lt div gt  or the edit  lt div gt   which I control using the parent controller models  scope addProduct and  scope editProduct boolean   RoutingTesting html   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt title gt Testing lt  title gt  x000D       lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D       lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular-route min js  gt  lt  script gt  x000D       lt script gt  x000D          var app   angular module  MyApp     ngRoute     x000D   x000D          app config function  routeProvider   x000D               routeProvider x000D                   when   TestingPage     x000D                      templateUrl   TestingPage html  x000D                      x000D              x000D   x000D          app controller  HomeController   function  scope   location   x000D   x000D               scope init   function    x000D                   scope addProduct   false  x000D                   scope editProduct   false  x000D                x000D   x000D               scope productOperation   function operationType  productId   x000D                   scope addProduct   false  x000D                   scope editProduct   false  x000D   x000D                  if operationType      add    x000D                       scope addProduct   true  x000D                      console log  Add productOperation requested       x000D                   else if operationType      edit    x000D                       scope editProduct   true  x000D                      console log  Edit productOperation requested       productId   x000D                    x000D   x000D                                    VERY IMPORTANT NOTE                 x000D                    comment this  location path         line  when using  lt a gt  anchor tags  x000D                    only useful when  lt a gt  below given are commented  and using  lt input gt  controls x000D                   location path  TestingPage    x000D                 x000D   x000D              x000D       lt  script gt  x000D   lt  head gt  x000D   lt body ng-app  MyApp  ng-controller  HomeController  gt  x000D   x000D       lt div ng-init  init    gt  x000D   x000D           lt  -- Either use  lt a gt anchor tag or input type button -- gt  x000D   x000D           lt  -- lt a href    TestingPage  ng-click  productOperation  add   -1   gt Add Product lt  a gt -- gt  x000D           lt  -- lt br gt  lt br gt -- gt  x000D           lt  -- lt a href    TestingPage  ng-click  productOperation  edit   10   gt Edit Product lt  a gt -- gt  x000D   x000D           lt input type  button  ng-click  productOperation  add   -1   value  Add Product   gt  x000D           lt br gt  lt br gt  x000D           lt input type  button  ng-click  productOperation  edit   10   value  Edit Product   gt  x000D           lt pre gt addProduct     addProduct   lt  pre gt  x000D           lt pre gt editProduct     editProduct   lt  pre gt  x000D           lt ng-view gt  lt  ng-view gt  x000D   x000D       lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    TestingPage html   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt title gt Title lt  title gt  x000D       lt style gt  x000D           productOperation  x000D              position fixed  x000D              top  50   x000D              left  50   x000D              width 30em  x000D              height 18em  x000D              margin-left  -15em    set to a negative number 1 2 of your width   x000D              margin-top  -9em    set to a negative number 1 2 of your height   x000D              border  1px solid  ccc  x000D              background  yellow  x000D            x000D       lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  productOperation   gt  x000D   x000D       lt div ng-show  addProduct  gt  x000D           lt h2  gt Add Product enabled lt  h2 gt  x000D       lt  div gt  x000D   x000D       lt div ng-show  editProduct  gt  x000D           lt h2 gt Edit Product enabled lt  h2 gt  x000D       lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    both pages - RoutingTesting html parent   TestingPage html routing page  are in the same directory   Hope this will help someone

User · Answer

Here s a great tip that nobody mentioned   In the controller that the function is within  you need to include the location provider   app controller  SlideController      scope     location  function  scope   location     scope goNext   function  hash      location path hash               lt  --the code to call it from within the partial --- gt   lt div ng-click  goNext   page2    gt next page lt  div gt

User · Answer

You can use    lt a ng-href    about  gt About lt  a gt    If you want some dynamic variable inside href you can do like this way    lt a ng-href    link   123    gt Link to 123 lt  a gt    Where link is Angular scope variable

User · Answer

Routes monitor the  location service and respond to changes in URL  typically through the hash   To  activate  a route  you simply change the URL  The easiest way to do that is with anchor tags    lt a href    home  gt Go Home lt  a gt   lt a href    about  gt Go to About lt  a gt    Nothing more complicated is needed  If  however  you must do this from code  the proper way is by using the  location service    scope go   function   path        location path  path         Which  for example  a button could trigger    lt button ng-click  go   home    gt  lt  button gt

User · Answer

Using a custom attribute  implemented with a directive  is perhaps the cleanest way  Here s my version  based on  Josh and  sean s suggestions   angular module  mymodule           Click to navigate    similar to  lt a href    partial  gt  but hash is not required      e g   lt div click-link   partial  gt   directive  clickLink      location   function  location        return           link  function scope  element  attrs                element on  click   function                     scope  apply function                          location path attrs clickLink                                                              It has some useful features  but I m new to Angular so there s probably room for improvement

User · Answer

just do it as follows in your html write    lt button ng-click  going    gt goto lt  button gt    And in your controller  add  state as follows     controller  homeCTRL   function  scope     state        scope going   function      state go  your route

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

Examples related to angularjs

Examples related to routes

Examples related to angularjs-routing

Examples related to angularjs-ng-click

Examples related to angularjs-ng-route