This repository has been archived by the owner on Feb 17, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
72 lines (68 loc) · 3.4 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>Get posts</title>
<!--Inkluderer bootstrap css slik at vi kan bruke den-->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<!--Setter at ng-controlleren skal gjelde for dette dokumentet
Kjører funksjonen getAllPost() når siden lastes inn-->
<body data-ng-controller="PostController" data-ng-init="getAllPosts()">
<!--Lager en enkel navigasjonsbar-->
<nav class="navbar navbar-default">
<div class="container container-fluid">
<ul class="nav navbar-nav">
<li class="navbar-brand">
<span class="glyphicon glyphicon-film" style="color: #2b669a"></span>
</li>
<!--Ved å sette klassen til elementet lik active highligtes den slik at brukeren ser at det er denne siden vi er på-->
<li class="active">
<a href="blog.html">Read Blog</a>
</li>
<li>
<a href="settInnPost.html">Create a new post</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<!--Melding som vises hvis variabelen found = false-->
<div class="alert alert-danger" role="alert" ng-show="!found">There is no posts to show</div>
<!--div'en vises om det er noe data i variabelen posts (sjekker samme som: $scope.found = $scope.posts.length > 0;)-->
<div ng-show="posts.length > 0">
<article>
<!--dataen sendes i en array, og for hvert element i denne arrayen lag en ny section. Dette kalles en foreach løkke-->
<section ng-repeat="post in posts">
<!--Henter ut title og content fra variabelen post deklarert over-->
<header class="section-header"><h1>{{post.title}}</h1></header>
<p>{{post.content}}</p>
</section>
</article>
</div>
</div>
<!--Henter inn API'en angular.js-->
<script src="js/angular.min.js"></script>
<script>
//Deklarerer angular modulen
var myApp = angular.module("myApp", []);
//Lager klassen til kontrolleren for siden
myApp.controller("PostController", function($scope, $http){
//setter variabelen found lik true slik at meldingen over ikke vises
$scope.found = true;
//Deklarerer metoden getAllPosts
$scope.getAllPosts = function() {
//Gjør en get request til php dokumentet getPosts uten å sende med noen parametere
//Om den går igjennom kjør succsess
$http.get("php/getPosts.php").success(function(data){
//setter variabelen posts lik det php dokummentet returnerer
$scope.posts = data;
//Sjekker om det er noe data i det som er returnert fra php dokumentet
//Om ikke sett variabelen posts lik false, som da gjør at meldingen over vises
$scope.found = $scope.posts.length > 0;
});
};
});
</script>
</body>
</html>