Ich habe einen Controller "CourseController", der 2 HTML-Seiten steuert, erkennt, ob der aktuelle Benutzer ein Lehrer oder ein Student durch Cookies ist, dann erhält alle Kurse in "Kurse. html "Ich benutze den Controller und ng-repeat, um alle Kurse aufzulisten und wenn der Benutzer auf einen beliebigen Kurs klickt, löst diese Aktion die Funktion" getCoursebyID "aus, die in" CourseController "gefunden wird. Die Funktion fängt die" ID "des angeklickten Kurses ab durch den Benutzer und erhalten Sie diesen Kurs, dann ändert es die aktuelle HTML-Seite zu "singleCourse.html", bei der ich den Namen des Kurses & Beschreibung anzeigen möchte, aber nichts auf dem Bildschirm angezeigt.AngularJS - Übertragen von Daten zwischen HTML-Seiten
Courses.html:
<html>
<head>
<script src="js/app/angular.min.js" type="text/javascript"></script>
<script src="js/scripts/app.js" type="text/javascript"></script>
<script src="js/modules/CourseController.js" type="text/javascript"></script>
</head>
<body data-ng-app="CleverZone">
<ul class="list-group" data-ng-controller = "CourseController" data-ng-init="init()">
<li class="list-group-item media v-middle" data-ng-repeat="item in RegistedCourse|limitTo:3">
<div class="media-body">
<a href="" class="text-subhead list-group-link" data-ng-click="getCoursebyID(item.id)">{{item.name}}</a>
</div>
<div class="media-right">
<div class="progress progress-mini width-100 margin-none">
<div class="progress-bar progress-bar-green-300" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:45%;">
</div>
</div>
</div>
</li>
</ul>
</body>
</html>
CourseController.js:
app.controller('CourseController', ["$scope", "$http","$cookieStore" ,function ($scope, $http, $cookieStore) {
$scope.RegistedCourse;
$scope.CreatedCourse;
$scope.Course;
$scope.init = function() {
if($cookieStore.get('type') == "ROLE_TEACHER"){
$scope.getCourseCreated(); // return courses of teacher
}else{
$scope.getCourseRegisted(); // return courses of student
}
};
$scope.getCourseRegisted = function() {
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password') );
$http({
method: 'GET',
url: 'http://localhost:8080/courseRegistedIn/'
}).then(function successCallback(response) {
$scope.RegistedCourse = response.data;
}, function errorCallback(response) {
alert("Course Registed in fetching failed");
});
};
$scope.getCourseCreated = function() {
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password') );
$http({
method: 'GET',
url: 'http://localhost:8080/courseCreated/'
}).then(function successCallback(response) {
$scope.CreatedCourse = response.data;
}, function errorCallback(response) {
alert("Course Created in fetching failed");
});
};
$scope.getCoursebyID = function(idd){
console.log(idd);
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password'));
$http({
method: 'GET',
url: 'http://localhost:8080/course/'+idd,
}).then(function successCallback(response) {
$scope.Course = response.data;
window.location = "/singleCourse.html";
}, function errorCallback(response) {
alert("Course data in fetching failed");
});
}
}]);
singleCourse.html:
<html>
<head>
<script src="js/app/angular.min.js" type="text/javascript"></script>
<script src="js/scripts/app.js" type="text/javascript"></script>
<script src="js/modules/CourseController.js" type="text/javascript"></script>
</head>
<body data-ng-app="CleverZone">
<div class="page-section padding-top-none" >
<div class="media media-grid v-middle">
<div class="media-left">
<span class="icon-block half bg-blue-300 text-white">1</span>
</div>
<div class="media-body" data-ng-controller = "CourseController">
<h1 class="text-display-1 margin-none">{{Course.name}}</h1>
</div>
</div>
<br/>
<p class="text-body-2">{{Course.description}}</p>
</div>
</body>
</html>
app.js:
var app = angular.module("CleverZone", ['ngCookies']);
* HINWEIS: AngularJS V1.6.4