في الفصول السابقة ، تعلمنا كيفية استيراد الأطر الأيونية إلى مشاريع.
بعد ذلك ، سنقدم لك كيفية إنشاء تطبيق تطبيق أيوني.
يتم إنشاء تطبيقات إنشاء Ionic باستخدام HTML و CSS و JavaScript ، حتى نتمكن من إنشاء دليل www وإنشاء ملف index.html في الدليل. الرمز كما يلي:
اتبع الخطوات لإكمال إنشاء هذا التطبيق بعناية على المحرر الخاص بك.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> toDo </itha> <meta name = "viewport" content = "inial-scale = 1 ، maximum-scale = 1 ، ster-scalable = no ، width = width"> <link href = "lib = Rel = "STYLESHEET"> <script src = "lib/ionic/js/ionic.bundle.js"> </script> <!-يتم توفير الملفات المتضمنة في التطبيق الذي تم إنشاؤه باستخدام Cordova/PhoneGap بواسطة Cordova/Phonegap (404 معروض أثناء التطوير)-> <البرنامج النصي src = "cordova.js"> </script> </head> <body> </body> </html>
في الكود أعلاه ، قدمنا ملف CSS الأيوني ، وملف JS الأيوني و ionic AngularJS Extension Ionic.bundle.js (ionic.bundle.js).
يحتوي ملف ionic.bundle.js بالفعل على امتدادات AngularJS لـ ionic Core JS و AngularJs والأيوني. إذا كنت بحاجة إلى تقديم وحدات زاوية أخرى ، فيمكنك الاتصال بها من الدليل LIB/JS/Angular.
يتم إنشاء Cordova.js عند إنشاء تطبيق باستخدام Cordova/PhoneGap. لا يتطلب مقدمة يدوية. يمكنك العثور على الملف في مشروع Cordova/PhoneGap ، لذلك من الطبيعي عرض 404 أثناء التطوير.
إنشاء تطبيق
بعد ذلك ، سنقوم بتنفيذ تطبيق يتضمن العنوان ، الشريط الجانبي ، القائمة ، إلخ. مخطط التصميم كما يلي:
إنشاء شريط جانبي
يستخدم إنشاء الشريط الجانبي وحدة التحكم في الجانب الأيوني.
قم بتحرير ملف index.html الذي أنشأناه مسبقًا وتعديل المحتويات في <Body> على النحو التالي:
<Body> <-ion-side-menus> <-ion-side-menu-content> </onide-side-menu-content> <ion-side-menu side = "left"> </ion-side-menu> </ion-side-menus> </body>
تحليل وحدة التحكم:
Ion-Side-Menus: هي حاوية تحتوي على قائمة الشريط الجانبي يمكن توسيعها عن طريق النقر فوق زر أو تحريك الشاشة.
Ion-Side-Menu-Manontent: حاوية تعرض المحتوى الرئيسي ، يمكنك توسيع القائمة عن طريق تحريك الشاشة.
أيون-مينو: الحاوية لتخزين الشريط الجانبي.
تهيئة التطبيق
بعد ذلك ، نقوم بإنشاء وحدة 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> tod Side = "Left"> <ion-Header-Bar> <h1> مشاريع </h1> </oneion-header-bar> </onide-side-menu> </onide-side-menu> </body>
في الخطوات المذكورة أعلاه ، أكملنا تطبيق التطبيق الأساسي الأيوني.
إنشاء قائمة
قم أولاً بإنشاء وحدة تحكم Todoctrl:
<body ng-app = "todo" ng-controller = "todoctrl">
في ملف app.js ، استخدم وحدة التحكم لتحديد بيانات القائمة:
Angular.Module ('todo' ، ['ionic']). controller ('TODOCTRL' ، function ($ scope) {$ scope.tasks = [{title: 'novice tutorial'} ، {title: 'www.runob.com'} ،في صفحة الفهرس.
<!-محتوى المركز-> <-ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> </ion-header-bar> <-ion-content> <!-list-> <-ion-list> <ion-item ng-repeat = "task in المهام "> {{task.title}} </ion-item> </ion-list> </ion-content> </onide-side-men-content>بعد التعديل ، يكون الكود في علامة الجسم index.html كما يلي:
<body ng-app = "todo" ng-controller = "todoctrl"> <ion-side-menus> <!-محتوى المركز-> <-ion-side-men-content> <ion-header-bar> <h1> todo </h1> </ion-header-bar> <Iion-content> <! في المهام "> {{task.title}} </ion-item> </on-list> </ion-content> <!-القائمة اليسرى-> <ion-side-menu side =" left "> <ion-header-bar> <h1> مشاريع </h1> </ion-header-bar> 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"> <viv> <!-شريط الرأس المشروط-> <ion-header-bar> <h1> مهمة جديدة </h1> <button ng-click = "closenewtask ()"> إلغاء </ion-header-bar> ng-submit = "createTask (task)"> <viv> <blabe> <input type = "text" placeholder = "ماذا تحتاج إلى القيام به؟" ng-model = "task.title"> </billy> </viv> <div> <button type = "submit"> إنشاء مهمة </button> </viv> </form> </ion-content> </viv> </script>
في الكود أعلاه ، نحدد صفحة قالب جديدة من خلال <script id = "new-task.html" type = "text/ng-template"> .
يتم تشغيل وظيفة CreateTask (المهمة) عند تقديم النموذج.
NG-Model = "Task.Title" ستعين بيانات إدخال النموذج إلى خاصية العنوان لكائن المهمة.
قم بتعديل المحتوى في <ion-side-menu-content> ، الرمز هو كما يلي:
<!-محتوى المركز-> <-ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> <!-أضف زرًا-> <button ng-click = "newtask ()"> <i> </i> </i> </i button> </ion-header-bar> المهام "> {{task.title}} </ion-item> </on-list> </ion-content> </ion-side-men-content> app.js file ، رمز وحدة التحكم كما يلي: angular.module ('todo' ، ['ionic']). {$ scope.tasks = [{title: 'Novice Tutorial'} ، {title: 'www.runoob.com'} ، {title: 'novice tutorial'} ، {title: 'www.runoob.com'}] {$ scope.taskmodal = modal ؛} ، {scope: $ scope ، الرسوم المتحركة: 'slide-up'}) ؛ // call $ scope. $ scope.newtask = function () {$ scope.taskmodal.show () ؛} ؛ // أغلق النموذج المضافة حديثًا $ scope.closenewtask = function () {$ scope.taskmodal.hide () ؛} ؛}) ؛إنشاء شريط جانبي
من خلال الخطوات المذكورة أعلاه ، قمنا بتنفيذ ميزات جديدة ، والآن نضيف وظيفة الشريط الجانبي إلى التطبيق.
قم بتعديل المحتوى في <ion-side-menu-content> ، الرمز هو كما يلي:
<!-المحتوى المركزي-> <-ion-side-menu-content> <ion-header-bar> <button ng click = "toggleProjects ()"> <i> </i> </utton> <h1> {{ActiveProject.title}} </h1> <!-إضافة زر- ng-click = "newtask ()"> <i> </i> </utton> </ion-header-bar> <ion-content scroll = "false"> <ion-list ActiveProject.tasks "> {{task.title}} </ion-item> </on-list> </ion-content> </ion-side-men-content> أضف شريطًا جانبيًا: <!-bar-bar-> <ion-side-menu side =" left " ng-click = "newProject ()"> </utton> </ion-header-bar> <ion-content scroll = "false"> <ion-lister> <ion-item ng-repeat = "project in project Project} "> {{project.title}} </ion-item> </ion-list> </ion-content> </onide-menu>يضع التوجيه من فئة NG في <Ion-item> نمط تنشيط القائمة.
هنا نقوم بإنشاء ملف JS جديد App2.js (حتى لا يتم الخلط بينه وبين الرمز السابق) ، والرمز هو كما يلي:
Angular.Module ('todo' ، ['ionic'])/*** تعالج مصنع المشاريع مشاريع توفير وتحميل* من التخزين المحلي ، كما يتيح لنا حفظ وتحميل مؤشر المشروع النشط الأخير. Angular.fromjson (projectString) ؛} return [] ؛} ، حفظ: الوظيفة (المشاريع) {window.localStorage ['Projects'] = Angular.tojson (Projects) ؛} ، newProject: function (projectTitle) {// إضافة مشروع جديد {title: projectle ، tasks: [] parseint (window.localStorage ['lastactiveProject']) || وظيفة إنشاء مشروع جديد // مع projectTiTiTlevar CreateProject = function (projectTitle) {var newProject = projects.newProject (projectTitle) ؛ $ scope.projects.push (newProject) ؛ projects.save ($ scope.projects) تهيئة المشاريع $ scope.projects = projects.all () ؛ // الاستيلاء على آخر نشط ، أو أول مشروع $ scope.activeProject = $ scope.projects [projects.getLastActiveIndex ()] {createProject (projectTitle) ؛}} ؛ // استدعاء لتحديد المشروع المعطى $ scope.selectproject = function (project ، index) {$ scope.activeProject = projects.setLastaCtactiveIndex (index) ؛ $ ionicsidemenudelegate.toggleleft (false) ؛} ؛ modal $ ionicmodal.fromtemplateUrl ('new-task.html' ، function (modal) {$ scope.taskmodal = modal ؛} ، {scope: $ scope}) ؛ $ scope.createTask = function (task) {if (! $ secope.activeproject || {return ؛} $ scope.activeproject.tasks.push ({title: task.title}) ؛ $ scope.taskmodal.hide () ؛ // غير فعالة ، ولكن حفظ جميع projectsprojects.save ($ scope.projects) ؛ task.title = "" ؛ "} ؛ {$ scope.taskmodal.show () ؛} ؛ $ scope.closenewtask = function () {$ scope.taskmodal.hide () ؛} $ scope.toggleProjects = function () {$ ionicsideMenudElegate.toggleleft () ؛ تهيئة // بشكل صحيح $ timeout (function () {if ($ scope.projects.length == 0) {بينما (true) {var projectTitle = proper ('عنوان المشروع الأول:') ؛ if (projectTitle) {createProject (projectTitle) ؛ break ؛}}}}}) ؛}) ؛}) ؛ رمز Menus Ion-side في الجسم كما يلي :: <ion-side-menus> <!-محتوى المركز-> <-ion-side-menu-content> <ion-header-bar> <button ng-click = "toggleprojects ()> <i> </i> </button> <h1> -> <button ng-click = "newtask ()"> <i> </i> </utton> </ion-header-bar> <ion-content scroll = "false" ActiveProject.tasks "> {{task.title}} </ion-item> </on-list> </ion-content> <!-العمود الأيسر-> <ion-side-menu side =" left "> <ion-header-bar> <h1> ng-click = "newProject ()"> </utton> </ion-header-bar> <ion-content scroll = "false"> <ion-lister> <ion-item ng-repeat = "project in project Project} "> {{project.title}} </ion-item> </ion-list> </on-content> </onide-side-menu> </onide-side-menus>المحتوى أعلاه هو الكود الكامل لكيفية إنشاء Ionic مشروع تطبيق قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!