วัตถุประสงค์: ใช้เทมเพลต Angularui กับโครงการที่มีอยู่
ขั้นตอนมีดังนี้:
กดเมนูเพื่อแก้ไขอินเทอร์เฟซสาธิต
เรียนรู้ว่า Angularui โหลดทุกหน้าอย่างไร ในการตั้งค่าเทมเพลตการโหลดแบบกำหนดเองให้ค้นหาย่อหน้านี้ใน Demo/Demo.js
การคัดลอกรหัสมีดังนี้:
// เมื่อ # is/,/scroll ฯลฯ ขอหน้าของ <base href = ""> + home.html ใน index.html
app.config (ฟังก์ชั่น ($ routeProvider) {
$ routeprovider.when ('/', {templateurl: 'home.html', reloadonsearch: false});
$ routeprovider.when ('/scroll', {templateurl: 'scroll.html', reloadonsearch: false});
$ routeprovider.when ('/toggle', {templateurl: 'toggle.html', reloadonsearch: false});
$ routeprovider.when ('/tabs', {templateurl: 'tabs.html', reloadonsearch: false});
$ routeprovider.when ('/หีบเพลง', {templateurl: 'accordion.html', reloadonsearch: false});
$ routeprovider.when ('/overlay', {templateurl: 'oulveray.html', reloadonsearch: false});
$ routeprovider.when ('/forms', {templateurl: 'forms.html', reloadonsearch: false});
$ routeprovider.when ('/dropdown', {templateurl: 'dropdown.html', reloadonsearch: false});
$ routeprovider.when ('/drag', {templateurl: 'drag.html', reloadonsearch: false});
$ routeprovider.when ('/carousel', {templateurl: 'carousel.html', reloadonsearch: false});
-
อ่านสคริปต์การดำเนินการของ Demo.js ต่อไป
รายการลากหายไป
ลากและวางเพื่อสลับรูปภาพ
ตัวควบคุมหลัก
l195 $ rootscope. $ on ('$ routechangestart', function () {}); และ l199 $ rootscope. $ on ('$ routechangesuccess', function () {}); การเรียนรู้ที่จะใช้. $ on () เพื่อผูกเหตุการณ์และการเปลี่ยนแปลงเหตุการณ์แฮชสามารถเรียกใช้รหัสที่นี่ หลังจากการเปรียบเทียบฉันพบว่าวิธีพื้นฐานสองวิธีเหมือนกัน ความแตกต่างคือ RouteChangestart จะถูกเรียกใช้ก่อนและ RouteChangesuccess จะถูกกระตุ้นในภายหลัง
หน้ารายการเลื่อน: แถบเลื่อนโหลดข้อมูล $ scope.scrollItems = ScrollItems; ScrollItems เป็นอาร์เรย์ของรายการ เลื่อนไปที่เหตุการณ์ด้านล่าง (ต้องมีการรีเฟรชแบบดึงลง)
ข้อมูล JSON ในแถบด้านข้างแชททางด้านขวาแสดงว่าเป็นออนไลน์หรือไม่ สำหรับฉันฉันไม่มีความสามารถในการใช้ฟังก์ชั่นการแชทในขณะนี้
หน้าฟอร์ม
เปลี่ยนเทมเพลต bootstrap ดั้งเดิม
1. ตามขั้นตอนที่ 2 ด้านบนมีสองปัจจัยที่กำหนดการโหลดของหน้า:
การคัดลอกรหัสมีดังนี้:
1 เส้นทางฐาน => base_url ()
2 แฮชพา ธ หน้าที่สอดคล้องกัน => คอนโทรลเลอร์/เมธอด
3 ซ่อน index.php
/config/config.php $ config ['index_page'] = ''; // l29 ถูกตั้งค่าให้ว่างเปล่า
.htaccess
เขียนใหม่
rewritecond $ 1!^(LightApp | LightApp/.php | index/.php | สาธารณะ | Robots/.txt) #allow LightApp | LightApp.php เพื่อเข้าถึง
rewriterule ^(.*) $ /index.php/$1 [l]
config.yaml
- การเขียนใหม่: ถ้า (! is_file () &&! is_dir ()) goto "index.php?%{query_string}"
# หาก URL ไม่ใช่ไฟล์หรือไดเรกทอรีให้ข้ามไปที่ index.php?%{query_string} และไม่สามารถวางไว้ด้านหลัง cron
4 แก้ไขเส้นทางเมนูใน demo.js
2. แทนที่เส้นทางทรัพยากร <? = __ สาธารณะ __?>, คัดลอก 2 JS และ 3 CSS ไฟล์
3. สร้างไดเรกทอรีสไตล์และสคริปต์ใหม่เพื่อจัดเก็บ JS และ CSS ของโครงการ
4. คัดลอกฟอนต์ฟอนต์ไปยังสาธารณะ
5. คัดลอกหน้า home.html, หน้า sidebar.html ไปยังไดเรกทอรีดู
สรุป: ณ จุดนี้เทมเพลตโครงการมีการใช้ Angularui