11 - $http - jsonplaceholder - style - HelloAngular9.html
https://www.youtube.com/watch?v=B4_quuUTkUg&index=6&list=PLO0Gm_zAXCHwHOC7DHExOeLMQiWFxQE3_
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var benimapp = angular.module("myapp",[]);
benimapp.controller("mycontroller",function($scope,$http){
$http.get("http://jsonplaceholder.typicode.com/posts").then(function(response){
$scope.veriler = response;
});
});
</script>
</head>
<body ng-app = "myapp" ng-controller="mycontroller" >
<ul>
<li ng-repeat="veri in veriler">
{{veri}}
</li>
</ul>
</body>
</html>
Bu örnekte, http://jsonplaceholder.typicode.com/posts adresine http get request mesajı gönderiyoruz. Server'dan gelen response mesajını alıyoruz. Bu response mesajı object'ler içeren bir array'dir bu örnekte. Bu array'in elemanlarını tek tek yazdırıyoruz <ul> ve <li> element'lerini kullanarak.
http://jsonplaceholder.typicode.com/ : JSONPlaceholder is a free online REST service that you can use whenever you need some fake data.
200 http status mesajıdır. OK status'dür 200.
$scope.veriler = response.data; dersek gelen response mesajının sadece body kısmını alırız. Aynı kodu bu şekilde düzenlersek sonuç şöyle gözükür :
Kodu şöyle değiştirirsek:
<ul>
<li ng-repeat="veri in veriler">
{{veri.body}}
</li>
</ul>
sonuç şöyle gözükür :
Bu koda şöyle bir style eklersek:
<style>
ul{
list-style-type : none; <!-- listedeki kucuk noktaciklar gider -->
}
li{
padding:10px;
border:2px solid cornflowerblue;
margin:10px;
}
</style>
Sonuç şöyle gözükür:
12 - ng-switch
The ng-switch directive lets you hide/show HTML elements depending on an expression.
Child elements with the ng-switch-when directive will be displayed if it gets a match, otherwise the element, and its children will be removed.
You can also define a default section, by using the ng-switch-default directive, to show a section if non of the other sections get a match.
http://www.w3schools.com/angular/ng_ng-switch.asp
No comments:
Post a Comment