如何使用ngRoute进行路由(带Demo)



我的代码从这里开始

<!DOCTYPE html>
<html>
<head>

<title>Routing</title>
</head>
<body ng-app="myApp">
<a href="#/login">Login</a>
<a href="#/register">Register</a>
<div ng-view></div>
</body>
<script src="angular-min.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/login", {
templateUrl : "login.html"
})
.when("/register", {
templateUrl : "register.html"
})                       
});
</script>
</html>

我不能路由,这是用html简单的兜售,使用简单的方法,基本的方法,我不知道为什么它不路由

这是1.2版本。

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="//code.angularjs.org/1.2.26/angular.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.min.js"></script>
</body>
</html>

如果您使用的是Angularjs 1.6及以上版本,则路由已更改。看看这个Answer

最新更新