Dalam bab -bab sebelumnya, kami telah belajar cara mengimpor kerangka kerja ionik ke dalam proyek.
Selanjutnya, kami akan memperkenalkan Anda cara membuat aplikasi aplikasi ionik.
Ionic membuat aplikasi dibangun menggunakan HTML, CSS dan JavaScript, sehingga kami dapat membuat direktori WWW dan membuat file index.html di direktori. Kodenya adalah sebagai berikut:
Ikuti langkah -langkah untuk menyelesaikan pembuatan aplikasi ini dengan cermat pada editor Anda.
<! Doctype html> <html> <adap> <meta charset = "utf-8"> <itement> TODO </itement> <meta name = "viewport" content = "skala awal = 1, skala maksimum = 1, skala scalable = no, lebar = perangkat-width"> <tautan href = "lib/lib/lib/clals = width = device-width"> <link href = "lib/lib/lib/libs/cl." src = "lib/ionic/js/ionic.bundle.js"> </script> <!-File yang disertakan dalam aplikasi yang dibuat dengan cordova/phoneGap disediakan oleh cordova/phoneGap (404 ditampilkan selama pengembangan)-<script src = "cordova.js"> </script> </head> </body src = "heKova.js"> </script> </head> </body> <m Body>
Dalam kode di atas, kami telah memperkenalkan file CSS ionik, file ionik JS dan ionic AngularJS extension ionic.bundle.js (ionic.bundle.js).
File ionic.bundle.js sudah berisi ekstensi AngularJS dari inti ionik, AngularJS, dan ionik. Jika Anda perlu memperkenalkan modul sudut lainnya, Anda dapat menghubungi mereka dari direktori lib/js/sudut.
Cordova.js dihasilkan saat membuat aplikasi menggunakan cordova/phoneGap. Itu tidak memerlukan pengantar manual. Anda dapat menemukan file dalam proyek Cordova/PhoneGap, jadi normal untuk menampilkan 404 selama pengembangan.
Buat aplikasi
Selanjutnya, kami akan menerapkan aplikasi yang mencakup judul, bilah samping, daftar, dll. Diagram desain adalah sebagai berikut:
Buat bilah samping
Penciptaan sidebar menggunakan pengontrol Menus sisi-ion.
Edit file index.html yang kami buat sebelumnya dan memodifikasi konten di <body> sebagai berikut:
<tody> <ion-side-menu> <Pan-Sisi-menu-konten> </ion-side-menu-konten> <ion-side-menu sisi = "kiri"> </ion-side-menu> </ion-side-menu> </body>
Analisis Pengontrol:
Ion-side-menus: adalah wadah dengan menu bilah samping yang dapat diperluas dengan mengklik tombol atau menggeser layar.
Konten ion-side-menu: wadah yang menampilkan konten utama, Anda dapat memperluas menu dengan menggeser layar.
ion-side-menu: wadah untuk menyimpan sidebar.
Inisialisasi aplikasi
Selanjutnya kami membuat modul AngularJS baru dan menginisialisasi itu. Kode ini terletak di www/js/app.js:
angular.module ('todo', ['ionic'])Kemudian tambahkan atribut NG-App ke tag tubuh kita:
<body ng-app = "todo">
Memperkenalkan file app.js pada <skrip src = "cordova.js"> </script> dalam file index.html:
<skrip src = "js/app.js"> </script>
Ubah konten tag tubuh file index.html, kodenya adalah sebagai berikut:
<body ng-app = "todo"> <ion-side-----den <!-Center Content-> <ion-side--dontent> <ion-header-bar> <h1> TODO </h1> </ion-header-Bar> <ion-content> </ion-content> <!-Menu-<oon--on---Ion--Ion--Ion--Ion--Ion--Ion--Ion--Ion--ION--ION--ION--ION--ION--ION--ION--ION- Side = "Left"> <ion-header-bar> <h1> Proyek </h1> </ion-header-bar> </ion-side-menu> </ion-side-menu> </body>
Dalam langkah -langkah di atas, kami telah menyelesaikan aplikasi aplikasi dasar ionik.
Buat daftar
Pertama -tama buat controller todoctrl:
<body ng-app = "todo" ng-controller = "todoctrl">
Dalam file app.js, gunakan controller untuk menentukan data daftar:
angular.module ('TODO', ['ionic']). Controller ('Todoctrl', function ($ scope) {$ scope.tasks = [{title: 'tutorial pemula'}, {title: 'www.runoob.com'}, {judul: 'tutorial novice'} {} {{{{{{{{novice ', {www.Di halaman index.html, kami menggunakan Angular NG-RePeat untuk beralih melalui data:
<!-Konten tengah-> <teri-side--dontent> <ion-header-bar> <h1> todo </h1> </ion-header-bar> <ion-content> <!-list-> <peni--list> <ion-item ng-repeat = "Tugas Dalam Tugas "> {{Task.Title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content>Setelah modifikasi, kode dalam tag tubuh index.html adalah sebagai berikut:
<body ng-app="todo" ng-controller="TodoCtrl"><ion-side-menus><!-- Center content--><ion-side-menu-content><ion-header-bar><h1>Todo</h1></ion-header-bar><ion-content><!-- List--><ion-list><ion-item ng-repeat="task in tasks">{{task.title}}</ion-item></ion-list></ion-content><!-- Left menu--><ion-side-menu side="left"><ion-header-bar><h1>Projects</h1></ion-header-bar></ion-side-menu></ion-side-menus><script src = "http://www.runoob.com/static/ionic/js/app.js"> </script> <script src = "cordova.js"> </script> </body>Buat Halaman Tambah
Setelah memodifikasi index.html, tambahkan kode berikut setelah </ion-side-menu>:
<skrip id = "new-task.html" type = "text/ng-template"> <vet> <!-bilah header modal-> <ion-header-bar> <h1> Tugas baru </h1> <tombol-klik = "closeenewTask ()"> Batal </tombol> </ion-header-Bar> <! ng-submit = "createTask (Tugas)"> <div> <label> <input type = "text" placeholder = "Apa yang perlu Anda lakukan?" NG-Model = "Task.Title"> </LABEL> </SIV> <DIV> <TOLEPTY TYPE = "Kirim"> Buat Tugas </button> </div> </form> </ion-content> </div> </script>
Dalam kode di atas, kami mendefinisikan halaman template baru melalui <skrip id = "new-task.html" type = "text/ng-template"> .
Fungsi CreateTask (Tugas) dipicu saat formulir diserahkan.
NG-Model = ”Task.Title” akan menetapkan data input formulir ke properti judul objek tugas.
Ubah konten di <ion-side-menu-content>, kodenya adalah sebagai berikut:
<!-- Center content--><ion-side-menu-content><ion-header-bar><h1>Todo</h1><!-- Add a button--><button ng-click="newTask()"><i></i></button></ion-header-bar><ion-content><!-- List--><ion-list><ion-item ng-repeat="task in Tugas "> {{Task.Title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> File app.js, kode pengontrol adalah sebagai berikut: toMular.module ('TODO', ['ionic']). {$ scope.tasks = [{title: 'tutorial novice'}, {title: 'www.runoob.com'}, {title: 'tutorial novice'}, {title: 'www.runoob.com'}]; // Buat dan muat model $ ionicmodal.fromtemPlate.kromtemPplate '}]; {$ scope.taskmodal = modal;}, {scope: $ scope, animation: 'slide-in-up'}); // hubungi $ scope.createTask = function (tugas) {$ scope.tasksks.push ({title: task.title}); $ scope.taskmodal.push ({title: Task.title}); $ scope.taskmodal.push (); $ scope.newTask = function () {$ scope.taskmodal.show ();}; // Tutup model $ scope.closenewTask = function () {$ scope.taskmodal.hide ();});Buat bilah samping
Melalui langkah -langkah di atas, kami telah menerapkan fitur -fitur baru, dan sekarang kami menambahkan fungsi sidebar ke aplikasi.
Ubah konten di <ion-side-menu-content>, kodenya adalah sebagai berikut:
<!-Konten tengah-> <ion-side-menu-content> <ion-header-bar> <utute ng-click = "toggleprojects ()"> <i> </i> </button> <h1> {{ActiveProject.title}} </h1> <!-Tambahkan tombol-> <ActiveProject.Title} </H1> <!-Tambahkan tombol-> ng-click = "newTask ()"> <i> </i> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "tugas masuk activeProject.tasks">{{task.title}}</ion-item></ion-list></ion-content></ion-side-menu-content>Add a sidebar: <!-- Left-bar--><ion-side-menu side="left"><ion-header-bar><h1>Projects</h1><button ng-click="newProject()"></button></ion-header-bar><ion-content scroll="false"><ion-list><ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == Project} "> {{Project.Title}} </ion-item> </ion-list> </ion-content> </ion-side--side>Petunjuk NG-Class di <Ion-item> menetapkan gaya aktivasi menu.
Di sini kami membuat file JS baru App2.js (untuk tidak bingung dengan yang sebelumnya), kodenya adalah sebagai berikut:
angular.module ('TODO', ['ionic'])/*** Proyek Pabrik menangani proyek menyimpan dan memuat* dari penyimpanan lokal, dan juga memungkinkan kami menyimpan dan memuat* indeks proyek aktif terakhir.*/. Factory ('Project', function () {return {all: function () {var ProjectSstring = window.LocalStors ('Project (') {var Projectsstring = window.LocalStors (' Angular.Fromjson (ProjectString);} return [];}, save: function (proyek) {window.localstorage ['Project'] = Angular.toJson (proyek);}, newProject: function (function) {// tambahkan projectreturn baru {title: ProjectTitle, Toksks: (Tasks: [] {{{{{{{{{{function) ParseInt (Window.LocalStorage ['LastActiveProject']) ||. {// Fungsi utilitas untuk membuat proyek baru // dengan proyektitlevar createProject = function (ProjectTitle) {var newProject = Projects.newProject (ProjectTitle); $ scope.projects.push (newProject); Projects.Save ($ scope.projects); $ scope.sele $ scope.projects.length-1);} // memuat atau menginisialisasi proyek $ scope.projects = proyeks.all (); // ambil yang aktif terakhir, atau proyek pertama $ scope.activeProject = $ scope.projects (projects.getlastictactiveIndex (); // dipanggil untuk membuat proyek baru $ scope.newproPoIndex =); name '); if (ProjectTitle) {createProject (ProjectTitle);}}; // dipanggil untuk memilih proyek yang diberikan $ scope.selectproject = function (proyek, indeks) {$ scope.activeProject = Projects.ssetlastictiveIndex (index); $ ionicseDeMeDelegate.togglelege.togglelEf modal $ ionicmodal.fromTemplateUrl ('new-task.html', function (modal) {$ scope.taskmodal = modal;}, {scope: $ scope}); $ scope.createTask = function) {if (! $ scope.activeProProPrect ||! {return;} $ scope.activeProject.tasks.push ({title: Task.title}); $ scope.taskmodal.hide (); // tidak efisien, tetapi simpan semua proyekprojects.save ($ scope.projects); Task.title = "";}; $ scope.new = Task. {$ scope.taskmodal.show ();}; $ scope.closenewTask = function () {$ scope.taskmodal.hide ();} $ scope.toggleProjects = function () {$ ionicsideDelegate.toggleLefts ();}; {) {$ ionicsideDeLegate.toggleeleft ();}; diinisialisasi // benar $ timeout (function () {if ($ scope.projects.length == 0) {while (true) {var proyectTitle = prompt ('judul proyek pertama Anda:'); if (proyektitle) {createProject (proyektitle); break;}}}});}); Kode ion-side-menus dalam tubuh adalah sebagai berikut :: <Ion-side-menu> <!-konten tengah-> <ion-side-menu-content> <ion-header-bar> <button ng-click = "toggleprojects ()"> <i> </i> </tombol <h1> <h1> {{{{{{{{{{{{{{{{h1> {{{{{h1> -> <tombol ng-click = "newTask ()"> <i> </i> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "tugas di dalam ActiveProject.tasks "> {{Task.Title}} </ion-item> </ion-fist> </ion-content> <!-Kolom kiri-> <ion-side-menu sisi =" kiri "> <ion-header-bar> <h1> Proyek </h1> ng-click="newProject()"></button></ion-header-bar><ion-content scroll="false"><ion-list><ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == Project} "> {{Project.Title}} </ion-item> </ion-list> </ion-content> </ion-side--dion> </ion-side--dies>Konten di atas adalah seluruh kode bagaimana ionik membuat proyek aplikasi yang diperkenalkan editor kepada Anda. Saya harap ini akan membantu semua orang!