javascript – Angularjs route不会将login.html加载到main.html中？

2019年7月27日 118次阅读

虽然我正在尝试使用angular进行单页应用程序.我无法将login.html视图加载到main.html的ng-view.Kindly有人帮助我这样做.谢谢提前.

main.html中

 <!DOCTYPE html>
 <html>
 <head>
 <link rel="icon" type="image/jpeg" href="assets/images/favicon.ico"      />
 <meta charset="UTF-8">
 <title>Login</title>
 <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
 </head>
 <body>
 <div class="container-fluid page-header"
    style="background-color: #E7E7D2; margin: 0; border-bottom-color: green;">
    <h2>
        Application <small>Heading</small>
    </h2>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="main">

    <!-- angular templating -->
    <!-- this is where content will be injected -->
    <div data-ng-view></div>

</div>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/jquery-2.1.3.js"></script>
<script src="assets/js/bootstrap.js"></script>

<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>

</body>
</html>

的login.html

<div data-ng-app="loginApp" class="row"
data-ng-controller="loginController">
<div class="col-md-offset-4"
    style="background-color: #E7E7D2; height: 200px; width: 400px;">
    <h3 align="center">Login</h3>
    <p align="center">{{login_error}}</p>
    <form class="form-horizontal">
        <div class="form-group ">
            <div class="col-md-12"
                style="padding-left: 30px; padding-right: 30px">
                <input type="email" class="form-control" data-ng-model="userName"
                    placeholder="Email" required />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12"
                style="padding-left: 30px; padding-right: 30px">
                <input type="password" class="form-control"
                    data-ng-model="password" placeholder="password" required />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12" style="text-align: center">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>

app.module.js

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

app.routes.js

    angular.module('loginApp').config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{
    templateUrl : 'components/login/login.html',
    controller : 'loginController'
}).otherwise({
    redirectTo: 'components/login/login.html'
});

}]);

loginController.js

 angular.module('loginApp').controller('loginController', function($scope) {
function loginController() {
    alert("hi");
} 
});

文件夹结构

《javascript – Angularjs route不会将login.html加载到main.html中？》

最佳答案 您已在子窗口而不是父窗口中声明了ng-app.

angular不会渲染main.html(角度范围以ng-app开头)所以ng-view什么都不做.

您需要将此属性放在正文或其他包装标记上

点赞