สร้างแอปออกแบบวัสดุด้วย Angular 2

วัสดุเชิงมุมเป็นกรอบองค์ประกอบ UI ที่ใช้ข้อกำหนดการออกแบบวัสดุของ Google สำหรับเชิงมุมที่ 2 - การดำเนินการเชิงมุมใหม่ที่เขียนใน Typescript แม้ว่าจะยังอยู่ในอัลฟาวัสดุเชิงมุมให้ชุดส่วนประกอบ UI ที่สามารถใช้ซ้ำได้และเข้าถึงได้ตามการออกแบบวัสดุ

Angular 2 ตัวเองถูกออกแบบมาสำหรับใช้ในทุกแพลตฟอร์ม (เว็บมือถือและเดสก์ท็อป) และมีเทคโนโลยีใหม่ ๆ มากมายที่เกี่ยวข้องกับมัน ในระดับ JavaScript เรามีไวยากรณ์เพิ่มเติมของ ECMascript 2015 (ES6) การพิมพ์และการสนับสนุนอินเทอร์เฟซจาก Typescript พร้อมกับมัณฑนากรจากการสะท้อนข้อมูลเมตา มันใช้การสังเกตจากไลบรารีส่วนขยายปฏิกิริยาเพื่อจัดการลำดับของเหตุการณ์ในวิธีการเขียนโปรแกรมฟังก์ชั่น มันใช้โซนเพื่อห่อหุ้มและสกัดกั้นกิจกรรมแบบอะซิงโครนัสเพื่อให้รูปแบบของการจัดเก็บเกลียวในท้องถิ่นช่วยให้เชิงมุมตอบสนองต่อการเปลี่ยนแปลงข้อมูลในเหตุการณ์แบบอะซิงโครนัสเพื่อบำรุงรักษาข้อมูล ในที่สุดการโหลดโมดูลได้รับการจัดการโดย SystemJs

ในบทช่วยสอนนี้เราจะใช้ Angular 2 เพื่อสร้างแอปที่ทำง่าย ๆ ด้วยองค์ประกอบการออกแบบวัสดุที่เป็นเอกลักษณ์ รับไฟล์ต้นฉบับที่นี่ .

ตั้งค่า

การตั้งค่าสภาพแวดล้อมเริ่มต้นอาจเป็นเรื่องยาก มี Angular2-seed พร้อมใช้งานเช่นเดียวกับ Angular2-Starter . อย่างไรก็ตามมีบางสิ่งที่ดียิ่งขึ้น: ด้วย เชิงมุม - cli คุณสามารถกำหนดค่าโครงการ 2 ของคุณด้วยคำสั่งเดียว

ไม่เพียง แต่จะดูแลการตั้งค่าสำหรับเทคโนโลยีทั้งหมดที่ฉันพูดถึงในส่วนสุดท้าย (ผ่านโหนดและ NPM) มันจะเพิ่มในการนั่งร้านสำหรับการทดสอบหน่วยจัสมิน, การทดสอบแบบ end-to-end ไม้โปรแตติค์และการทดสอบ TSlint และ การวิเคราะห์รหัสแบบคงที่ของ Codelyzer ของ Angular 2 Typescript แม้ว่าคุณจะไม่ต้องใช้สิ่งเหล่านี้คุณควรทำอย่างแน่นอน มันง่ายมากที่จะใช้คุณจะสงสัยว่าคุณเข้ากันได้อย่างไร

CLI เชิงมุมสามารถใช้เป็นแพ็คเกจ NPM ดังนั้นคุณจะต้องติดตั้งโหนดและ NPM ทั่วโลกบนเครื่องของคุณโดยใช้ การติดตั้ง NPM -G เชิงมุม - CLI . ตอนนี้สร้างแอพเชิงมุม 2 แอปใหม่ด้วย ng วัสดุใหม่ 2 ทำ . คุณจะต้องรอสักครู่เพราะหลังจากที่มันสร้างไฟล์ที่จำเป็นมันจะเริ่มต้น repo git และทำ การติดตั้ง NPM ในการดาวน์โหลดโมดูลที่จำเป็นทั้งหมดลงใน node_modules / . ดู แพคเกจ json และทำความคุ้นเคยกับโมดูลและสคริปต์ที่นั่น

