路由演示在更新到 AngularJS 1.6 时停止工作
Routing Demo stops working when updated to AngularJS 1.6
当我将 this answer 的代码片段更新为使用 AngularJS 1.6 时,它停止工作了。
登录 和注册 链接不再改变视图。
演示
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>
Angular1.6 中的路由从 #/state
更改为 #!/state
您应该将您的 ref 更改为:
<a href="#!/login">Login</a>
<a href="#!/register">Register</a>
演示
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>
当我将 this answer 的代码片段更新为使用 AngularJS 1.6 时,它停止工作了。
登录 和注册 链接不再改变视图。
演示
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>
Angular1.6 中的路由从 #/state
更改为 #!/state
您应该将您的 ref 更改为:
<a href="#!/login">Login</a>
<a href="#!/register">Register</a>
演示
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>