Search code examples
angularjsangular-ngmodelng-viewangularjs-ng-route

Is it possible to route using HTML tag <button>?

I know how to do Angular ngRoute using <a> tag. I would like to know if it's also possible for me to use <button> tag to navigate between <ng-view>. Let's say I have the following code:

app.js & index.html

var app = angular.module('test', ['ngRoute']);

app.config(function($routeProvider) {
  // mapping contacts.html to path /cnt
  $routeProvider.when('/cnt', {
    templateUrl: "https://www.google.co.za/", // the file to be mapped to
    controller: "cctrl" // including the controller for that file
  });
  // mapping student.html to path /std
  $routeProvider.when('/std', { // mapping url
    templateUrl: "https://www.facebook.com", // the file to be mapped to
    controller: "sctrl" // including the controller for that file
  });
});

// creating a controller name cctrl
app.controller('cctrl', function($scope) {

});
// creating a controller name sctrl
app.controller('sctrl', function($scope) {

});
 ul.zzz{
                list-style: none;
                width: 100%;
                margin: 10px auto;
            }
            ul.zzz li{
                float: left;
                padding: 10px;
            }
            
            .mainContent ng-view{
               margin: 0;
            }
<html ng-app="test">

<head>
  <title>Angular Test</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>

</head>

<body>
  <div>
    <ul class="zzz">
      <li><a href="#/std">Student</a>
      </li>
      <li><a href="#/cnt">Contacts</a>
      </li>
    </ul>
    <br/>
  </div>
  <div class="mainContent">
    <ng-view>

    </ng-view>
  </div>
</body>

</html>

the code above shows the working html page the code below is whats running in my mind if i use button

<button name="gotoPage2" ng-click="gotoNext()">Next</button>

<script>
  var app = angular.module('test',[ngRoute]);
  
  app.config(function($routeProvider){
    $routeProvider.when('button with a name gotoPage2 is click',{
    
      templateUrl:'page2.html'
    })
  });
  
  // or
  
  app.controller('controllerName', function($scope){
  
    $scope.gotoNext = function(){
          app.config(function($routeProvider){
          $routeProvider.when('button with a name gotoPage2 is click',
                              {templateUrl:'page2.html'}
                             )
            });
    };
  });
  </script>

Solution

  • Have you try using ng-click on the button and have a function on the controller to change the route

    Html

    <button ng-click="changeRoute({view})">Text</button>

    Controller

    ...
$scope.changeRoute(view){
    $location.path(view);
}
...

    I usually use ui-router, i like it better then ng-route