Routing Demo stops working when updated to AngularJS 1.6

眉间皱痕 提交于 2019-12-25 03:16:31

问题


When I updated the code snippet from this answer to use AngularJS 1.6, it stopped working.

The Login and Register links no longer change the view.

The DEMO

var app = angular.module("myApp", ["ngRoute"])
app.config(function($routeProvider) {
  $routeProvider.when('/', {
      template: `<h1>Login</h1>`,
      controller: 'loginCtrl'
    })
    .when('/register', {
      template: `<h1>Register</h1>`,
      controller: 'RegisterCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });

});
app.controller('loginCtrl', function($scope) {
  $scope.name = "Login";

});
app.controller('RegisterCtrl', function($scope) {
  $scope.name = "Register";

})
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS User Registration and Login Example  </title>
</head>

<body>
  <a href="#/login">Login</a>
  <a href="#/register">Register</a>
  <div class="mainContainer" ng-view></div>
  <script src="//unpkg.com/angular@1.6/angular.js"></script>
  <script src="//unpkg.com/angular-route@1.6/angular-route.js"></script>
</body>

</html>

回答1:


Routes in Angular 1.6 changed from #/state to #!/state

You should change your ref to:

 <a href="#!/login">Login</a>
 <a href="#!/register">Register</a>

DEMO

var app = angular.module("myApp", ["ngRoute"])
app.config(function($routeProvider) {
  $routeProvider.when('/', {
      template: `<h1>Login</h1>`,
      controller: 'loginCtrl'
    })
    .when('/register', {
      template: `<h1>Register</h1>`,
      controller: 'RegisterCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });

});
app.controller('loginCtrl', function($scope) {
  $scope.name = "Login";

});
app.controller('RegisterCtrl', function($scope) {
  $scope.name = "Register";

})
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS User Registration and Login Example  </title>
</head>

<body>
  <a href="#!/login">Login</a>
  <a href="#!/register">Register</a>
  <div class="mainContainer" ng-view></div>
  <script src="//unpkg.com/angular@1.6/angular.js"></script>
  <script src="//unpkg.com/angular-route@1.6/angular-route.js"></script>
</body>

</html>


来源:https://stackoverflow.com/questions/51685961/routing-demo-stops-working-when-updated-to-angularjs-1-6

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!