0
Was mache ich falsch? Ich kann es nicht funktionieren lassen. Der Link von Login und Signin reagiert nicht, da es sich nicht um Links handelt. Ich sehe die URL des Logins wenn ich den Mauszeiger über den Link folge, localhost: 8080/demo/index.html #/login. Ich klicke, aber es funktioniert überhaupt nicht.Implementieren Sie eckigen UI-Router anstelle von ng-Router
Am Anfang erkannte ich nicht, dass ich das Ankerattribut href zu ui-sref ändern musste, aber wenn ich href verwende, leitet es vollständig zur Anmeldeseite ohne die Struktur der index.html-Vorlage um.
html - index.html
<!DOCTYPE html>
<html x-ng-app="demo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/demo.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation" style="margin-bottom: 0px !important;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header container-fluid">
<a class="navbar-brand" href="index.html">Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="login">Log in</a></li>
<li><a ui-sref="signup">Sign in</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- /.container -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('images/header.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading" style="height: 250px;">
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1" ui-view="layout">
<!-- THIS IS JUST CONTENT WHEN ARRIVING TO THE INDEX PAGE -->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
blah blah
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2014</p>
</div>
<hr>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
</div>
</footer>
<script src="../scripts/jquery-3.1.0.min.js"></script>
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-ui-router.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/ui-bootstrap-tpls-2.1.3.min.js"></script>
<script src="../scripts/demo.js"></script>
</body>
</html>
demo.js
var app = angular.module('demo', ['ui.router', 'ui.bootstrap']);
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
$urlRouterProvider.otherwise('/');
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('index', {
url: '/index',
view:{
'layout': {
templateUrl: 'index.html'
}
},
controller: ''
})
.state('login', {
url: '/login',
view: {
'layout': {
templateUrl: 'login.html'
}
},
controller: ''
})
.state('signup', {
url: '/signup',
view: {
layout: {
templateUrl: 'signup.html'
}
},
controller: 'MyController'
})
});
Sind Sie sicher, dass sich die Vorlagen im richtigen Verzeichnis befinden? – Korte
Hier ist ein guter Artikel zu beginnen mit: http://tech.endeepak.com/blog/2014/05/03/debugging-angular-ui-router/ Sie können Übergangsfehler fangen, wird es die Situation zu klären. Und übrigens, dein letzter Layoutname 'key' ist kein String, aber das macht nichts. – Kindzoku
Korte alle Seiten sind in der Wurzel von WebContent. –