ตอนนี้คุณได้สร้างแอปพลิเคชั่นเชิงมุม 2 อันที่ตามแนวทางปฏิบัติที่ดีที่สุดอย่างเป็นทางการ

เพิ่มการออกแบบวัสดุ

แอปเริ่มต้นไม่รู้อะไรเกี่ยวกับการออกแบบวัสดุ (การกำกับดูแลฉันแน่ใจ) ดังนั้นเราจึงต้องเพิ่มตัวเราเอง

มีรายการแพคเกจการออกแบบวัสดุ 2 เชิงมุมที่ตีพิมพ์ใน @ angular2-material ห้องสมุด. ในตัวอย่างนี้เราจะใช้ แกนกลาง (จำเป็นสำหรับแอพเชิงเทินทั้งหมด 2 แอพ) เช่นเดียวกับ ปุ่ม , บัตร , ช่องทำเครื่องหมาย , ไอคอน , อินพุต , รายการ และ แถบเครื่องมือ :

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

สำหรับกลุ่มผู้ขายที่ทำงานเราต้องเพิ่ม @ Angular2-Material / ** / * ไปที่อาร์เรย์ของ vendornpmfiles ใน เชิงมุม - clib-build.js . เรายังต้องเพิ่มเส้นทางไปยัง @ angular2-material เพื่อ แผนที่ วัตถุ:

 Const แผนที่: ใด ๆ = {
  '@ angular2- วัสดุ': 'ผู้ขาย / @ angular2- วัสดุ'
}; 

ให้ SystemJs รู้วิธีการประมวลผลโมดูลใหม่โดยการชี้ไปที่ไฟล์หลักของแต่ละแพ็คเกจ:

 Const แพ็คเกจ: ใด ๆ = {};

// ใส่ชื่อของส่วนประกอบวัสดุใด ๆ ของคุณที่นี่
Const MateriSpkgs: String [] = ['หลัก', 'ปุ่ม', 'การ์ด', 'ช่องทำเครื่องหมาย',
'ไอคอน', 'อินพุต', 'รายการ', 'แถบเครื่องมือ'];

materialpkgs.foreach ((pkg) = & gt; {
  แพ็คเกจ [`@ angular2-material / $ {PKG}`] = {หลัก: `$ {PKG} .js`};
}); 

ตอนนี้ถึงเวลาที่จะโหลดแบบอักษรไอคอนการออกแบบวัสดุใน ของ SRC / index.html . แบบอักษรใด ๆ จะทำงาน แต่เรากำลังใช้ไอคอนการออกแบบวัสดุมาตรฐาน:

 & lt; ลิงค์ href = "https://fonts.googleapis.com/icon?family=matingial+icons" rel = "stylesheet" & gt; 

สร้างกล่องโต้ตอบ MD

ตอนนี้เราสามารถทำงานกับการออกแบบวัสดุในแอพที่ต้องทำของเรา หนึ่งในส่วนประกอบที่ขาดหายไปจากการออกแบบวัสดุ 2 เชิงมุมเป็นข้อความแจ้งหรือการโต้ตอบดังนั้นสำหรับงานแรกของเราที่เราจะทำ!

มาสร้างองค์ประกอบใหม่โดยใช้การ์ดออกแบบวัสดุแถบเครื่องมือ, อินพุตและปุ่มสองปุ่ม ใน SRC / APP โฟลเดอร์ของ repo ของคุณพิมพ์ ng สร้างองค์ประกอบส่วนประกอบ . สิ่งนี้สร้างใหม่ DialogComponent ใน SRC / APP / DIALOG และเพิ่มบาร์เรลให้ System-config.ts ดังนั้น SystemJs จึงรู้วิธีการโหลด

หากคุณดูที่สร้างขึ้น Dialog.comPonent.ts ไฟล์คุณจะเห็นบรรทัดแรกคือ: นำเข้า {component, oninit} จาก '@ เชิงมุม / แกน'; . ส่วนประกอบ เป็นหนึ่งในหน่วยการสร้างหลักของเชิงมุมและ oninit เป็นหนึ่งในอินเทอร์เฟซที่ใช้มัน อย่างไรก็ตามเพื่อให้สามารถเข้าถึงการสื่อสารระหว่างส่วนประกอบที่ซ้อนกันรวมถึงส่วนประกอบการออกแบบวัสดุที่กล่าวถึงข้างต้นเราต้องนำเข้าอินพุต เอาท์พุท และ เหตุการณ์ จาก @ เชิงมุม / แกน; และ mdcard , mdinput , mdtoolbar และ mdbutton จากโมดูลที่สอดคล้องกันของพวกเขาใน @ angular2- วัสดุ ห้องสมุด.

