ในบทก่อนหน้านี้เราได้เรียนรู้วิธีการนำเข้ากรอบไอออนิกในโครงการ
ต่อไปเราจะแนะนำวิธีสร้างแอปพลิเคชันแอปไอออนิก
Ionic สร้างแอพถูกสร้างขึ้นโดยใช้ HTML, CSS และ JavaScript ดังนั้นเราจึงสามารถสร้างไดเรกทอรี WWW และสร้างไฟล์ index.html ในไดเรกทอรี รหัสมีดังนี้:
ทำตามขั้นตอนในการสร้างแอพนี้ให้เสร็จสมบูรณ์ในบรรณาธิการของคุณ
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> toDo </title> <meta name = "viewport" content = "เริ่มต้นในระดับสูงสุด = 1, ระดับสูงสุด = 1, ผู้ใช้-scalable = no, ความกว้าง = อุปกรณ์กว้าง" rel = "stylesheet"> <script src = "lib/ionic/js/ionic.bundle.js"> </script> <!-ไฟล์ที่รวมอยู่ในแอพที่สร้างขึ้นด้วย Cordova/phonegap นั้นจัดทำโดย Cordova/phonegap> </script>
ในรหัสข้างต้นเราได้แนะนำไฟล์ Ionic CSS, ไฟล์ Ionic JS และ Ionic AngularJS Extension Ionic.bundle.js (ionic.bundle.js)
ไฟล์ ionic.bundle.js มีส่วนขยาย AngularJS ของ Ionic Core JS, AngularJS และ Ionic หากคุณต้องการแนะนำโมดูลเชิงมุมอื่น ๆ คุณสามารถโทรหาพวกเขาได้จากไดเรกทอรี LIB/JS/Angular
Cordova.js ถูกสร้างขึ้นเมื่อสร้างแอปพลิเคชันโดยใช้ Cordova/PhoneGap ไม่จำเป็นต้องมีการแนะนำด้วยตนเอง คุณสามารถค้นหาไฟล์ในโครงการ Cordova/PhoneGap ได้ดังนั้นจึงเป็นเรื่องปกติที่จะแสดง 404 ในระหว่างการพัฒนา
สร้างแอพ
ต่อไปเราจะใช้แอปพลิเคชันที่มีชื่อ, แถบด้านข้าง, รายการ ฯลฯ ไดอะแกรมการออกแบบมีดังนี้:
สร้างแถบด้านข้าง
การสร้างแถบด้านข้างใช้คอนโทรลเลอร์เมนูด้านไอออน
แก้ไขไฟล์ index.html ที่เราสร้างขึ้นก่อนหน้านี้และแก้ไขเนื้อหาใน <body> ดังนี้:
<body> <ion-side-menus> <ion-side-menu-content> </ion-side-menu-content> <ion-side-side-menu = "left"> </ion-side-menu> </ion-side-menus> </body>
การวิเคราะห์คอนโทรลเลอร์:
Ion-Side-Menus: เป็นคอนเทนเนอร์ที่มีเมนูแถบด้านข้างที่สามารถขยายได้โดยคลิกปุ่มหรือเลื่อนหน้าจอ
Ion-Side-Menu-Content: คอนเทนเนอร์ที่แสดงเนื้อหาหลักคุณสามารถขยายเมนูได้โดยเลื่อนหน้าจอ
Ion-Side-Menu: ภาชนะสำหรับเก็บแถบด้านข้าง
เริ่มต้นแอป
ต่อไปเราจะสร้างโมดูล AngularJS ใหม่และเริ่มต้น รหัสอยู่ใน www/js/app.js:
Angular.module ('todo', ['ionic']))จากนั้นเพิ่มแอตทริบิวต์ NG-APP ลงในแท็กร่างกายของเรา:
<body ng-app = "todo">
แนะนำไฟล์ app.js บน <script src = "cordova.js"> </script> ในไฟล์ index.html:
<script src = "js/app.js"> </script>
แก้ไขเนื้อหาของแท็กตัวถังไฟล์ index.html รหัสมีดังนี้:
<body ng-app = "todo"> <ion-side-menus> <!-เนื้อหากลาง-> <ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> </ion-header-bar> <ion-content> </ion-content> <! side = "left"> <ion-header-bar> <h1> โครงการ </h1> </ion-header-bar> </ion-side-menu> </ion-side-menu> </body>
ในขั้นตอนข้างต้นเราได้เสร็จสิ้นแอปพลิเคชันของแอพ Ionic Basic
สร้างรายการ
ก่อนอื่นสร้างคอนโทรลเลอร์ todoctrl:
<body ng-app = "todo" ng-controller = "todoctrl">
ในไฟล์ app.js ให้ใช้คอนโทรลเลอร์เพื่อกำหนดข้อมูลรายการ:
Angular.module ('toDo', ['ionic']). คอนโทรลเลอร์ ('todoctrl', ฟังก์ชั่น ($ scope) {$ scope.tasks = [{title: 'Novice Tutorial'}, {title: 'ww.runoob.com'}ในหน้า index.html เราใช้ Angular NG-repeat เพื่อวนซ้ำผ่านข้อมูล:
<!-เนื้อหาตรงกลาง-> <ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> </ion-header-bar> <ion-content> <!-รายการ-> <ion-list> < งาน "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content>หลังจากการแก้ไขรหัสใน index.html แท็กร่างกายมีดังนี้:
<body ng-app = "toDo" ng-controller = "todoctrl"> <ion-side-menus> <!-เนื้อหากลาง-> <ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> ในงาน "> {{task.title}} </ion-item> </ion-list> </ion-content> <!-เมนูซ้าย-> <ion-side-menu side =" left "> <ion-header-bar> <h1> src = "http://www.runoob.com/static/ionic/js/app.js"> </script> <script src = "cordova.js"> </script> </body>สร้างหน้าเพิ่ม
หลังจากแก้ไข index.html ให้เพิ่มรหัสต่อไปนี้หลังจาก </ion-side-menus>:
<script id = "new-task.html" type = "text/ng-template"> <div> <!-แถบส่วนหัวโมดัล-> <ion-header-bar> <h1> งานใหม่ </h1> <button ng-click = "CloseNewTask () ng-submit = "createTeTask (task)"> <div> <label> <อินพุต type = "text" placeholder = "คุณต้องทำอะไร?" ng-model = "task.title"> </label> </div> <div> <button type = "ส่ง"> สร้างงาน </dose> </div> </form> </ion-content> </div> </script>
ในรหัสด้านบนเรากำหนดหน้าเทมเพลตใหม่ผ่าน <script id = "new-task.html" type = "text/ng-template">
ฟังก์ชั่น CreateTeTask (งาน) จะถูกเรียกใช้เมื่อส่งแบบฟอร์ม
ng-model =” task.title” จะกำหนดข้อมูลอินพุตของแบบฟอร์มให้กับคุณสมบัติชื่อของวัตถุงาน
แก้ไขเนื้อหาใน <ion-side-menu-content> รหัสมีดังนี้:
<!-เนื้อหาตรงกลาง-> <ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> <!-เพิ่มปุ่ม-> <button ng-click = "newtask ()"> <i> </i> </button> งาน "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> ไฟล์ app.js, รหัสคอนโทรลเลอร์มีดังนี้: modular.module ('toDo', ['ionic'] {$ scope.tasks = [{title: 'การสอนสามเณร'}, {title: 'www.runoob.com'}, {title: 'การสอนสามเณร'}, {title: 'www.runoob.com'}; {$ scope.taskModal = modal;}, {scope: $ scope, ภาพเคลื่อนไหว: 'slide-in-up'}); // โทร $ scope.cope.cope.cope.cope.cope.cope.cope.cope.cope.cope.cope.title}; $ scope.newtask = function () {$ spope.taskmodal.show ();}; // ปิดรุ่นที่เพิ่มขึ้นใหม่ $ scope.closenewTask = function () {$ spope.taskmodal.hide ();};});สร้างแถบด้านข้าง
ผ่านขั้นตอนข้างต้นเราได้นำคุณสมบัติใหม่มาใช้และตอนนี้เราเพิ่มฟังก์ชั่นแถบด้านข้างลงในแอพ
แก้ไขเนื้อหาใน <ion-side-menu-content> รหัสมีดังนี้:
<!-เนื้อหาตรงกลาง-> <ion-side-menu-content> <ion-header-bar> <button ng-click = "toggleProjects ()"> <i> </i> </button> <H1> {{activeProject.title}} </h1> <! ng-click = "newtask ()"> <i> </i> </ive button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = " activeProject.tasks "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> เพิ่มแถบด้านข้าง: <! ng-click = "newProject ()"> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "โครงการในโครงการ" ng-click = "SelectProject Project} "> {{project.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu>คำสั่ง NG-Class ใน <Item> ตั้งค่าสไตล์การเปิดใช้งานเมนู
ที่นี่เราสร้างไฟล์ JS ใหม่ app2.js (อย่าสับสนกับไฟล์ก่อนหน้า) รหัสมีดังนี้:
Angular.module ('toDo', ['ionic'])/*** โครงการโรงงานจัดการโครงการบันทึกและโหลด* จากที่เก็บข้อมูลในท้องถิ่นและยังช่วยให้เราบันทึกและโหลดดัชนีโครงการที่ใช้งานอยู่*/. โรงงาน ('โครงการ' () {return {ทั้งหมด: ฟังก์ชั่น Angular.Fromjson (projectString);} return [];}, บันทึก: ฟังก์ชั่น (โครงการ) {window.localstorage ['Projects'] = Angular.tojson (โครงการ);}, Newproject: ฟังก์ชั่น (ProjectTitle) {// เพิ่ม projectreturn parseint (window.localstorage ['lastactiveproject']) || 0;}, setLastactiveIndex: ฟังก์ชั่น (ดัชนี) {window.localstorage ['lastactiveProject'] = ดัชนี;}}}) คอนโทรลเลอร์ ('todoctrl' ฟังก์ชั่นยูทิลิตี้สำหรับการสร้างโครงการใหม่ // ด้วย projectTitlevar createProject = function (ProjectTitle) {var newProject = projects.newproject (ProjectTitle); $ scope.projects.push (newproject) หรือเริ่มต้นโครงการ $ scope.projects = projects.all (); // คว้า Active ล่าสุดหรือโครงการแรก $ prope.activeproject = $ scope.projects [projects.getLastactiveIndex ()]; // เรียกว่าสร้างโครงการใหม่ {createProject (ProjectTitle);}}; // เรียกว่าเลือกโครงการที่กำหนด $ scope.selectProject = ฟังก์ชั่น (โครงการ, ดัชนี) {$ scope.activeProject = Project; Projects.setLastactiveIndex (ดัชนี); modal $ ionicmodal.fromtemplateurl ('new-task.html', ฟังก์ชั่น (modal) {$ scope.taskmodal = modal;}, {ขอบเขต: $ scope}); $ scope.createTask = ฟังก์ชั่น (งาน) {ถ้า ( {return;} $ scope.activeproject.tasks.push ({title: task.title}); $ scope.taskmodal.hide (); // ไม่มีประสิทธิภาพ แต่บันทึกโครงการทั้งหมด {$ scope.taskModal.show ();}; $ scope.closenewTask = function () {$ scope.taskmodal.hide ();} $ scope.toggleprojects = function () {$ ionicsidemenudelegate.toggleft () เริ่มต้น // อย่างถูกต้อง $ timeout (function () {ถ้า ($ spope.projects.length == 0) {ในขณะที่ (จริง) {var projectTitle = พรอมต์ ('ชื่อโครงการแรกของคุณ:'); ถ้า (ProjectTitle) {createProject (ProjectTitle); break;}}}); รหัสเมนูด้านไอออนด้านในร่างกายมีดังนี้ :: <ไอออน--เมนัส> <!-เนื้อหากลาง-> <ไอออน--เมนู-คอนเนตเทนท์> <ไอออน-หัว-แบก> <ปุ่ม ng-click = "toggleprojects ()"> <i> </i> -> <button ng-click = "newtask ()"> <i> </i> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = " activeProject.tasks "> {{task.title}} </ion-item> </ion-list> </ion-content> <!-คอลัมน์ซ้าย-> <ion-side-menu side =" left "> <ion-header-bar> <h1> ng-click = "newProject ()"> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "โครงการในโครงการ" ng-click = "SelectProject Project} "> {{project.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu> </side-side-menus>เนื้อหาข้างต้นเป็นรหัสทั้งหมดของวิธีที่ Ionic สร้างโครงการแอพที่ตัวแก้ไขแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!