0
Ich habe ein sehr frustrierendes Problem ... Ich habe eine Seite mit vier Vorlagen und vier entsprechenden Zuständen in meiner eckigen Datei. Sie alle funktionieren gut außer einem, "Detail"; Ich kann dazu gelangen, indem ich auf die Schaltfläche in der Vorlage "Zuhause" klicke, aber sobald ich dort bin, wird der HTML-Code nicht mehr in der Vorlage angezeigt.Ui-Router: Jeder Zustand zeigt Vorlage außer einem
angularApp.js:
var app = angular.module('app', ['ui.router']);
app.factory('auth', ['$http', '$window', function($http, $window){
var auth = {};
auth.saveToken = function(token){
$window.localStorage['app-token'] = token;
};
auth.getToken = function(){
return $window.localStorage['app-token'];
};
auth.isLoggedIn = function(){
var token = auth.getToken();
if(token){
var payload = JSON.parse($window.atob(token.split('.')[1]));
return payload.exp > Date.now()/1000;
}else {return false;}
};
auth.currentUser = function(){
if(auth.isLoggedIn()){
var token = auth.getToken();
var payload = JSON.parse($window.atob(token.split('.')[1]));
return payload.username;
}
};
auth.register = function(user){
return $http.post('/register', user).success(function(data){
auth.saveToken(data.token);
});
};
auth.logIn = function(user){
return $http.post('/login', user).success(function(data){
auth.saveToken(data.token);
});
};
auth.logOut = function(){
$window.localStorage.removeItem('app-token');
};
return auth;
}]);
app.controller('MainCtrl', [
'$scope',
function($scope){
$scope.greeting = "hello,world";}
]);
app.controller('SecCtrl', ['$scope', function($scope){
$scope.queryObject = {};
}]);
app.controller('AuthCtrl', [
'$scope',
'$state',
'auth',
function($scope, $state, auth){
$scope.user = {};
$scope.register = function(){
auth.register($scope.user).error(function(error){
$scope.error = error;}
).then(function(){
$state.go('home');
});
};
$scope.logIn = function(){
auth.logIn($scope.user).error(function(error){
$scope.error = error;
}).then(function(){
$state.go('home');
});
};
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home',{
url: '/home',
templateUrl: '/home.html',
controller: 'SecCtrl'
})
.state('detail',{
url: '/detail',
templateURL: '/detail.html',
controller: 'SecCtrl'
})
.state('login',{
url: '/login',
templateUrl: '/login.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth){
if(auth.isLoggedIn()){
$state.go('home');
}
}]
})
.state('register',{
url: '/register',
templateUrl: '/register.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth){
if(auth.isLoggedIn()){
$state.go('home');
}
}]
});
$urlRouterProvider.otherwise('home');
}
]);
index.ejs:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="javascripts/angularApp.js"></script>
</head>
<body ng-app = "app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html"><a ui-sref="detail">
<button >Go to Details</button></a>
</script>
<script type="text/ng-template" id="/detail.html">
<h1>Details!</h1> <!--This is the part that won't show up -->
</script>
<script type="text/ng-template" id="/login.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-show="error" class="alert alert-danger row">
<span>{{error.message}}</span>
</div>
<form ng-submit="logIn()"
style="margin-top:30px;">
<h3>Log In</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Username"
ng-model="user.username"></input>
</div>
<div class="form-group">
<input type="password"
class="form-control"
placeholder="Password"
ng-model="user.password"></input>
</div>
<button type="submit" class="btn btn-primary">Log In</button>
</form>
</script>
<script type="text/ng-template" id="/register.html">
<div class="page-header">
</div>
<div ng-show="error" class="alert alert-danger row">
<span>{{ error.message }}</span>
</div>
<form ng-submit="register()"
style="margin-top:30px;">
<h3>Register</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Username"
ng-model="user.username"></input>
</div>
<div class="form-group">
<input type="password"
class="form-control"
placeholder="Password"
ng-model="user.password"></input>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</script>
</body>
</html>
Vielen Dank im Voraus für jede Hilfe, die Sie geben können!
danken sehr viel! Ich fühle mich ziemlich dumm. Danke noch einmal! – thrasymachus