Bangun aplikasi desain material dengan Angular 2

Bahan sudut adalah kerangka kerja komponen UI yang mengimplementasikan spesifikasi desain material Google untuk angular 2 - implementasi sudut baru, yang ditulis dalam tekan. Meski masih dalam alpha, bahan sudut sudah menyediakan serangkaian komponen UI yang dapat digunakan kembali dan dapat diakses berdasarkan pada desain material.

Angular 2 sendiri dirancang untuk digunakan di semua platform (web, seluler dan desktop), dan memiliki banyak teknologi baru yang terkait dengannya. Pada tingkat JavaScript kami memiliki sintaks tambahan ECMAScript 2015 (ES6), dukungan pengetikan dan antarmuka dari tekan, bersama dengan dekorator dari Metadata Reflection API. Ini menggunakan diamati dari perpustakaan ekstensi reaktif untuk mengelola urutan peristiwa dengan cara pemrograman fungsional. Ini menggunakan zona untuk merangkum dan mencegat aktivitas asinkron untuk memberikan bentuk penyimpanan benang-lokal, memungkinkan sudut untuk menanggapi secara otomatis terhadap perubahan data pada peristiwa asinkron untuk mempertahankan binding data. Akhirnya, pemuatan modul ditangani oleh systemjs.

Dalam tutorial ini kita akan menggunakan angular 2 untuk membuat aplikasi yang mudah dilakukan dengan beberapa elemen desain bahan tanda tangan. Dapatkan file sumber di sini .

Atur

Menyiapkan lingkungan awal bisa sulit. Ada angular2-seed. tersedia, serta Angular2-Starter. . Namun, ada sesuatu yang lebih baik: dengan Angular-CLI Anda dapat mengkonfigurasi proyek 2 sudut Anda dengan satu perintah.

Tidak hanya akan mengurus pengaturan untuk semua teknologi yang saya sebutkan di bagian terakhir (melalui node dan npm), itu juga akan menambah perancah untuk pengujian unit melati, pengujian ujung-ke-ujung, dan pengujian TSLINT, dan ANALISIS KODE STATIC KODEL ATAS ANGULAR 2. Meskipun Anda tidak perlu menggunakan semua ini, Anda pasti harus melakukannya. Sangat mudah digunakan, Anda akan bertanya-tanya bagaimana Anda bergaul tanpa itu.

CLI sudut tersedia sebagai paket NPM, jadi Anda harus menginstal node dan NPM secara global pada mesin Anda menggunakan NPM Instal -g Angular-CLI . Sekarang buat aplikasi 2 angular baru dengan ng material baru2-do . Anda harus menunggu sedikit, karena setelah itu menghasilkan file yang diperlukan, itu menginisialisasi repo git dan melakukan NPM Install. Untuk mengunduh semua modul yang diperlukan node_modules / . Melihat package.json. dan terbiasa dengan modul dan skrip di sana.

Anda sekarang telah membuat aplikasi Angular 2 baru yang mengikuti praktik terbaik resmi.

Tambahkan desain material

Aplikasi default tidak tahu apa-apa tentang desain material (pengawasan saya yakin), jadi kami harus menambahkannya sendiri.

Ada daftar paket desain material 2 yang diterbitkan di @ angular2-material Perpustakaan. Dalam contoh ini kita akan gunakan inti (Diperlukan untuk semua Bahan Angular 2 Aplikasi), serta tombol , kartu , centang , ikon , memasukkan , daftar dan bilah alat :

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

Untuk bundel vendor untuk bekerja, kita perlu menambahkan @ Angular2-Bahan / ** / * ke array vendornpmfiles. di angular-cli-build.js . Kita juga perlu menambahkan path ke @ angular2-material untuk Peta obyek:

 Const Map: Any = {
  '@ angular2-material': 'vendor / @ angular2-material'
}; 

Biarkan systemjs tahu cara memproses modul baru dengan menunjuk ke file utama dari masing-masing paket:

 Paket Const: Any = {};

// Masukkan nama komponen material Anda di sini
bahan constpkgs: string [] = ['inti', 'tombol', 'kartu', 'centang',
'ikon', 'input', 'daftar', 'toolbar'];

materipkgs.foreach ((pkg) = & gt; {
  Paket [`@ angular2-material / $ {pkg}`] = {utama: `$ {pkg} .js`};
}); 

Sekarang saatnya memuat font ikon desain bahan di dari src / index.html . Font apa pun akan berfungsi, tetapi kami menggunakan ikon desain bahan standar:

 & lt; tautan href = "https://fonts.googLeapis.com/icon?family=material+icons" rel = "stylesheet" & gt; 

Buat dialog MD

Kami sekarang dapat bekerja dengan desain material di aplikasi to-do kami. Salah satu komponen yang saat ini hilang dari Desain Bahan Angular 2 adalah prompt atau dialog, jadi untuk tugas pertama kami, kami akan membuatnya!

Mari kita buat komponen baru menggunakan kartu desain material, bilah alat, input dan beberapa tombol. Dalam src / app. folder repo Anda, ketik Ng menghasilkan dialog komponen . Ini menghasilkan yang baru DialogComponent. di src / app / dialog , dan menambahkan barel ke system-config.ts. Jadi systemjs tahu cara memuatnya.

