วัสดุ

การออกแบบวัสดุสำหรับแอป AngularJS

ดีไซน์ Material เป็นข้อกำหนดสำหรับระบบการออกแบบภาพ การเคลื่อนไหว และการโต้ตอบแบบครบวงจรที่ปรับให้เหมาะกับอุปกรณ์ต่างๆ เป้าหมายของเราคือการส่งมอบชุดองค์ประกอบ AngularJS-native UI ที่บางและเบาซึ่งใช้ข้อกำหนดการออกแบบวัสดุสำหรับใช้ในแอปพลิเคชันหน้าเดียว (SPA) ของ AngularJS

AngularJS Material เป็นการดำเนินการตามข้อกำหนดการออกแบบวัสดุของ Google (2014-2017) สำหรับนักพัฒนา AngularJS (v1.x)

สำหรับการนำข้อกำหนดการออกแบบวัสดุไปใช้ (2018+) โปรดดูโครงการ Angular Material ซึ่งสร้างขึ้นสำหรับนักพัฒนา Angular (v2+)

จุดสิ้นสุดของชีวิต

การสนับสนุน AngularJS Material ได้สิ้นสุดลงอย่างเป็นทางการแล้ว ณ เดือนมกราคม 2022 ดูว่าการสิ้นสุดการสนับสนุนหมายถึงอะไรและอ่านประกาศการสิ้นสุดอายุการใช้งาน ไปที่ material.angular.io เพื่อดู Angular Material ที่ได้รับการสนับสนุนอย่างแข็งขัน

ค้นหารายละเอียดเกี่ยวกับการรายงานปัญหาด้านความปลอดภัยได้ที่นี่

วัสดุ AngularJS ประกอบด้วยชุดส่วนประกอบ UI ที่นำมาใช้ซ้ำ ผ่านการทดสอบอย่างดี และเข้าถึงได้มากมาย

ลิงค์ด่วน:

• API และการสาธิต
• อาคาร
• กำลังติดตั้ง

โปรดทราบว่าการใช้ AngularJS Material เวอร์ชันล่าสุดจำเป็นต้องใช้ AngularJS 1.7.2 หรือสูงกว่า

AngularJS Material รองรับเวอร์ชันของเบราว์เซอร์ที่กำหนดไว้ในช่องรายการ browserslist ของ package.json ของเรา ค้นหาข้อมูลเพิ่มเติมได้จากไซต์เอกสารของเรา

AngularJS Material รองรับเวอร์ชันของโปรแกรมอ่านหน้าจอที่แสดงอยู่ที่นี่

เอกสารและการสาธิตออนไลน์

• เยี่ยมชม Material.angularjs.org ออนไลน์เพื่อตรวจสอบ API ดูส่วนประกอบที่ใช้งานจริงผ่านการสาธิตสด และอ่านคำแนะนำโดยละเอียดของเราซึ่งรวมถึงระบบเลย์เอาต์ ระบบธีม การพิมพ์ และอื่นๆ
• หรือคุณสามารถสร้างเอกสารและการสาธิตภายในเครื่องได้ ดูสร้างเอกสารและการสาธิตสำหรับรายละเอียด

อาคาร

นักพัฒนาสามารถสร้าง AngularJS Material โดยใช้ NPM และอึก

ขั้นแรกให้ติดตั้งหรืออัปเดตการพึ่งพา npm ของโปรเจ็กต์ในเครื่องของคุณ:

npm install

ติดตั้ง Gulp v3 ทั่วโลก:

npm install -g gulp@3

จากนั้นรันงาน อึก :

 # 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

สำหรับการพัฒนา ให้ใช้ docs:watch สคริปต์ NPM เพื่อทำงานในโหมด dev:

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

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของกระบวนการสร้างและคำสั่งเพิ่มเติม (สำหรับการทดสอบและการดีบัก) นักพัฒนาควรอ่านคู่มือการสร้าง

การติดตั้ง Build (ไฟล์การแจกจ่าย)

นพีเอ็ม

สำหรับนักพัฒนาที่ไม่สนใจที่จะสร้างไลบรารี AngularJS Material... ใช้ NPM เพื่อติดตั้งและใช้ไฟล์การแจกจ่าย AngularJS Material

เปลี่ยนเป็นไดเร็กทอรีรากของโครงการของคุณ

 # 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

ผู้จัดการการพึ่งพาอื่น ๆ

ไปที่พื้นที่เก็บข้อมูลการแจกจ่ายของเราเพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการติดตั้งและใช้ไฟล์การแจกจ่าย AngularJS Material ภายในโปรเจ็กต์ในพื้นที่ของคุณ

ซีดีเอ็น

วัสดุ AngularJS เวอร์ชัน CDN พร้อมใช้งานแล้ว

ด้วย Google CDN คุณไม่จำเป็นต้องดาวน์โหลดไฟล์การแจกจ่ายในเครื่อง เพียงอ้างอิง URL ของ CDN แทนเพื่อใช้ไฟล์ไลบรารีระยะไกลเหล่านั้นได้อย่างง่ายดาย สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อใช้เครื่องมือออนไลน์ เช่น CodePen หรือ 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 >

นักพัฒนาที่กำลังมองหาเวอร์ชันบิลด์ใหม่ล่าสุดสามารถใช้ GitCDN.xyz เพื่อดึงข้อมูลโดยตรงจากพื้นที่เก็บข้อมูลการเผยแพร่ของเรา:

">

  < 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 >

เมื่อคุณติดตั้งเนื้อหาที่จำเป็นทั้งหมดแล้ว ให้เพิ่ม ngMaterial และ ngMessages เป็นการพึ่งพาสำหรับแอปของคุณ:

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