路由到Angularjs中的其他页面?

时间:2020-06-26 14:20:07

标签: angularjs

我试图创建一个链接,单击“注册”按钮,该链接进入register.html,而无需重新启动页面。但是,当我单击注册链接时,单击它似乎没有任何反应。

index.html:

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="Login">

<label for="login">Login</label>
<input id="login" ng-model="login" type="text">
<br>
<label for="password">Password</label>
<input id="password" ng-model="password" type="text">
<br>
<button type="button" ng-click="login()">Login</button>


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

<div ng-view></div>

</body>
</html>

app.js:

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

app.config(function ($routeProvider) {
    $routeProvider
        .when("/",{
            templateUrl:"index.html",
        })
        .when("/register",{
            templateUrl:"register.html",
            controller:"Registration"
        });
})
app.controller('Login',['$scope', function ($scope) {

}])

app.controller("Registration", function ($scope) {
    $scope.msg = "I love London";
});

register.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <h1>Registration page</h1>
</head>
<body ng-app="myApp" ng-controller="Registration">

</body>
</html>

1 个答案:

答案 0 :(得分:0)

您应该将链接修复为:

<a href="register">Register</a>

查看文档以获取详细信息$route#examples