虽然我正在尝试使用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");
}
});
文件夹结构
最佳答案 您已在子窗口而不是父窗口中声明了ng-app.
angular不会渲染main.html(角度范围以ng-app开头)所以ng-view什么都不做.
您需要将此属性放在正文或其他包装标记上