视图未显示- AngularJS
视图未显示- AngularJS
提问于 2016-03-20 17:35:08
我刚开始学习AngularJS，我正在尝试创建一个带有Bootstrap和AngularJS的页面。
register.html问题：login.html无法在index.html中看到index.html的内容，这是主页面。
代码：
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="bower_components/bootstrap-theme/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap-theme/bootstrap.min.css">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body>
<script type="text/ng-template" id="index.html">
<h1>Home</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/register.html">
<h1>Register</h1>
</script>
<script type="text/ng-template" id="pages/login.html">
<h1>Login</h1>
</script>
<!-- Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#/register">Register</a></li>
<li><a href="#/login">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- END Navbar -->
<div class="container">
<div ng-view></div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
register.html
<div class="col-lg-6 col-md-6 col-xs-12" id="reg-form">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<h3>Registration form</h3>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label for="fName">First name</label>
<input type="text" class="form-control" id="fName" placeholder="First name">
</div>
<div class="form-group">
<label for="lName">Last name</label>
<input type="text" class="form-control" id="lName" placeholder="Last name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="confPassword">Confirm password</label>
<input type="password" class="form-control" id="confPassword" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html',
controller : 'HomeController'
})
.when('/register', {
templateUrl : 'pages/register.html',
controller : 'RegisterController'
})
.when('/login', {
templateUrl : 'pages/login.html',
controller : 'LoginController'
})
.otherwise({redirectTo: '/'});
});
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';
});
app.controller('RegisterController', function($scope) {
$scope.message = 'Hello from RegisterController';
});
app.controller('LoginController', function($scope) {
$scope.message = 'Hello from LoginController';
});
register.html和login.html文件位于称为pages的文件夹中。index.html和app.js文件位于文件夹页之外。
回答 1
Stack Overflow用户
发布于 2016-03-20 18:07:55
您忘记了“导入”routeProvider功能：
app.config(['$routeProvider', //<-- include '$routeProvider', (followed by a comma ) and then your function
function($routeProvider) {
$routeProvider.
when(...
}).
otherwise({...
});
}]);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36117104
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号