เพื่อให้ส่วนประกอบวัสดุเหล่านี้เราต้องฉีดคำสั่งของเรา DialogComponent ต้องใช้. เราจะเพิ่มคำสั่งต่อไปนี้ให้กับ @components ข้อมูลเมตา:

 Templateurl: 'Dialog.comPonent.html'
คำสั่ง: [MDCard, Mdtoolbar, Mdinput, MDButton]
styleurls: ['Dialog.comPonent.css'] 

จากนั้นเราก็ประกาศจำนวน @Input ตัวแปร ( oktext , canceltext และอื่น ๆ ) ที่ช่วยให้เราสามารถกำหนดเนื้อหาของบทสนทนา นอกจากนี้เรายังต้องเพิ่มหนึ่ง @output Emitter ที่ช่วยให้เราสามารถเรียกใช้ฟังก์ชันด้วยค่าในส่วนประกอบหลักเมื่อกล่องโต้ตอบปิด

ตอนนี้เราสามารถแทนที่ตัวสร้างที่สร้างขึ้นใน Dialog.comPonent.ts ด้วยรหัสต่อไปนี้:

 ตัวสร้าง () {
 this.oktext = 'ตกลง';
 นี้. canceltext = 'ยกเลิก';
}

emitvalue (ค่า) {
 นี่.ValueMitted.emit (มูลค่า);
} 

เช่นเดียวกับการใช้ @Input ตัวแปรภายในของเรา DialogComponent ภายใน dialog.component.html แม่แบบ MD-Input ช่วยให้เราสามารถยอมรับการป้อนข้อมูลจากผู้ใช้:

 & lt; md-input class = "เต็มความกว้าง" [ตัวยึดตำแหน่ง] = "ตัวยึดตำแหน่ง"
        [(ngmodel)] = "ค่า" #dialoginput
        (KeyUp.Enter) = "EmitValue (ค่า)"
        (KeyUp.escape) = "emitvalue (null)" & gt; & lt; / md-input & gt; 

ที่ md-buttons อนุญาตให้ผู้ใช้คลิก 'ตกลง', 'ยกเลิก' หรืออะไรก็ตามที่คุณตัดสินใจที่จะติดป้ายกำกับปุ่มเหล่านี้:

 & lt; ปุ่ม md ปุ่ม (คลิก) = "emitvalue (null)" color = "หลัก" & gt;
  {{canceltext}}
& lt; / ปุ่ม & gt;
& lt; ปุ่ม md-raised ปุ่ม (คลิก) = "emitvalue (ค่า)" color = "หลัก" & gt;
  {{oktext}}
& lt; / ปุ่ม & gt; 

แจ้งให้ทราบล่วงหน้า พวงกุญแจ ตัวจัดการงานซึ่งดูแลสิ่งต่าง ๆ เมื่อกดปุ่ม Enter หรือ Escape ตัวจัดการเหล่านี้เหมือนกันกับ คลิก ตัวจัดการงานสำหรับ canceltext และ oktext . Escape ทำสิ่งเดียวกันกับการยกเลิก (emitvalue (null)) และการกดปุ่ม ENTER จะมีผลลัพธ์เช่นเดียวกับการคลิกตกลง (emitvalue (มูลค่า)) . สิ่งนี้ช่วยให้เราสามารถแจ้งให้ผู้ใช้ทราบ ค่า ผ่าน MD-Input และรับเอาต์พุตที่ปล่อยออกมา

เราสามารถดูตัวอย่างของส่วนประกอบการออกแบบวัสดุจำนวนหนึ่ง: MD-card , ปุ่ม MD และอื่น ๆ นอกจากนี้เรายังต้องเพิ่ม CSS บางส่วนใน dialog.component.css เพื่อให้บรรลุเค้าโครงที่เราปรารถนา - คุณสามารถดูรหัสเต็มใน GitHub Repo ที่มาพร้อมกับ

