0
Ich habe gerade angefangen AngularJS zu lernen und ich versuche, eine Seite mit Bootstrap und AngularJS zu erstellen.Anzeigen nicht angezeigt - AngularJS
Problem: Ich bin nicht in der Lage, den Inhalt register.html und login.html Seite im index.html, um zu sehen, welche die Haupt-Seite ist.
Code:
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';
});Die Dateien register.html und login.html sind in Ordner namens Seiten. Die Dateien index.html und app.js befinden sich außerhalb der Ordnerseiten.
auf einem Blick Code sieht gut aus .. Gibt es einen Fehler in der Konsole? –
Es gibt keine Fehler in der Konsole – user3263971
Sie haben sowohl ng-template als auch html. Ist es Tippfehler? –