Açısal 2 ile bir malzeme tasarım uygulaması oluşturun

Açısal malzeme, Google'ın açısal 2 için malzeme tasarım spesifikasyonunu uygulayan bir UI bileşen çerçevesidir - Typscript'te yazılmış, açısal yeni, daha hızlı bir şekilde, açısal yeni, daha hızlı uygulanması. Hala alfa'da olsa da, açısal malzeme zaten malzeme tasarımına dayanan bir dizi yeniden kullanılabilir ve erişilebilir UI bileşenleri sunar.

Açısal 2'nin kendisi, tüm platformlarda (Web, Mobile ve Masaüstü) kullanım için tasarlanmıştır ve bununla ilişkili birçok yeni teknolojiye sahiptir. JavaScript seviyesinde, meta veri yansıması API'sinden dekoratörlerle birlikte Typscript'ten ECMAScript 2015 (ES6), yazma ve arabirim desteğinin ek sözdizimine sahibiz. Etkinlik dizilerini fonksiyonel bir programlama yolunda yönetmek için reaktif uzantılar kütüphanesinden gözlemlenebilir. Bir iplik-lokal depolama formu sağlamak için asenkron aktiviteyi kapsödecek ve durduran bölgeleri kullanır; açısal, veri bağlamalarını korumak için asenkron olaylardaki veri değişimlerine otomatik olarak yanıt verir. Son olarak, modül yükleme SystemJ'ler tarafından ele alınır.

Bu eğitimde, bazı imza materyali tasarım öğeleri ile basit yapım kolay bir uygulama oluşturmak için açısal 2 kullanacağız. Kaynak dosyaları burada alın .

Kurmak

İlk ortamı kurmak zor olabilir. Var açılı2 tohum ayrıca bir meraklı2-marş . Ancak, daha iyi bir şey var: açısal-cli Açısal 2 projenizi tek bir komutla yapılandırabilirsiniz.

Sadece son bölümde bahsettiğim tüm teknolojiler için kurulumla ilgilenmeyecek (NODE ve NPM üzerinden), Yasemin Birimi Testi, İletki uçtan uca testi, ayrıca TSLint testi için iskele ekleyecektir ve Codelyzer, açısal 2 Typscript'in statik kod analizi. Bunların hepsini kullanmak zorunda olmamanıza rağmen, kesinlikle yapmalısınız. Kullanımı çok basit, hiç olmadan nasıl geçtiğinizi merak edeceksiniz.

Açısal CLI, NPM paketi olarak mevcuttur, böylece makinenizde düğüm ve NPM'yi küresel olarak yüklemeniz gerekir. npm yüklemek -g açısal-cli . Şimdi ile yeni bir açısal 2 uygulama oluşturun ng yeni malzeme2-do . Biraz beklemek zorunda kalacaksın, çünkü gerekli dosyaları oluşturduktan sonra, bir GIT repo'yu başlatır ve npm yükleme Gerekli tüm modülleri indirmek için node_modules / . Bir göz atmak package.json ve oradaki modülleri ve komut dosyalarını tanıdık.

Şimdi resmi en iyi uygulamaları izleyen yeni bir açısal 2 uygulama oluşturdunuz.

Malzeme tasarımı ekle

Varsayılan uygulama malzeme tasarımı hakkında hiçbir şey bilmiyor (eminim bir gözetim), bu yüzden kendimizi eklemeliyiz.

Yayınlanan açısal 2 malzeme tasarım paketlerinin bir listesi var. @gular2-malzeme kütüphane. Bu örnekte biz kullanacağız çekirdek (tüm açısal malzeme 2 uygulamaları için gereklidir), buton , kart , onay kutusu , simge , giriş , liste ve araç çubuğu :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

Satıcı paketi çalışmak için, eklememiz gerekir @gular2-malzeme / ** / * Dizisine vendornpmfiles içinde açısal-cli-build.js . Ayrıca yolu eklememiz gerekiyor @gular2-malzeme için haritalar nesne:

 Const haritası: Herhangi biri = {
  '@gular2-materyal': 'satıcı / @ mergular2 malzeme'
}; 