ตอนนี้เรามาเพิ่มสิ่งนี้ DialogComponent ถึง material2-do.component.html เพื่อดูว่ามันเป็นอย่างไร:

 & lt; dialog แอป [ชื่อ] = "'Dialog Prompt'"
  [เทมเพลต] = "'นี่คือส่วนประกอบการออกแบบวัสดุใหม่ของเรา:'"
  [ตัวยึดตำแหน่ง] = "'ป้อนข้อความที่นี่'"
  [OKTEXT] = "'ใช่'"
  [canceltext] = "'ไม่'"
  [value] = "'เริ่มต้นข้อความ'"
  (มั่นใจ) = "บันทึก ($ เหตุการณ์)"
  [showprompt] = "จริง" & gt;
& lt; / dialog & gt; 

แจ้งให้ทราบล่วงหน้าเรามีสตริงที่แท้จริงสำหรับทุกคน @Inputs . สิ่งเหล่านี้ต้องการให้เราใช้คำพูดทั้งเดี่ยวและคู่มิฉะนั้นเชิงมุมจะตีความเนื้อหาเป็นชื่อตัวแปรใน ส่วนประกอบ ขอบเขต.

เรายังมีคนที่ปล่อยออกมา @output . สิ่งนี้ทำให้กล่องโต้ตอบง่ายและสามารถกำหนดค่าได้อย่างมาก อินพุตส่วนใหญ่จะมีการผิดนัดกับสตริงที่ว่างเปล่าหากละเว้น

ลองปรับเปลี่ยน Material2Docomponent . เราจำเป็นต้องนำเข้า Dialogcomponent และประกาศว่าเป็นคำสั่งมิฉะนั้น Material2Docomponent จะไม่สามารถแสดงผลได้ เราจะเพิ่มฟังก์ชั่นบันทึก:

 บันทึก (ข้อความ) {
   console.log (ข้อความ);
 } 

ลองดูที่ฝีมือของเรา คุณสามารถให้บริการแอป (พอร์ตเริ่มต้นคือ 4200) โดยการทำงาน NPM Run-Script Start ซึ่งในระยะหลังวิ่ง เซิร์ฟเวอร์ NG . หากคุณเปิดคอนโซลคุณสามารถดูสิ่งที่บันทึกไว้: เนื้อหาของอินพุตจะถูกปล่อยออกมาเมื่อคุณคลิก 'ใช่' และ เป็นโมฆะ ถูกปล่อยออกมาเมื่อคุณคลิก 'ไม่'

ขณะนี้เราพร้อมที่จะใช้ใหม่นี้แล้ว DialogComponent เพื่อสร้างแอปที่ต้องทำของเรา

สร้างแอพหลัก

เราจะใช้ส่วนประกอบ MD ต่อไปนี้สำหรับแอพหลัก: แถบเครื่องมือ , รายการ , รายการรายการ , ช่องทำเครื่องหมาย , ปุ่ม , ไอคอน , ไอคอน - รีจิสทรี และขึ้นอยู่กับมัน http_provider จากห้องสมุด HTTP เชิงมุม ดังนั้นสิ่งเหล่านี้จำเป็นต้องเพิ่มลงในส่วนการนำเข้าของ Material2Docomponent .

อีกครั้งเพื่อให้สามารถแสดงองค์ประกอบเหล่านี้เราจำเป็นต้องรวมไว้ใน @components เมทาดาทา คำสั่ง อาร์เรย์พร้อมกับ DialogComponent ซึ่งเราเพิ่งเพิ่ม:

 คำสั่ง: [mdcard, mdtoolbar, mdlist, mdlistitem, mdcheckbox, mdbutton, mdicon, diamrogcomponent], 

เพื่อเข้าถึงการเข้าถึง mdiconregistry เราต้องฉีดมันพร้อมด้วย http_providers ผ่านทาง @components เมทาดาทา ผู้ให้บริการ อาร์เรย์:

 ผู้ให้บริการ: [mdiconregistry, http_providers], 

ตอนนี้เราใช้ประโยชน์จากเรา DialogComponent เพิ่มตรรกะในพอสำหรับแอปพลิเคชันที่ต้องทำอย่างง่าย ที่ tododialog ถูกเรียกให้เปิดกล่องโต้ตอบของเราด้วยกับงานที่ต้องแก้ไข ( ทำ ) หรือ เป็นโมฆะ หากเรากำลังสร้างใหม่