Jika Anda melihat yang dihasilkan dialog.co.id.ts.ts. File, Anda akan melihat baris pertama adalah: impor {komponen, oninit} dari '@ angular / core'; . Komponen adalah salah satu blok bangunan utama sudut, dan Oninit. adalah salah satu antarmuka yang diterapkannya. Namun, untuk memiliki akses ke komunikasi antara komponen bersarang, serta komponen desain material yang disebutkan di atas, kita perlu mengimpor input, Keluaran dan Eventemitter. dari @ angular / inti; dan MDCARD. , MDinput. , Mdtoolbar. dan Mdbutton. dari modul yang sesuai di @ Angular2- Bahan Perpustakaan.

Untuk membuat komponen materi ini, kita perlu menyuntikkan arahan kita DialogComponent. membutuhkan. Kami akan menambahkan arahan berikut ke @ Komponen Metadata:

 templateurl: 'dialog.com.component.html',
Arahan: [mdcard, mdtoolbar, mdinput, mdbutton],
StyErl: ['Dialog.Component.css'] 

Kami kemudian mendeklarasikan sejumlah @Memasukkan variabel ( Oktext , CancelText. Dan sebagainya) yang memungkinkan kita untuk mendefinisikan isi dialog. Kita juga perlu menambahkan satu @Keluaran emitor yang memungkinkan kita untuk memicu fungsi dengan nilai pada komponen induk ketika dialog ditutup.

Sekarang kita dapat mengganti konstruktor yang dihasilkan di dialog.co.id.ts.ts. Dengan kode berikut:

 konstruktor () {
 ini.oktext = 'OK';
 Ini.canceltext = 'Batal';
}

emitvalue (nilai) {
 Ini.valueemitted.emit (Nilai);
} 

Serta menggunakan @Memasukkan variabel di dalam kita DialogComponent. dalam dialog.co.id.html. Template, itu MD-input memungkinkan kami untuk menerima input dari pengguna:

 & lt; md-input class = "lebar penuh" [placeholder] = "placeholder"
        [(ngmodel)] = "nilai" #dialoginput
        (keyup.enter) = "emitvalue (nilai)"
        (keyup.escape) = "emitvalue (null)" & gt; & lt; / md-input & gt; 

Itu md-buttton. Izinkan pengguna mengklik 'OK', 'Batal' atau apa pun yang Anda putuskan untuk memberi label tombol-tombol ini:

 & lt; tombol tombol MD (klik) = "emitvalue (null)" color = "primer" & gt;
  {{canceltext}}
& lt; / tombol & gt;
& lt; tombol tombol MD-Raised (klik) = "emitvalue (nilai)" warna = "primer" & gt;
  {{oktext}}}
& lt; / tombol & gt; 

Perhatikan Keyup. Handler Acara, yang mengurus hal-hal ketika tombol ENTER atau ESCAPE ditekan. Penangan ini identik dengan klik Penangan acara untuk. CancelText. dan Oktext . Melarikan diri melakukan hal yang sama seperti Batalkan (emitvalue (null)) , dan memukul masukkan akan memiliki hasil yang sama dengan mengklik ok (emitvalue (nilai)) . Ini memungkinkan kami untuk meminta pengguna untuk a nilai melalui dan MD-input , dan menerima output yang dipancarkan.

Kita dapat melihat contoh sejumlah komponen desain bahan: MD-Card. , MD-tombol. , dan seterusnya. Kita juga perlu menambahkan beberapa CSS Dialog.Component.css.css. Untuk mencapai tata letak yang kami inginkan - Anda dapat melihat kode lengkap di repo Github yang menyertainya.

Sekarang mari kita tambahkan ini DialogComponent. untuk Material2-do.Pentle.html. untuk melihat seperti apa:

 & lt; dialog aplikasi [title] = "'prompt dialog'"
  [template] = "'Ini adalah komponen berbasis desain bahan baru kami:'"
  [Placeholder] = "'Masukkan teks di sini'"
  [Oktext] = "'Ya'"
  [Canceltext] = "'Tidak'"
  [Nilai] = "'Start Text'"
  (Valueemitted) = "Log ($ Acara)"
  [Showpromprompt] = "true" & gt;
& lt; / app-dialog & gt; 

Perhatikan kami memiliki string literal untuk semua @Inputs. . Ini mengharuskan kita untuk menggunakan kutipan tunggal dan ganda, jika tidak angular akan menafsirkan isi sebagai nama variabel dalam Komponen cakupan.

Kami juga memiliki yang dipancarkan @Keluaran . Ini membuat dialog sederhana dan sangat dapat dikonfigurasi. Sebagian besar input akan default ke string kosong jika dihilangkan.

Ayo modifikasi. Materi2docomponent. . Kita perlu mengimpor komponen dan mendeklarasikannya sebagai arahan, sebaliknya Materi2docomponent. tidak akan dapat membuatnya. Kami juga akan menambahkan fungsi log:

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

