İyi bildiğimiz gibi, AngularJS, web ve mobil geliştirme üzerinde çalışırken bize çok sayıda ilginç yardımcı program sağlar, o kadar çok avantajı var ki web projelerimizde büyük bir dinamizm yaratmamıza yardımcı oluyor.
Bugün, geliştirmenizde sahip olduğunuz her türlü kaydı değiştirebileceğiniz, kullandığınız bilgilere bağlı olarak ayrı modüller ile yeterince çalışabileceğiniz bu çerçeve ile dinamik bir tablo oluşturmayı öğreneceksiniz, tüm bunları bir şeyden çalışabilirsiniz. sadece bir kez kodlanmıştır. Bununla sisteme kaydettiğiniz bilgileri listeleyebilir, filtreleyebilir, sayfalandırabilir, sıralayabilir, oluşturabilir, düzenleyebilir ve silebilirsiniz. Bu ilk bölüm için sorgularla ilgili her şeyle (liste, filtre, sayfalandırma, sıralama) çalışacağız, ikinci bölümde ise kayıtların oluşturulması, düzenlenmesi ve ortadan kaldırılması ile çalışacağız.
Zamanında, AngularJS Ngroute ile inamic rotalar oluşturmak için bir eğitim yapmıştık. Bugün tamamen başka şekillerde ona giriyoruz. olmasının uygun olduğu da açıklığa kavuşturulmalıdır. AngularJS bilgisiBu çerçevenin bazı detayları tam olarak açıklanmayacağından, bu eğitimde onlarla çalışacağımız için GIT, NPM'nin sistemimizde kurulu olması önerilir (zorunlu değildir).
Proje Oluşturma
Öncelikle projemizi npm, git ve bower ile düzenleyelim. table-angular adlı proje dizinini oluşturun, ardından proje içinde havuzu oluşturmak için `git init` komutunu kullanın ve ardından package.json dosyasını oluşturmak için` npm init` komutunu kullanın.
`npm install --save-dev express` komutu ile web sunucumuzu kuruyoruz. Kurulumdan sonra adında bir dosya oluşturuyoruz. server.js
var ekspres = gerektirir ('ekspres'); var app = ekspres (); var port = Sayı (process.env.PORT || 3000); app.use (express.static (__ dizin adı + '/ genel')); app.listen (bağlantı noktası, işlev () {console.log ('Uygulama http://localhost:' + bağlantı noktasında başladı);}); Şimdi komutu yürütüyoruz (Bower kurmak için):
npm install --save-dev bowerKök dizinin içinde public adında başka bir dosya oluşturuyoruz, public olarak ise bir index.html dosyası oluşturuyoruz. Ardından public adında bir dizin oluşturuyoruz, bu dizinin içinde js adında bir tane daha oluşturuyoruz ve bunun içinde app.js dosyalarını oluşturacağız, controller.js, services.js Y filtreler.js. Ardından css adında bir dizin oluşturuyoruz ve bunun içinde adında bir dosya oluşturuyoruz. ana.css
Buraya kadar projemiz şu şekilde ilerliyor:
Kütüphanelerimizi kullanmaya devam ediyoruz. Bu durumda bower'ı kullanacağız, görüşümüze biraz stil vermek için açısal ve temel kitaplıklarını kullanacağız. Ayrıca projemize sayfalama ile işlevsellik kazandıracak angular-utils-pagination adlı bir kütüphane ekleyeceğiz. Bu kütüphaneleri kurmadan önce kök dizinimizde .bowerrc adında bir dosya oluşturacağız ve bu dosya bower'a bu kütüphaneleri nereye kaydedeceğini söylemekle görevlidir.
Kullanacağımız kitaplıkların her biri hakkında daha fazla bilgi:
.Bowerrc kodu
{"dizin": "genel / varlıklar / bower_components"}Kütüphaneleri kurmak için şu komutları kullanacağız:
- `bower install --save açısal`
- `bower kurulumu -- temelden tasarruf edin`
- `bower install --save açısal-utils-pagination`
Foundation'ın jquery ile çalıştığı ve bower kullandığımızda indirildikleri açıklığa kavuşturulmalıdır, ancak projemiz için onları kullanmayacağız, ki onları atlayabiliriz, benim durumumda onları bower_components dizininden kaldıracağım.
Şimdiye kadar yarattığımız şey bu:
Şimdi pivot tabloyu kodlamaya geçiyoruz 😁, index.html ile başlıyoruz, ihtiyacımız olan tüm kütüphaneleri ekliyoruz.
Angular JS ile Pivot Tablocontroller.js'de, index.html'den çağrılacak TableController adında bir controller oluşturuyoruz.
Controller.js kodu
angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); filter.js için şimdilik yalnızca modül örneğini oluşturuyoruz:
angular.module ('table.filters', []);Aynı şeyi services.js ile yapıyoruz, sadece örneği oluşturuyoruz:
angular.module ('table.services', []);Son olarak tüm modülleri app.js'den çağırıyoruz.
angular.module ('tablo', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);Ve bununla uygulamamızın ilk çalıştırmasını şu komutu kullanarak yapabiliriz:
"düğüm sunucusu.js"Konsol sekmesinde tarayıcı geliştirici aracını kullanırsak, şu ana kadar oluşturduğumuz her şeyin doğru çalıştığını belirtmek için Table Controller kelimesinin yazdırıldığını doğrulayabiliriz.
Hizmet ekleme
Kullanacağımız servislerimizi oluşturarak başlayacağız. Eğitim için herhangi bir uzak sunucuya bağlanmayacağız, bu yüzden kayıtları javascript dosyalarımıza kaydetmeyi seçeceğiz. Üç tip register kullanacağız. Aynı alanları paylaşmayan Oyunlar, Makaleler ve Kullanıcılar, her biri bağımsız bir hizmeti bir bilgisayardan geliyormuş gibi simüle edecektir. REST API'si, tümü JSON biçiminde. İsterseniz bu üç türe başka alanlar ekleyebilir veya yeni bir tane ekleyebilirsiniz.
Services.js kodu
.factory ('Kullanıcılar', işlev () {dönüş {get: işlev () {var data = [{id: 1, ad:' Juan ', soyadı:' Perez '}, {id: 5, ad :' Ana María ', soyadı:' Garcia '}, {id: 15, ad:' Alejandro ', soyadı:' Magno '}, {id: 18, ad:' Andrea ', soyadı:' L '}, {id: 19 , ad: 'Pablo', soyadı: 'Gutierrez'}, {id: 8, ad: 'Ana', soyadı: 'H'},]; dönüş verileri;} }}) .factory ('Makaleler', işlev ( ) {dönüş {get: işlev () {var data = [{id: 20, başlık: 'İlk makalem'', özet: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'}, {id: 21, title: 'İkinci makalem', özet: 'Lorem ipsum ağrı sit amet, consectetur adipisicing elit.'}, {Id: 22, başlık: 'Üçüncü makalem', özet: ' Lorem ipsum ağrı sit amet, consectetur adipisicing elit.'} ]; return data;}}}) .factory ('Games', function () {return {get: function () {var data = [{id: 1, title] : 'Metroid', tür: 'Aksiyon'}, {id: 2, başlık: 'Zelda', tür: 'Macera'}, {id: 3, başlık: 'Golden Eye', tür: 'S hooter '}, {id: 4, başlık:' Fifa 2016 ', tür:' Sports'},]; dönüş verileri; }}}) Ayrıca, farklı verileri (Kullanıcılar, Oyunlar ve Makaleler) aramakla görevli olan Call adlı başka bir hizmeti de ekleyeceğiz.
.factory ('Çağrı', işlev ($ enjektör) {dönüş {get: işlev (tür) {var hizmet = $ enjektör.get (tür); geri dön service.get ();}};}) Ve sonunda bir oluşturacağız Kalıcılık adı verilen hizmet yapmaktan kim sorumlu olacak REZİL bizim bilgimiz. Başta da söylediğim gibi, öğreticinin bu ilk bölümünde sadece sorgulama işlevleri yapacağız, bu yüzden sadece liste işlevi kullanılacak, ikinci bölümde geri kalanını kullanacağız.
.factory ('Süreklilik', işlev (Çağrı) {dönüş {ekleme: işlev (tür, veri) {var Obj = Call.get (tür); Obj.push (veri);}, liste: işlev (tür) {dönüş Call.get (tür);}, güncelleme: işlev (tür, dizin, veri) {var Obj = Call.get (tür); dönüş Obj [dizin] = veri;}, get: işlev (tür, dizin) {var Obj = Call.get (tür); Obj [index];} döndürür, yok eder: function (tür, indeks) {var Obj = Call.get (tür); Obj.splice döndürür (index, 1);}};} ) Pivot tablodaki tüm nesneleri işleyecek bir servis eklememiz gerekiyor.
.factory ('ObjectService', function () {return {getPropertiesObject: function (nesne) {var özellikleri = []; for (nesnedeki var özelliği) {properties.push (özellik);} dönüş özellikleri;}, klonObject: function (obj) {if (null === nesne || "nesne"! == nesne türü) {dönüş nesnesi;} var copy = nesne.constructor (); for (var attr in nesne) {if (obj.hasOwnProperty ( attr)) kopyala [attr] = nesne [attr];} dönüş kopyası;}, createParamObject: function (obj, parametre, değer) {return Object.defineProperty (nesne, parametre, {değer: değer, yazılabilir: doğru, yapılandırılabilir: true, numaralandırılabilir: true});},}}) hizmet ekleme
Denetleyici Oluşturma
angular.module ('table.controller', []) .controller ('TableController', function ($ kapsam, $ filtre, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ kapsam.types = [{değer: 'Kullanıcılar', etiket: 'Kullanıcılar'}, {değer: 'Makaleler', etiket: 'Makaleler'}, {değer: 'Oyunlar', etiket: 'Oyunlar'}]; $ kapsam.veri = []; $ kapsam.baş = [ ]; // Veri Türü $scope.changeData = function () {$scope.uri = $scope.type.value; $scope.data = Persistence.list ($scope.type.value); $scope.head = ObjectService .getPropertiesObject ($scope.data [0]); $scope.propertiesHead = $scope.head; $scope.filter = $filtre ('fieldsSelectFilter') ([ObjectService.cloneObject ($scope.propertiesHead), ObjectService.cloneObject ( $scope.head)]);; $scope.selectFilter = '$'; $scope.changeFilterTo ();}; // Filtre $scope.changeFilterTo = function () {$scope.search = ObjectService.createParamObject ({} , $scope.selectFilter, '');}; // ***** $scope.orderBy = {pedicate: 'name', reverse: false}; $ kapsam.***** = fonksiyon (yüklem) {$ kapsam.orderBy.reverse =! $ kapsam.orderB y.ters; $ kapsam.orderBy.predicate = yüklem; }; // Sayfalandırma $ kapsam.limit = {per_page: ITEM_PER_PAGE}; // Varsayılan $ kapsam.tipi = $ kapsam.tipleri [0]; $ kapsam.changeData(); });Biraz önce eklediğimiz kodu açıklayalım:- ITEM_PER_PAGE: Sayfa başına gösterilecek kayıtların sınırını yönetmekle görevli olacak, bu durumda sayfa başına 5 tane olduğunu belirtmiştik, 5'ten fazla kayıt olduğunda bir çağrı cihazı bizi hareket ettirmek için görünecek, yukarı Aynı anda kaç tane görüntülemek istediğinizi yerleştirmek için.
- $ kapsam.türler: Tabloda işleyeceğimiz her veri türünün verilerini içeren bir dizi içerir, changeData ile birlikte çalışır.
- $ kapsam.veri: O anda kendisine atanan bilgileri manipüle etmekten ve dinamik tabloda işlenmekten sorumlu olacaktır.
- $ kapsam. kafa: Tablonun başlığı olacak.
Fonksiyonlar:
- $ kapsam.changeData: Tabloda şu anda sahip olduğumuz verileri değiştirmekten sorumlu olacak.
- $ kapsam.changeFilterTo: İşlevi, bilgileri filtrelerken belirli bir filtre türü koymak olacaktır. Örneğin: Kullanıcı kayıtları filtre türleri ad ve soyadı olacaktır.
- $ kapsamı.*****: Verileri tabloların sütunlarına göre düzenlemek için kullanılır. Bu işlev sütunların başına atanacaktır.
index.html kodu
VeriFiltre{{filtre [1] [$ dizin]}}'e göre filtreleyin
| Düzenle Sil | {{kalem}} |
Filters.js kodu
.filter ('fieldsSelectFilter', function () {dönüş işlevi (veri) {data [0] [0] = '$'; veri [1] [0] = 'Tümü'; dönüş verileri;};}) Tabloların sütunlarına ve çağrı cihazına bazı stiller vermek için CSS kodumuzu ekliyoruz. CSS'de ilginç bir şeyi vurgulamalıyız, kayıtların id sütununu gizleyelim çünkü bunun kullanıcıya görselleştirilmesi önemli değildir. Sütunun bilgileri artan veya azalan düzende sıraladığını gösterecek olan sütunlara "simgeler" ekleyeceğiz.
Main.css kodu
{metin-dönüşümü: büyük harf kullan; } ul.pagination {genişlik: %25; kenar boşluğu: 0 otomatik; } tablo {genişlik: %100; } tablo tr th {metin-dönüşümü: büyük harf; } tablo tr th: nth-child (1) {width: 150px; } tr th tablosu: nth-child (2), tablo td: nth-child (2) {ekran: yok; } inci ***** {imleç: işaretçi; } i.up: önce, i.down: önce {içerik: ''; } i.up {üst: -5px; dönüştürmek: döndürmek (90 derece); ekran: satır içi blok; pozisyon: göreceli; } i.down {dönüştür: döndür (90 derece); ekran: satır içi blok; üst: -5 piksel; pozisyon: göreceli; } tr> td a {sol kenar boşluğu: 5px; }Tarayıcımızı tekrar yeniliyoruz ve şimdi aşağıdakileri görüyoruz:
BÜYÜT
[color = # a9a9a9] Resmi büyütmek için tıklayın [/ color]
Arayüzde neler olduğunu biraz açıklayalım. Veri adında bir seçicimiz var. Bu tarafından sipariş edilecektir changeData kaydettiğimiz bilgileri ayıklayın services.js. Filtre alanı, söz konusu alana yazarken belirttiğimiz belirli bilgileri göstermekle görevlidir ve "filtreleme ölçütü", hangi sütuna göre filtrelemek istediğimizi detaylandırmaktan sorumludur, varsayılan olarak TÜM alanlara göre filtreler, yapabilirsiniz. ayrıca sütunları azalan ve artan şekilde düzenlemek için tıklayın. Kendi açınızdan çeşitli testler yapın. Düzenleme ve silme alanları şimdilik işlevsel değildir.
BÜYÜT
[color = # a9a9a9] Resmi büyütmek için tıklayın [/ color]
Akılda tutulması gereken kurallar
Her şeyde olduğu gibi dinamik tablo modülümüzün de en iyi şekilde çalışabilmesi için katı kurallara uyulması gerekmektedir. Her zaman bir id alanımız olmalıdır, ancak bu, veritabanımızdaki kayıtları manipüle ettiğimizde neredeyse açık olsa da, bu uygulamanın bazen bizi geçebileceği de eksik değildir. Ayrıca, bu alan her JSON kaydında ilk sırada yer alır.
şimdilik beklemede bir listeden gelen veriler nasıl işlenir. Örneğin, Oyunlar verilerindeki cinsiyet alanı aslında başka bir tablodan (varlık-ilişki kavramını kullandığımızda) yabancı kimlik olacaktır, sayısal alanları ve tarihleri biçimlendirin, ayrıca ayrı başlıklar oluşturun ve alanın adına bağlı değil. doğrudan kayıt defterinden gelir. Tüm bunları, verileri kaydetmemiz ve güncellememiz gerektiğinde öğreticinin 2. bölümünde göreceğiz. Haberlere dikkat edin.
Pivot tablonun ilk bölümünü bitirdik. Angular projelerinizde size ne kadar hizmet edeceğini ve farklı verileri işlemek için farklı tablolar oluşturmanıza gerek olmadığını, yoksa tek bir modül ile her şeyi merkezileştirebileceğinizi göreceksiniz.
Planlanmış demoyu indirin
table-angular.zip 6.63MB 1472 İndirilenler