เราตั้งค่าตัวแปรเริ่มต้นสำหรับงานใหม่หรือหากเรากำลังแก้ไขงานแทนเราเปลี่ยนตามนั้น จากนั้นเราแสดงให้เห็น DialogComponent โดยการตั้งค่า คนอวดรู้ ตัวแปรถึง จริง :

 tododialog (todo = null) {
    this.okbuttontext = 'สร้างงาน';
    นี้fieldvalue = '';
    นี่.editingtodo = todo;
    ถ้า (todo) {
      นี่.fieldvalue = todo.title;
      this.okbuttontext = 'แก้ไขงาน';
    }
    this.showdialog = true;
  } 

ที่ updatetodo ฟังก์ชั่นเรียกว่าเมื่อเราต้องการปิด ฟังก์ชั่นอื่น ๆ ( edittodo , addtodo , hideedialog ) เป็นวิธีการช่วยเหลือสำหรับ updatetodo .

 UpdateTodo (ชื่อเรื่อง) {
    ถ้า (ชื่อ) {
      title = title.trim ();
      ถ้า (สิ่งนี้.editingtodo) {
        สิ่งนี้.edittodo (ชื่อ);
      } อื่น {
        สิ่งนี้. addtodo (ชื่อ);
      }
    }
    นี่.hidentialog ();
  }

ใน material2-do.component.html เราได้ให้ใบสมัครของเรา MD-toolbar ที่ที่เราใส่ชื่อและ md-icon เรียกว่า เพิ่ม (ซึ่งดูเหมือนเครื่องหมายบวก) สำหรับปุ่มการกระทำที่ลอยอยู่ของเรา (Fab) ซึ่งช่วยให้เราสามารถสร้างงานใหม่:

 & lt; ปุ่ม md-fab class = "fab-add" (คลิก) = "toDodialog ()" & gt;
      & lt; md-icon & gt; เพิ่ม & lt; / md-icon & gt;
    & lt; / ปุ่ม & gt; 

เราใช้ MD-card-content เพื่อถือ รายการ MD และ * ngfor ทำซ้ำและแสดงของเรา สิ่งที่ต้องทำ อาร์เรย์เป็น รายการ MD-items :

 & lt; md-list-item * ngfor = "ให้ todo of todolist; ให้ index = index" & gt; 

ช่องทำเครื่องหมาย MD- ช่วยให้เราสามารถทำเครื่องหมายรายการในรายการของเรา และเรามีสอง md-mini-fab ปุ่มที่เราสามารถใช้ในการลบและแก้ไขงานของเรา: MD-ICONS DELETE_FOREVER และ mode_edit :

& lt; ปุ่ม md-mini-fab (คลิก) = "ลบ (ดัชนี)" color = "หลัก" & gt;
  & lt; md-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / ปุ่ม & gt;

& lt; ปุ่ม md-mini-fab (คลิก) = "tododialog (todo)" color = "หลัก"
        [ปิดการใช้งาน] = "TODO.Completed" & GT;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / ปุ่ม & gt; 

ด้วย CSS เล็กน้อยเหล่านี้ยังคงซ่อนอยู่จนกว่าคุณจะโรลโอเวอร์ (หรือคลิก) คุณสามารถดูรหัสใน repo

ดำเนินต่อไป

ในฐานะที่เป็นวัสดุเชิงมุม 2 ยังอยู่ในอัลฟามีบางสิ่งที่ขาดหายไป - โดยเฉพาะอย่างยิ่ง, เอฟเฟกต์ปุ่ม MD ปุ่มลายเซ็น ในขณะที่อาจมีการเปลี่ยนแปลงการเปลี่ยนแปลง API ข้างหน้ามันทำงานได้มาก นอกจากนี้ยังมีชีวิตอยู่กับการอ้างสิทธิ์ของการมี API ที่ตรงไปตรงมาที่ไม่ได้สร้างความสับสนให้กับนักพัฒนาและใช้ประโยชน์จากการสร้างแอปพลิเคชั่นที่ดูดี

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 284 ของ NET นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

• มีอะไรใหม่ในเชิงมุม 4?
• วิธีการสร้างเว็บไซต์เต็มหน้าในเชิงมุม
• สร้างแดชบอร์ดข้อมูลด้วย Angularjs