SystemJ'lerin, paketlerin her birinin ana dosyalarına işaret ederek yeni modülleri nasıl işleyeceğinizi bildirin:

 Const Paketleri: Herhangi biri = {};

// Malzeme bileşenlerinden herhangi birinin adlarını buraya yerleştirin.
Const MaterialPKGS: String [] = ['Çekirdek', 'Düğme', 'Kart', 'Onay Kutusu',
'Simge', 'Giriş', 'Liste', 'Toolbar'];

materyalpkgs.foreach ((pkg) = & gt; {
  paketler [`@ angular2-malzeme / $ {pkg}`] = {Main: `$ {pkg} .js`};
}); 

Şimdi malzeme tasarım simgesi yazı tipini yükleme zamanı nın-nin SRC / index.html . Herhangi bir yazı tipi çalışacak, ancak standart malzeme tasarım simgelerini kullanıyoruz:

 link href = "https://fonts.googleapis.com/icon?family=Material+cons" rel = "Stylesheet" & gt; 

MD iletişim kutusu oluşturun

Şimdi yapacak uygulamamızda malzeme tasarımıyla çalışabiliriz. Şu anda açısal 2 malzeme tasarımından eksik olan bileşenlerden biri bir derhal veya iletişim kutusudur, bu yüzden ilk görevimiz için bir tane yapacağız!

Bir malzeme tasarım kartı, araç çubuğu, bir giriş ve birkaç düğme kullanarak yeni bir bileşen oluşturalım. İçinde SRC / APP Repo'nuzun klasörü, türü NG Bileşen iletişim kutusu oluşturma . Bu yeni oluşturur Diyalog içinde SRC / APP / DIALOG ve bir varil ekler Sistem-config.ts Yani systemjs nasıl yükleneceğini bilir.

Oluşturulana bakarsanız diyalog.ponent.ts Dosya, ilk satırı göreceksiniz: ithalat {bileşen, oninit} dan '@ açısal / çekirdek'; . Bileşen açısal ana yapı taşlarından biridir ve Oninit uygulandığı arabirimlerden biridir. Bununla birlikte, iç içe geçmiş bileşenler arasındaki iletişime erişebilmek için, yukarıda belirtilen malzeme tasarım bileşenlerinin yanı sıra, girişi içe aktif hale getirmemiz gerekir, Çıktı ve Evlilik dan @ açısal / çekirdek; ve Mdcard , Mdinput , Mdtoolbar ve Mdbutton karşılık gelen modüllerinden @gular2- malzeme kütüphane.

Bu malzeme bileşenlerini vermek için, direktifleri enjekte etmemiz gerekir. Diyalog gerektirir. Aşağıdaki direktifleri ekleyeceğiz @Components Meta Veriler:

 Şartesturl: 'Dialog.component.html',
Direktifler: [MDCARD, MDTOOLBAR, MDINPUT, MDBUTTON],
Styleurls: ['diyalog.component.css'] 

Daha sonra bir dizi ilan ediyoruz @Giriş değişkenler ( OKTEXT , Canceltext vb.) İletişim kutusunun içeriğini tanımlamamıza izin verir. Ayrıca bir tane eklememiz gerekiyor @Çıktı İletişim kutusu kapatıldığında, ana bileşendeki bir işlevi tetiklememizi sağlayan yayıcı.

Şimdi oluşturulan yapıcıyı değiştirebiliriz. diyalog.ponent.ts Aşağıdaki kodla:

 Yapıcı () {
 this.Oktext = 'Tamam';
 this.cancellext = 'İptal';
}

emitvalue (değer) {
 this.valueEmfle.emit (değer);
} 

Kullanmanın yanı sıra @Giriş İçindeki değişkenler Diyalog içinde diyalog.component.html şablon, MD girişi Kullanıcıdan girişi kabul etmemizi sağlar:

 & LT; MD-giriş sınıfı = "Tam Genişlik" [Placeholder] = "Yer Tutucu"
        [(ngmodel)] = "değer" #dialoginput
        (keyup.enter) = "emitvalue (değer)"
        (keyup.escape) = "emitvalue (null)" & gt; 

