bahan

Desain Material untuk Aplikasi AngularJS

Desain Material adalah spesifikasi untuk sistem terpadu desain visual, gerak, dan interaksi yang beradaptasi di berbagai perangkat. Tujuan kami adalah menghadirkan serangkaian elemen UI asli AngularJS yang ramping dan ringan yang mengimplementasikan spesifikasi desain material untuk digunakan dalam aplikasi satu halaman (SPA) AngularJS.

AngularJS Material merupakan implementasi Spesifikasi Desain Material Google (2014-2017) untuk pengembang AngularJS (v1.x).

Untuk implementasi Spesifikasi Desain Material (2018+), silakan lihat proyek Material Angular yang dibuat untuk pengembang Angular (v2+).

Akhir Kehidupan

Dukungan Material AngularJS telah resmi berakhir pada Januari 2022. Lihat apa arti berakhirnya dukungan dan baca pengumuman akhir masa pakainya. Kunjungi material.angular.io untuk Material Angular yang didukung secara aktif.

Temukan detail tentang pelaporan masalah keamanan di sini.

Material AngularJS mencakup serangkaian komponen UI yang dapat digunakan kembali, teruji dengan baik, dan dapat diakses.

Tautan Cepat:

• API & Demo
• Bangunan
• Menginstal

Harap dicatat bahwa menggunakan AngularJS Material versi terbaru memerlukan penggunaan AngularJS 1.7.2 atau lebih tinggi.

AngularJS Material mendukung versi browser yang ditentukan di bidang browserslist di package.json kami. Cari tahu lebih lanjut di situs dokumen kami.

AngularJS Material mendukung versi pembaca layar yang tercantum di sini.

Dokumentasi dan Demo Online

• Kunjungi material.angularjs.org online untuk meninjau API, melihat cara kerja komponen melalui demo langsung, dan membaca panduan terperinci kami yang mencakup sistem tata letak, sistem tema, tipografi, dan banyak lagi.
• Atau Anda dapat membuat dokumentasi dan demo secara lokal; lihat Membuat Dokumen & Demo untuk detailnya.

Bangunan

Pengembang dapat membangun Material AngularJS menggunakan NPM dan gulp.

Instal atau perbarui dependensi npm proyek lokal Anda terlebih dahulu:

npm install

Instal Gulp v3 secara global:

npm install -g gulp@3

Kemudian jalankan tugas gulp :

 # To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs

Untuk pengembangan, gunakan skrip NPM docs:watch untuk dijalankan dalam mode dev:

 # To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

Untuk detail selengkapnya tentang cara kerja proses pembangunan dan perintah tambahan (tersedia untuk pengujian dan debugging), pengembang harus membaca Panduan Pembuatan.

Menginstal Build (File Distribusi)

NPM

Untuk pengembang yang tidak tertarik untuk membangun perpustakaan Material AngularJS... gunakan NPM untuk menginstal dan menggunakan file distribusi Material AngularJS.

Ubah ke direktori root proyek Anda.

 # To get the latest stable version, use NPM from the command line.
npm install angular-material --save

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

Manajer Ketergantungan Lainnya

Kunjungi repositori distribusi kami untuk detail lebih lanjut tentang cara menginstal dan menggunakan file distribusi Material AngularJS dalam proyek lokal Anda.

CDN

Versi CDN dari AngularJS Material tersedia.

Dengan Google CDN, Anda tidak perlu mengunduh salinan lokal dari file distribusi. Sebagai gantinya, cukup rujuk url CDN untuk menggunakan file perpustakaan jarak jauh tersebut dengan mudah. Ini sangat berguna ketika menggunakan alat online seperti CodePen atau Plunker.

">

  < head >

    
   < link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " >  script >
   body >

Pengembang yang mencari versi build terbaru dan terkini dapat menggunakan GitCDN.xyz untuk mengambil langsung dari repositori distribusi kami:

">

  < head >

    
    < link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " >  script >

   body >

Setelah Anda menginstal semua aset yang diperlukan, tambahkan ngMaterial dan ngMessages sebagai dependensi untuk aplikasi Anda:

 angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;