ionic3 Login-Logout แบบมี SideMenu

ภาพที่ 1 : เพจ Login ไม่อยู่ในแทบ และไม่แสดงเมนู (เพจอื่นๆนอกจาก Login แสดงเมนูได้)
ภาพที่ 2 : เพจ Home, About และ Contact อยู่ในแทบ
ภาพที่ 3 : กดด้านบนซ้าย หรือรูทจากหน้าจอด้านซ้ายมาด้านขวา แสดงเมนู
ภาพที่ 4 : เพจ Help ไม่อยู่ในแทบ
ภาพที่ 5 : เพจ More มีหน้าจอ logout

login UI2

สร้างโปรเจ็กส์

> ionic start tabsApp tabs

สร้างหน้า login

> ionic g page login

สร้างเพจชื่อ more

ionic g page more

สร้างเพจชื่อ help

ionic g page help

แก้ไขไฟล์

  1. src/app/app.module.ts
  2. src/app/app.components.ts
  3. src/app/app.html
  4. src/pages/login/login.html
  5. src/pages/login/login.ts
  6. src/pages/home/home.ts
  7. src/pages/home/home.html
  8. src/pages/about/about.html
  9. src/pages/contact/contact.html
  10. src/pages/help/help.html
  11. src/pages/tabs/tabs.html
  12. src/pages/tabs/tabs.ts
  13. src/pages/more/more.html
  14. src/pages/more/more.ts

1. src/app/app.module.ts

2. src/app/app.components.ts

3. src/app/app.html

4. src/pages/login/login.html

5. src/pages/login/login.ts

บรรทัดที่ 13 : ไม่แสดงเมนูที่เพจ login

6. src/pages/home/home.ts

7. src/pages/home/home.html
8. src/pages/about/about.html
9. src/pages/contact/contact.html
10. src/pages/help/help.html

ข้อ 7-10 เพิ่มบรรทัดที่ 3-5 เหมือนกัน

11. src/pages/tabs/tabs.html

12. src/pages/tabs/tabs.ts

13. src/pages/more/more.html

14. src/pages/more/more.ts

Link