AngularJS - Transfer data between HTML pages
Question
I have a controller "CourseController" which controls 2 HTML pages, it detects if the current user is a teacher or a student through cookies, then gets all his/her courses , in "Courses.html" I use the controller and ng-repeat to list all the courses and when the user clicks on any course this action triggers the function "getCoursebyID" which is found in "CourseController", The function catches the "id" of the course clicked by the user and get that course, then it changes the current HTML page to "singleCourse.html", at which I want to display that course's name & description, but nothing appear on the screen.
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']);
*NOTE: AngularJS V1.6.4
1 answers
solution1
0 2017-04-21 15:36:52
I think you need use a router in angular to do that. look for ng-route.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.