0

Ok ребята я знаю, как сделать Угловая ngRoute используя <a> тег, теперь я хотел бы знать, если его возможно для меня, чтобы использовать <button> тег для навигации между ..Angular js - Можно ли маршрутизировать с помощью HTML-тега <button>?

позволяет сказать, что у меня есть следующий код.

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>

код выше показывает страницу HTML рабочий Код ниже, Что работает в моем уме, если я использую 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>

Кто-нибудь с солидным ответом? не спрашивайте меня, почему я хочу использовать <button> вместо этого, если <a>

ответ

2

Вы попробуйте использовать нг нажмите на кнопку, и имеют функцию на контроллере, чтобы изменить маршрут

Html

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

контроллер

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

Я обычно использую UI-маршрутизатор, я люблю это лучше, нг-маршрут

+0

Благодаря она работала отлично! (; - –

0

поставить кнопку тег внутри <a> он будет работать

<li><a href="#/cnt"><button>name</button></a>