MD düğmeleri Kullanıcının 'Tamam', 'İptal'i' tıklamasını veya bu düğmeleri etiketlemeye karar vermenize izin verin:

 & lt; düğmesi MD düğmesi (tıklayın) = "emitvalue (null)" color = "birincil" & gt;
  {{CANVELTEXT}}
& lt; / button & gt;
& lt; button MD-yükseltilmiş düğme (tıklayın) = "emitvalue (değer)" rengi = "birincil" & gt;
  {{oktext}}
& lt; / button & gt; 

Bildirmek keyif ENTER veya kaçış tuşuna basıldığında şeylere dikkat eden olay işleyicileri. Bu işleyiciler ile aynı Tıklayın için olay işleyicileri Canceltext ve OKTEXT . Kaçış aynı şeyi iptal eder (emitvalue (null)) ve enter'a vurmak, Tamam'ı tıklatarak aynı sonucu olacaktır. (EmitValue (değer)) . Bu, kullanıcıyı bir istememize izin verir. değer vermek aracılığıyla MD girişi ve yayılan çıktı alın.

Birkaç malzeme tasarım bileşeninin örneklerini görebiliriz: md kartı , MD düğmesi , ve bunun gibi. Ayrıca bazı CS'ler eklememiz gerekiyor diyalog component.css İstediğimiz düzeni elde etmek için - tam kodu eşlik eden Github Repo'da görüntüleyebilirsiniz.

Şimdi bunu ekleyelim Diyalog için materyal2-do.component.html neye benzediğini görmek için:

 & lt; app-iletişim kutusu [başlık] = "'iletişim sorusu'"
  [Şablon] = "'Bu bizim yeni malzeme tasarım tabanlı bileşenimizdir:'"
  [Yerholder] = "'Buraya metni gir'"
  [Oktext] = "'Evet'"
  [CANVELTEXT] = "'Hayır'"
  [değer] = "'Başlangıç ​​metni'"
  (valueMited) = "log ($ olayı)"
  [showprompt] = "true" & gt;
& lt; / APP-Dialog & GT; 

Farkına varmak tüm @Inuts . Bunlar, hem tek hem de çift tırnak kullanmamızı gerektirir, aksi halde açısal, içeriği değişken bir isim olarak yorumlayacaktır. Bileşen dürbün.

Ayrıca birinin yaydığı da var. @Çıktı . Bu, iletişim kutusunu basit ve son derece yapılandırılabilir hale getirir. Girdilerin çoğu, ihmal edilirse boş dizgelere temerrüdeğer olurdu.

Değiştirelim Materyal2docomponent . Dialogcomponent'i ithal etmemiz ve bunu bir yönerge olarak ilan etmemiz gerekir. Materyal2docomponent Bunu oluşturamayacak. Ayrıca günlük işlevini de ekleyeceğiz:

 log (metin) {
   konsol.log (metin);
 } 

Hadi el işçiliğimize bakalım. Koşarak uygulamayı (varsayılan bağlantı noktası 4200) kullanabilirsiniz. NPM Run-Script Başlat , bu sırayla çalışır NG sunucusu . Konsolu açarsanız, neyin günlüğe kaydedildiğini görebilirsiniz: 'Evet' i tıkladığınızda girişin içeriği yayılır ve boş 'Hayır' düğmesini tıkladığınızda yayılır.

Şimdi bu yeni kullanmaya hazırız Diyalog Yapılacak uygulamamızı oluşturmak için.

Ana uygulamayı oluştur

Ana uygulama için aşağıdaki MD bileşenlerini kullanacağız: araç çubuğu , liste , liste , onay kutusu , buton , simge , İkon Kayıt Defteri ve bağımlı, Http_provider , açısal HTTP kütüphanesinden. Böylece bunların ithalat bölümüne eklenmesi gerekir. Materyal2docomponent .

