Angular JS'de Sayfalandırma Nasıl Uygulanır? [Pratik Örnekle]
Yayınlanan: 2020-04-20Angular JS'de sayfalandırmanın nasıl çalıştığını ve bu çerçevede nasıl uygulandığını anlamaya geçmeden önce, adım adım gidelim ve genel olarak Angular JS ve sayfalandırmayı tartışarak başlayalım.
İçindekiler
Açısal JS nedir?
Angular JS, dinamik web uygulamaları oluşturmak için en çok tercih edilen yapısal çerçeveler arasındadır. Geliştiricilerin HTML'yi şablon dili olarak kullanmalarına izin verir ve hatta bir web uygulamasının çeşitli bileşenlerinin açık ve özlü ifadesine izin vermek için HTML sözdiziminin genişletilmesine izin verir.
Geliştiriciler tarafından yazılması gereken kodun büyük bir bölümünü ortadan kaldırmak için bağımlılık ekleme ve veri bağlama yetenekleriyle birlikte gelir. Tüm bunlar tarayıcının içinde gerçekleşir ve Angular JS'yi hemen hemen her sunucu teknolojisiyle rahatlıkla kullanılabilen bir çerçeve haline getirir.
Angular JS, JavaScript ile birçok benzerliği paylaşan açık kaynaklı bir çerçevedir. Çoğunlukla geliştiriciler tarafından tüm içeriklerini, metinlerini ve grafiklerini tek bir sayfada görüntülemesi gereken uygulamalar geliştirmek için kullanılır. Ancak bu, hiçbir şekilde çok sayfalı uygulamalar oluşturmak için kullanılamayacağı anlamına gelmez.
Bu yazıda sayfalandırmanın, diğer faktörlerin yanı sıra akışı ve gezinmeyi etkilemeden içeriği birden fazla sayfaya bölmeye nasıl yardımcı olduğunu açıklayacağız. İki çok önemli nedenden dolayı dünya çapında çok popüler bir model görünümü denetleyici çerçevesidir – Google tabanlıdır ve her zaman en son geliştirme trendleriyle güncel tutulur. Şimdi odağımızı sayfalandırmaya kaydıralım.
Okuyun: AngularJS Mülakat Soruları ve Cevapları
Sayfalandırma nedir?
Parçada biraz daha önce bahsettiğimiz gibi, tüm web siteleri tüm bilgilerini tek bir sayfada gösteremez. Tek bir sayfa gerçekten tercih edilen seçim olsa da, tek sayfalı bir web sitesinin bir seçenek olmadığı durumlarda birden çok sayfa kullanmak, sitede kolay gezinme, gelişmiş kullanıcı deneyimi ve diğerleri dahil olmak üzere çeşitli faydalar sağlayabilir.
Tüm web siteleri, özellikle Flipkart gibi e-ticaret siteleri, tüm ürünlerini listeleyemez ve gerekli tüm bilgileri tek bir sayfada gösteremez. Sayfalandırmanın resme girdiği yer burasıdır. Metin, resim ve daha fazlası biçimindeki içeriğin gerektiğinde birden çok sayfaya bölünmesine olanak tanır. Web geliştirme için AngularJS kullanma hakkında daha fazla bilgi edinin.
Sayfalandırmanın gerçekten kullanışlı olduğu birkaç senaryo vardır. Web siteniz, benzer bir kategori veya veri kümesiyle ilgili bloglar, grafikler veya çizelgeler dahil olmak üzere çok büyük bilgi parçaları içeriyorsa, bu bilgileri sayfalandırmayı kullanarak bölebilir ve gezinmeyi ve okunabilirliği iyileştirebilirsiniz.
Angular JS'de Sayfalandırma
Bir web sitesinde veya herhangi bir web uygulamasında verileri görüntülemenin birkaç yolu vardır. Listeler ve tablolar, çoğu insanın okunması ve anlaşılması kolay bilgileri görüntülemek için kullandığı en yaygın öğelerdir. Angular uygulamalarda ng-repeat özelliği, bilgilerin liste veya tablolarda görüntülenmesi için kullanılır. Ancak bu, yalnızca görüntülenen veriler çok büyük olmadığında çalışır. Daha büyük veri kümeleri için sıralama, arama ve sayfalandırma gibi özellikler tabloları ve listeleri daha yönetilebilir ve uygulamaları daha kullanıcı dostu hale getirir.
Angular JS sayfalandırması, izlenmesi gereken uygulama yaklaşımının çok iyi farkında olmayan kişilere Laravel, Code PHP ve diğer çerçevelerdeki sayfalandırmadan daha zor görünebilir. Kayıtları gezinmesi ve okunması kolay bir biçimde listelemek için arama ve sıralama özellikleriyle birlikte sayfalandırmayı kullanabilirsiniz.
Sıralama ve arama özellikleriyle basit listeleri birden çok sayfaya sığdırmak için üçüncü taraf açısal kitaplıkları kullanabilirsiniz. Bu amaçla en çok tercih edilen üçüncü taraf kitaplığı dirPagination'dır. Bu kütüphaneye kolayca erişilebilir ve kullanımı çok kolaydır. Açısal 2'den daha düşük açısal sürümler için kullanılabilir. Eğer açısal 2 kullanıyorsanız, sıralama, arama ve sayfalama eklemek için dahili kitaplıkta kullanabileceğiniz bileşenleri ayıracaksınız.
200'den fazla kayıt görüntülemek istiyorsanız ve örneğin açısal 1.4 kullanıyorsanız, dirPagination kitaplığının bu tür kitaplıklardan daha hızlı olduğunu ve performans açısından da yüksek olduğunu göreceksiniz. Herhangi bir mantık veya kurulum komutu çalıştırmak için Angular JS Denetleyicisine ihtiyaç duymayan bir tak-çalıştır kitaplığıdır. Ayrıca Bootstrap ile de iyi çalışır.
Örnekle Angular JS'de Sayfalandırma
İşte Angular JS'de sayfalandırmayı gösteren bir kod.
Kaynak : ( https://Gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang=”en” ng-app=”myApp”>
<kafa>
<meta karakter kümesi=”utf-8″>
<title>Dinamik Sayfalandırma ve Filtreleme</title>
<meta name=”viewport” content=”width=cihaz genişliği, ilk ölçek=1.0″>
<meta adı=”açıklama” içerik=””>
<meta name=”yazar” içerik=”Kim Maida”>
<!– JS Kitaplıkları –>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js” type=”text/javascript”></script>
<script src=”http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js” type=”text/javascript”></script>
<!– Açısal Komut Dosyaları –>
<script src=”script.js” type=”text/javascript”></script>
<!– Önyükleme –>
<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</head>
<body>
<div ng-controller=”PageCtrl”>
<div ng-controller=”PageCtrl”>
<label>Ara:</label> <input type=”text” ng-model=”search.name” placeholder=”Ara” />
<br />
<label>Kategoriye Göre Filtrele:</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>Mühendislik</a></li>
<li><a href=”” ng-click=”search.category='management'”>Yönetim</a></li>
<li><a href=”” ng-click=”search.category='business'”>İş</a></li>
</ul>
<label>Şube Göre Filtrele:</label>
<ul>
<li><a href=”” ng-click=”search.branch='West'”>Batı</a></li>
<li><a href=”” ng-click=”search.branch='East'”>Doğu</a></li>
</ul>
<p><strong><a href=”” ng-click=”resetFilters()”>Tümünü Göster</a></strong></p>
<h1>Öğeler</h1>
<ul>
<li ng-repeat=”filtrelenmiş öğe = öğeler | filtre:arama | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>
</ul>
<pagination page=”currentPage” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>
</div>
</body>
</html>
app.js (Kaynak: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
dönüş işlevi (giriş, başlangıç) {
if (giriş) {
başlangıç = +başlangıç;
input.slice(başlat);
}
dönüş [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
“isim”: “isim 1”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Batı”
}, {
“isim”: “isim 2”,
"kategori": [{
“kategori”: “mühendislik”
}],
“şube”: “Batı”
}, {
“isim”: “isim 3”,
"kategori": [{
"Kategori yönetimi"
}, {
“kategori”: “mühendislik”
}],
“şube”: “Batı”
}, {
“isim”: “isim 4”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Batı”
}, {
“isim”: “isim 5”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
“isim”: “isim 6”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
“isim”: “isim 7”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
“isim”: “isim 8”,
"kategori": [{
"kategori": "iş"
}],
“şube”: “Batı”
}, {
“isim”: “isim 9”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
“isim”: “isim 10”,
"kategori": [{
"Kategori yönetimi"
}],
“şube”: “Doğu”
}, {
“isim”: “isim 11”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
“isim”: “isim 12”,
"kategori": [{
“kategori”: “mühendislik”
}],
“şube”: “Batı”
}, {
“isim”: “isim 13”,
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Batı”
}, {
“isim”: “isim 14”,
"kategori": [{
“kategori”: “mühendislik”
}],
“şube”: “Doğu”
}, {
“isim”: “isim 15”,
"kategori": [{
"Kategori yönetimi"
}, {
“kategori”: “mühendislik”
}],
“şube”: “Doğu”
}, {
“isim”: “isim 16”,
"kategori": [{
"Kategori yönetimi"
}],
“şube”: “Batı”
}, {
“isim”: “isim 17”,
"kategori": [{
"Kategori yönetimi"
}],
“şube”: “Doğu”
}, {
“isim”: “isim 18”,
"kategori": [{
"kategori": "iş"
}],
“şube”: “Batı”
}, {
“isim”: “isim 19”,
"kategori": [{
"kategori": "iş"
}],
“şube”: “Batı”
}, {
“isim”: “isim 20”,
"kategori": [{
“kategori”: “mühendislik”
}],
“şube”: “Doğu”
}, {
“isim”: “Peter”,
"kategori": [{
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
“isim”: “Frank”,
"kategori": [{
"Kategori yönetimi"
}],
“şube”: “Doğu”
}, {
"isim": "Joe",
"kategori": [{
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
"isim": "Ralph",
"kategori": [{
"Kategori yönetimi"
}, {
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
"isim": "Gina",
"kategori": [{
"kategori": "iş"
}],
“şube”: “Doğu”
}, {
"isim": "Sam",
"kategori": [{
"Kategori yönetimi"
}, {
“kategori”: “mühendislik”
}],
“şube”: “Doğu”
}, {
"isim": "Britney",
"kategori": [{
"kategori": "iş"
}],
“şube”: “Batı”
}];
Açıklama
Yukarıda kullanılan kod, öğrencilerin adlarını coğrafyalarıyla birlikte ilgili kategori veya eğitim konusuna göre gösterecektir. Angular JS sayfalandırma özelliği, bu ayrıntıların birden çok sayfada tablo biçiminde belirtilmesine olanak tanır. Bilgileri bu şekilde sıralar ve kullanıcı için daha sunulabilir hale getirirsiniz. Bu, web uygulamalarınız için kullanıcı deneyimini iyileştirmenin tartışmasız en kolay yoludur.
Bu nedenle, bir web geliştiricisiyseniz, öğrenmeyi olabildiğince verimli bir şekilde geciktirmemelisiniz. AngularJS'nin günümüz teknoloji dünyasında neden ideal bir araç olduğuna dair yukarıda verilen argümanlarla, devam etmek için tüm açıklamalara sahipsiniz!
AngularJS, Full-stack geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saatlik sıkı eğitim, 9+ proje ve Full-stack Yazılım Geliştirmede PG Diplomasına göz atın. atamalar, IIIT-B Mezunları durumu, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.