Mari kita lihat hasil karya kami. Anda dapat menyajikan aplikasi (port default adalah 4200) dengan menjalankan NPM Run-Script mulai , yang pada gilirannya berjalan Server NG. . Jika Anda membuka konsol, Anda dapat melihat apa yang dicatat: isi input dipancarkan ketika Anda mengklik 'Ya', dan batal dipancarkan ketika Anda mengklik 'Tidak'.

Kami sekarang siap untuk menggunakan yang baru ini DialogComponent. untuk membuat aplikasi untuk melakukan kami.

Buat aplikasi utama

Kami akan menggunakan komponen MD berikut untuk aplikasi utama: bilah alat , daftar , Daftar barang , centang , tombol , ikon , ikon-registri. , dan tanggungannya, Http_provider. , dari perpustakaan http sudut. Jadi ini perlu ditambahkan ke bagian impor Materi2docomponent. .

Sekali lagi, agar dapat membuat komponen-komponen ini, kita perlu memasukkannya ke dalam @ Komponen Metadata. Arahan Array bersama dengan DialogComponent. , yang baru saja kita tambahkan:

 Arahan: [MDCARD, MDToolBar, MDList, MDlistItem, MDCheckBox, MDButton, MDicon, DialogComponent], 

Untuk mendapatkan akses ke MdiconRegistry. , kita perlu menyuntikkannya, bersama dengan Http_providers. , Melalui @ Komponen Metadata. penyedia Himpunan:

 Penyedia: [MdiconRegistry, http_providers], 

Sekarang kami memanfaatkan kami DialogComponent. , Menambahkan logika yang cukup untuk aplikasi yang mudah dilakukan. Itu tododialog. dipanggil untuk membuka dialog kami, baik dengan tugas untuk mengedit ( melakukan ) atau batal Jika kita membuat yang baru.

Kami mengatur variabel default untuk tugas baru, atau jika kami mengedit tugas sebagai gantinya, kami mengubahnya. Kami kemudian menunjukkan DialogComponent. dengan mengatur showdialog. variabel untuk benar :

 tododialog (todo = null) {
    ini.okbuttext = 'buat tugas';
    Ini.FieldValue = '';
    Ini.editedtodo = todo;
    if (todo) {
      Ini.fieldvalue = todo.title;
      this.okbuttontext = 'edit tugas';
    }
    ini.showdialog = Benar;
  } 

Itu UpdateTodo. Fungsi dipanggil ketika kita ingin menutupnya. Fungsi lainnya ( Edittodo , addtodo. , hembangat ) adalah metode pembantu untuk UpdateTodo. .

 UpdateTodo (judul) {
    if (judul) {
      title = title.trim ();
      Jika (ini.editingtodo) {
        ini.edittodo (judul);
      } lain {
        Ini.addtodo (judul);
      }
    }
    Ini.Hidentialog ();
  }

Di Material2-do.Pentle.html. kami telah memberikan aplikasi kami MD-Toolbar di mana kami telah menempatkan judul, dan MD-icon. dipanggil Menambahkan (yang terlihat seperti tanda plus) untuk tombol aksi mengambang kami (FAB), yang memungkinkan kami untuk membuat tugas baru:

 & lt; tombol md-fab kelas = "fab-add" (klik) = "tododialog ()" & gt;
      & lt; md-icon & gt; add & lt; / md-icon & gt;
    & lt; / tombol & gt; 

Kita gunakan Konten MD-Card untuk memegang MD-list. dan seorang * ngfor. untuk mengulangi, dan menampilkan, kami todolist array as. MD-daftar-item :

 & lt; item md-daftar * ngfor = "biarkan todo todolist; biarkan indeks = indeks" & gt; 

MD-Checkbox. Memungkinkan kami untuk menandai item pada daftar kami. Dan kami memiliki dua md-mini-fab Tombol yang dapat kita gunakan untuk menghapus dan mengedit tugas kita: md-icons delete_forever dan mode_edit. :

& lt; tombol md-mini-fab (klik) = "hapus (indeks)" warna = "primer" & gt;
  & lt; md-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / tombol & gt;

& lt; tombol md-mini-fab (klik) = "tododialog (todo)" color = "primer"
        [Dinonaktifkan] = "TODO.COMPLETED" & GT;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / tombol & gt; 

Dengan sedikit CSS, ini tetap tersembunyi sampai Anda rollover (atau klik). Anda dapat melihat kode di repo.

Maju

Sebagai bahan sudut 2 masih dalam alpha, ada beberapa hal yang hilang - khususnya, efek riak tombol MD tanda tangan. Meskipun mungkin ada perubahan pada API ke depan, itu sangat berfungsi. Ini juga memenuhi klaim memiliki API langsung yang tidak membingungkan pengembang, dan mudah untuk memanfaatkan untuk penciptaan aplikasi yang tampak hebat.

Artikel ini awalnya diterbitkan dalam menerbitkan 284 NET, majalah terlaris di dunia untuk desainer dan pengembang web. Berlangganan di sini .

Artikel terkait:

• Apa yang Baru dalam Angular 4?
• Cara Membangun Situs Web Full-Halaman dalam Angular
• Bangun Dashboard Data dengan Angularjs