Bir kez daha, bu bileşenleri oluşturabilmek için onları dahil etmeliyiz. @Components meta veriler direktifler birlikte olmak Diyalog , biz sadece ekledik:

 Direktifler: [MDCARD, MDTOOLBAR, MDLL, MDLLESITEM, MDCHECKBOX, MDBUTTON, MDICON, DialogComponent], 

Erişim kazanmak Mdiconregistry , birlikte enjekte etmeliyiz Http_providers , yoluyla @Components meta veriler sağlayanlar dizi:

 Sağlayıcılar: [MdiconRegistry, http_providers], 

Şimdi bizden yararlanıyoruz Diyalog , basit yapılması gereken bir uygulama için yeterli mantık ekleyerek. tododialog düzenleme görevi ile iletişim kutumuzu açmak için çağrılır ( yapmak ) veya boş Yeni bir tane yaratıyorsak.

Yeni bir görev için varsayılan değişkenleri kurduk ya da bir görevi düzenliyorsak, bunları buna göre değiştiriyoruz. Sonra gösterdik Diyalog ayarlayarak showdialog değişken doğru :

 tododialog (todo = null) {
    this.okbuttontext = 'Görevi Oluştur';
    this.fieldvalue = '';
    this.editingtodo = todo;
    if (todo) {
      this.fieldvalue = todo.title;
      this.okbuttontext = 'görevi düzenleme';
    }
    this.showdialog = true;
  } 

updatetodo Kapatmak istediğimizde işlev çağrılır. Diğer fonksiyonlar ( editodo , addtodo , hidridealog ) yardımcı yöntemlerdir updatetodo .

 UpdateTodo (başlık) {
    if (başlık) {
      title = title.trim ();
      if (this.editingtodo) {
        this.edittodo (unvan);
      } Başka {
        this.addtodo (başlık);
      }
    }
    this.Hidedialog ();
  }

İçinde materyal2-do.component.html Uygulamamızı verdik md-araç çubuğu Başlığı nereye koyduk ve MD simgesi aranan Ekle (Bir artı işaretine benziyor) Yüzer eylem düğmemiz için (FAB), yeni bir görev oluşturmamızı sağlayan:

 & lt; button md-fab sınıfı = "fab-add" (tıklayın) = "tododialog ()" & gt;
      & lt; md-icon & gt; ekleyin; / md-icon & gt;
    & lt; / button & gt; 

Kullanırız MD-KART İÇERİĞİ tutmak için md listesi ve bir * ngfor yinelemek ve göster yapılacaklar listesi gibi MD-List-Öğeleri :

 & l l list-item * ngfor = "Todolist'e izin verin; index = index" & gt; 

md-onay kutusu Listemizdeki öğeleri işaretlememizi sağlar. Ve iki tane var md-mini-fab Görevimizi silmek ve düzenlemek için kullanabileceğimiz düğmeler: MD-Simgeler Delete_Foreever ve mode_edit :

& lt; button md-mini-fab (tıklayın) = "Kaldır (Endeks)" Color = "Birincil" & GT;
  & lt-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / button & gt;

& lt; button md-mini fab (tıklayın) = "tododialog (toDO)" rengi = "birincil"
        [devre dışı] = "toDo.completed" & gt;
  & lt-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / button & gt; 

Biraz CSS ile, bunlar yok olana kadar gizli kalır (veya tıklayın). Kodu repoda görebilirsiniz.

İleriye gidiyor

Açısal madde 2 hala alfa'da olduğu için, eksik olan bazı şeyler var - özellikle imza MD düğmesi dalgalanma etkisi. Gelecek bir API'deki değişiklikleri kırmak olsa da, çok çalışıcı. Ayrıca, geliştiricileri karıştırmayan basit bir API'ye sahip olma iddiasına ve harika görünümlü uygulamaların oluşturulması için kolaydır.

Bu makale başlangıçta 284 sayılı NET, dünyanın web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olarak yayınlandı. Abone olun .

İlgili Makaleler:

• Kötüğündeki yeni olanlar 4?
• Açısal'da tam sayfa bir web sitesi nasıl oluşturulur
• Angularjs ile bir veri panosu oluşturun