EmberJS - การสร้างและเรียกใช้แอปพลิเคชัน

คุณสามารถกำหนดค่า Ember.js ในระบบของคุณได้อย่างง่ายดาย การติดตั้ง Ember.js อธิบายไว้ในบทการติดตั้ง EmberJS

การสร้างแอปพลิเคชัน

ให้เราสร้างแอพง่ายๆโดยใช้ Ember.js ขั้นแรกให้สร้างโฟลเดอร์เดียวที่คุณสร้างแอปพลิเคชันของคุณ ตัวอย่างเช่นหากคุณสร้างโฟลเดอร์ "emberjs-app" ให้ไปที่โฟลเดอร์นี้ในชื่อ -

$ cd ~/emberjs-app

ภายในโฟลเดอร์ "emberjs = app" ให้สร้างโปรเจ็กต์ใหม่โดยใช้คำสั่งใหม่ -

$ ember new demo-app

เมื่อคุณสร้างโปรเจ็กต์คำสั่งใหม่จะจัดเตรียมโครงสร้างไดเร็กทอรีต่อไปนี้พร้อมไฟล์และไดเร็กทอรี -

|-- app
|-- bower_components
|-- config
|-- dist
|-- node_modules
|-- public
|-- tests
|-- tmp
|-- vendor

bower.json
ember-cli-build.js
package.json
README.md
testem.js
  • app - ระบุโฟลเดอร์และไฟล์ของโมเดลเส้นทางส่วนประกอบเทมเพลตและสไตล์

  • bower_components / bower.json- ใช้สำหรับจัดการส่วนประกอบต่างๆเช่น HTML, CSS, JavaScript, ไฟล์รูปภาพเป็นต้นและสามารถติดตั้งได้โดยใช้ npm bower_componentsไดเรกทอรีมีส่วนประกอบทั้งหมด Bower และbower.jsonมีรายชื่อของการอ้างอิงที่มีการติดตั้งโดย Ember, Ember CLI Shims และ QUnit

  • config- มีไดเร็กทอรีenvironment.jsซึ่งใช้สำหรับกำหนดการตั้งค่าของแอปพลิเคชัน

  • dist - รวมไฟล์เอาต์พุตที่ใช้งานเมื่อสร้างแอพ

  • node_modules / package.json- NPM เป็นตัวจัดการแพ็กเกจโหนดสำหรับ Node.js ซึ่งใช้สำหรับการติดตั้งแชร์และจัดการการอ้างอิงในโปรเจ็กต์ ไฟล์ package.json มีการอ้างอิง npm ปัจจุบันของแอ็พพลิเคชันและแพ็กเกจที่แสดงรายการได้รับการติดตั้งในไฟล์node_modules ไดเรกทอรี

  • public - รวมถึงเนื้อหาเช่นรูปภาพแบบอักษร ฯลฯ

  • vendor - เป็นไดเรกทอรีที่การอ้างอิงส่วนหน้าเช่น JavaScript, CSS ไม่ได้รับการควบคุมโดย Bower go

  • tests / testem.js- การทดสอบอัตโนมัติจะถูกเก็บไว้ภายใต้การทดสอบโฟลเดอร์และทดสอบวิ่งtestemของ Ember CLI ถูกจัดให้อยู่ในtestem.js

  • tmp - มีไฟล์ชั่วคราวของ Ember CLI

  • ember-cli-build.js - ระบุวิธีสร้างแอพโดยใช้ Ember CLI

กำลังเรียกใช้แอปพลิเคชัน

ในการเรียกใช้แอปพลิเคชันให้ไปที่ไดเรกทอรีโครงการที่สร้างขึ้นใหม่ -

$ cd demo-app

เราได้สร้างโครงการใหม่และพร้อมที่จะรันด้วยคำสั่งที่ระบุด้านล่าง -

$ ember server

ตอนนี้เปิดเบราว์เซอร์และไปที่ http://localhost:4200/. คุณจะได้รับหน้ายินดีต้อนรับ Ember ดังที่แสดงในภาพด้านล่าง -