Angular.js Json Örneği

Sayfa yüklendikten sonra angular devreye girip html’i tarar ondan sonrada html’de olmayan directive controller gibi durumları tarayıcının anlayabileceği htmllere render eder. Burada hız ile ilgili bir problem olurmu bende açıkcası çok iyi bilmiyorum. Ama görünürde bir şey yok. Tabiki bir zaman alacaktır ama göz ardı edilecek kadardır.

Modeller : Angular.js’de javascriptir nesneleridir.

View : Html’de çıktılar ve şablonlarıdır.

Controller : Controller ise bildiğimiz javascript işlerini yapan fonksiyonlardır.

Şimdi bir uygulama daha yapıp biraz daha inceleme yapalım. Bu örnekte github’da 4 dosya  olan örnektir. Bu örnekte Json dosyası okuyup ekrana basalım.

< script>
var app = angular.module(‘myApp’, []);
app.controller(‘customersCtrl’, function($scope, $http) {
$http.get(“http://www.w3schools.com/angular/customers.php”).then(function (response) {
$scope.myData = response.data.records;
});

$scope.incompleteCount = function () {
var count = 0;
angular.forEach($scope.myData, function (x) {
if (x.deneme) { count++ }
});
return count;
}

$scope.warningLevel = function () {
return $scope.incompleteCount() > 10 ? “label-success” : “label-warning”;
}
});

Burada http ile gelen json $scope’a atmamız yeterli olacaktır. Ondan sonra sadece ve sadece ng-repeat ile basma işi kaldı.

 

< table class=”table table-striped”>

< thead>

< tr>

< th>İsim< /th>

< th>Şehir< /th>

< th>Ülke< /th>

< th>Seçim< /th>

< /tr>

< /thead>

< tbody>

< tr ng-repeat=”x in myData”>

< td>{{x.Name}}< /td>

< td>{{x.City}}< /td>

< td>{{x.Country}}< /td>

< td>< input type=”checkbox” ng-model=”x.deneme” />

< /td>

< /tr>

< /tbody>

< /table>

Burada myData json listesini tutar x ise her bir itema karşılık gelir. Bu şekilde ekrana basmamızı çok rahat bir şekilde yapmamızı sağlar.

ng-repeat : Galiba en çok kullanılan Angular.js directive’i budur. Bir liste üzerinde dönüp işlem yapmamızı sağlar.

ng-controller : Hangi elementin hangi controller ile yönetileceğini belirttiğimiz kısımdır. Bir sayfada birden fazla controller olabilir. Bunlar farklı elementler için yada iç içe olacak şekilde kullanabilirsiniz. Kısaca controller tanımlaması yaptığımız element tarafından kapsanan diğer elementler içerisinde kullandığımız değişkenler, fonksiyonlar ilgili controller tarafından karşılanır.