单击按钮时的AngularJS路由不起作用

Question

我一直在尝试制作一个angularjs应用程序，我希望在单击按钮时将其路由到另一个html页面。 但是由于某些未知原因而无法正常工作。

我的html代码

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
     <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
     <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-controller="Controller">
<h1>Plunkr Example</h1>
  <button ng-click="changeview()">ClickMe</button>
  <h1>MainPage</h1>
</body>
</html>

我的密码

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

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/Details', {
            templateUrl: 'details.html'
        }).
        when('/Main', {
             templateUrl: 'main.html'
         }).
        otherwise({
            redirectTo: '/Main'
        });
  }]);

app.controller("Controller", function($scope,$routeParams,$location){
  //$scope.ProductId = $routeParams.id;
  $scope.changeview = function () {
        console.log('in function changeview');
        $location.path('/Details');
    }
})

这是我的朋克

请帮忙。

Answer 1

您错过了添加ng-view指令的机会。 需要包含它以便路由能够呈现模板

<div ng-view></div>

工作塞

Answer 2

您需要在index.html中具有ng-view指令

 <div class="viewWrapper">
        <div ng-view></div>
</div>

工作演示

单击按钮时的AngularJS路由不起作用

问题描述

2 个解决方案

解决方案1
3 2018-05-16 17:50:27

解决方案2
2 已采纳 2018-05-16 17:52:54

单击按钮时的AngularJS路由不起作用

问题描述

2 个解决方案

解决方案1 3 2018-05-16 17:50:27

解决方案2 2 已采纳 2018-05-16 17:52:54

解决方案1
3 2018-05-16 17:50:27

解决方案2
2 已采纳 2018-05-16 17:52:54