In den vorherigen Kapiteln haben wir gelernt, wie man ionische Rahmenbedingungen in Projekte importiert.
Als nächstes werden wir Ihnen vorstellen, wie Sie eine ionische App -Anwendung erstellen.
Ionic erstellt Apps, die mit HTML, CSS und JavaScript erstellt werden, sodass wir ein WWW -Verzeichnis erstellen und im Verzeichnis eine Index.html -Datei erstellen können. Der Code ist wie folgt:
Befolgen Sie die Schritte, um die Erstellung dieser App in Ihrem Editor sorgfältig zu vervollständigen.
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Todo </title> <meta name = "viewport" content = "initial-scale = 1, maximal scale = 1, user-scalable = no, widthth = Geräte-width"> <link href = "lib/ib/°." rel = "styleSheet"> <script src = "lib/ionic/js/ionic.bundle.js"> </script> <!-Dateien, die in der App mit Cordova/PhoneGap enthalten sind, werden von Cordova/TelefonGap (404 während der Entwicklung angezeigt)-> <src = "cordova.js.js"> </</</> </hace> </lybody>;
Im obigen Code haben wir die ionische CSS -Datei, die ionische JS -Datei und die Ionic AngularJS -Erweiterung ionic.bundle.js (ionic.bundle.js) eingeführt.
Die Ionic.bundle.js -Datei enthält bereits die AngularJs -Erweiterungen von Ionic Core JS, AngularJs und Ionic. Wenn Sie andere Winkelmodule einführen müssen, können Sie sie aus dem Verzeichnis LIB/JS/Angular aufrufen.
Cordova.js wird beim Erstellen einer Anwendung mithilfe von Cordova/PhoneGap generiert. Es erfordert keine manuelle Einführung. Sie finden die Datei im Cordova/PhoneGap -Projekt, sodass es normal ist, 404 während der Entwicklung anzuzeigen.
Erstellen Sie eine App
Als nächstes werden wir eine Anwendung implementieren, die Titel, Seitenleiste, Liste usw. enthält. Das Design -Diagramm lautet wie folgt:
Erstellen Sie eine Seitenleiste
Die Sidebar-Erstellung verwendet den Ionen-Seite-Menus-Controller.
Bearbeiten Sie die zuvor erstellte Index.html -Datei und ändern Sie den Inhalt in <body> wie folgt:
<body> <ionside-menus> <ion-Seite-Menu-Kontent> </Ion-Seite-Menu-Konzent> <Ion-Seite-Menu-Seite = "links"> </Ion-Seite-Menu> </Ion-Seite-Menus> </body>
Controller -Analyse:
Ion-Side-Menus: Ist ein Container mit einem Sidebar-Menü, das durch Klicken auf eine Schaltfläche oder das Schieben auf den Bildschirm erweitert werden kann.
Ion-Side-Menu-In-Content: Ein Container, in dem der Hauptinhalt angezeigt wird, können Sie das Menü erweitern, indem Sie den Bildschirm schieben.
Ion-Side-Menu: Der Behälter zum Speichern der Seitenleiste.
Initialisieren Sie die App
Als nächstes erstellen wir ein neues AngularJS -Modul und initialisieren es. Der Code befindet sich in www/js/app.js:
Angular.module ('Todo', ['Ionic'])Fügen Sie dann das NG-App-Attribut zu unserem Körper Tag hinzu:
<Body Ng-App = "Todo">
Führen Sie die Datei app.js in die <script src = "cordova.js"> </script> in der index.html -Datei ein:
<script src = "js/app.js"> </script>
Ändern Sie den Inhalt des Datei -Tag -Tags index.html, der Code lautet wie folgt:
<Body ng-App = "Todo"> <ionside-menus> <!-CENTER Content-> <Ionside-Menu-Kontent> <Ion-Header-Bar> <h1> Todo </h1> </Ion-Header-Bar> </Ion-Content> </Ion-Header-BAR> </ION-CONTENT> <! Side = "links"> <Ion-Header-Bar> <h1> Projekte </h1> </Ion-Header-Bar> </Ion-Seite-Menu> </Ion-Seite-Menu> </body>
In den obigen Schritten haben wir die Anwendung der Ionic Basic App abgeschlossen.
Erstellen Sie eine Liste
Erstellen Sie zunächst einen Controller TodocTRL:
<Body ng-App = "Todo" ng-controller = "todoctrl">
Verwenden Sie in der Datei App.js den Controller, um die Listendaten zu definieren:
angular.module('todo', ['ionic']).controller('TodoCtrl', function($scope) {$scope.tasks = [{ title: 'novice tutorial' },{ title: 'www.runoob.com' },{ title: 'novice tutorial' },{ title: 'www.runoob.com' }];});Auf der Seite Index.html verwenden wir Angular NG-Repeat, um die Daten zu iterieren:
<!-Center Inhalt-> <Ion-Seite-Menu-In-In-In-In-Inhalt> <Ion-Header-Bar> <h1> Todo </h1> </Ion-Header-Bar> <Ion-Content> <!-List-> <Ionlist> <ion-item ng-repeat = "Aufgabe in Tasks "> {{Task.title}} </Ion-iTem> </Ion-list> </Ion-Inhalt> </Ion-Seite-Menu-Content>Nach der Änderung lautet der Code im Körper -Tag index.html wie folgt:
<body ng-App = "todo" ng-controller = "todoctrl"> <ionside-menus> <!-CENTER-Inhalt-> <Ion-Side-Menu-Content> <Ion-Header-Bar> <H1> Todo </H1> </Ion-Header-Barr-BAR <Ion-ion-ion-ion-ion-ion-z-content> <! ng-Repeat = "Task in Aufgaben"> {{{task.title}} </ion-iTem> </Ionlist> </Ion-Content> <!-Linkes Menü-> <ionside-Menu Side = "links"> <Ion-Header-Bar> <h1> Projekte </h1> </ion-header-bar> </ionside-menu> </ionside-menus> <script src = "http://www.runoob.com/IONIC/IONIC/JS/APP.JS"> </</script src = "cordova.js"> </script> </body>Erstellen Sie eine Seite hinzufügen
Fügen Sie nach der Änderung von Index.html den folgenden Code nach </ionside-Menus> hinzu:
<script id = "new-task.html" type = "text/ng-template"> <div> <!-Modal Header-Balken-> <Ion-Header-Bar> <h1> Neue Aufgabe </h1> <button ng-klick = "Clossewtask ()"> Abbrechen </Button </ion-Header-Bar> <!-modal content-Bereich-> </ion-header-bar> <!-"-". ng-submit = "createTask (task)"> <div> <label> <Eingabe type = "text" placeholder = "Was müssen Sie tun?" ng-model = "task.title"> </label> </div> <div> <schalttype = "subieren"> Aufgabe erstellen </button> </div> </form> </ion-content> </div> </script>
Im obigen Code definieren wir eine neue Vorlagenseite über <script id = "new-task.html" type = "text/ng-template"> .
Die Funktion CreateTask (Task) wird ausgelöst, wenn das Formular eingereicht wird.
ng-model = ”task.titel” ält der Tit-Eigenschaft des Task-Objekts die Eingabedaten des Formulars zu.
Ändern Sie den Inhalt in <Ion-Side-Menu-Content>, der Code ist wie folgt:
<!-- 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 Tasks "> {{Task.title}} </Ion-iTem> </Ion-List> </Ion-Content> </Ion-Side-Menu-Content> App.js-Datei, der Controller-Code ist wie folgt: Angular.module ('todo', ['Ionic']. {$scope.tasks = [{ title: 'Novice Tutorial' },{ title: 'www.runoob.com' },{ title: 'Novice Tutorial' },{ title: 'www.runoob.com' }];// Create and load the model $ionicModal.fromTemplateUrl('new-task.html', function(modal) {$ scope.taskModal = modal;}, {Scope: $ scope, Animation: 'Slide-in-up'}); // $ scope.createTask = function (task) {$ scope.tasks.push ({title: task.title}); $ scope.taskmodal.hide (); $ scope.newtask = function () {$ scope.taskModal.show ();}; // Schließen Sie das neu hinzugefügte Modell $ scope.closewtask = function () {$ scope.taskModal.hide ();};});Erstellen Sie eine Seitenleiste
In den oben genannten Schritten haben wir neue Funktionen implementiert, und jetzt fügen wir der App die Sidebar -Funktion hinzu.
Ändern Sie den Inhalt in <Ion-Side-Menu-Content>, der Code ist wie folgt:
<!-CENTER-Inhalt-> <Ion-Side-Menu-Content> <Ion-Header-Bar> <Button ng-klick = "ToggleProjects ()"> <i> </i> </button ng-klick = "newtask ()"> <i> </i> </button> </ion-header-bar> <ion-content scroll = "false"> <Ionlist> <ion-assem ng-repeat = "Aufgabe in 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-klick = "newProject ()"> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-assem ng-Repeat = "Projekt in Projekten" ng-klick = "selectProject (Projekt, $ index)" ng-class = "activeProject ==" project} "> {{project.title}} </ion-iTem> </Ionlist> </Ion-In-In-In-In-In-In-In-In-Kontent> </Ion-Seite-Menu>Die Anweisung der NG-Klasse in <Ion-item> legt den Menüaktivierungsstil fest.
Hier erstellen wir eine neue JS -Datei app2.js (um nicht mit dem vorherigen verwechselt zu werden), der Code lautet wie folgt:
Angular.module ('Todo', ['Ionic'])/*** Die Projekte Factory -Handles sparen und laden Projekte* aus dem lokalen Speicher und können auch den* letzten aktiven Projektindex speichern und laden. angular.fromJson(projectString);}return [];},save: function(projects) {window.localStorage['projects'] = angular.toJson(projects);},newProject: function(projectTitle) {// Add a new projectreturn {title: projectTitle,tasks: []};},getLastActiveIndex: function() {return parseInt (window.localstorage ['lastactiveProject']) ||. Funktion zum Erstellen eines neuen Projekts // mit dem gegebenen Projekttitlevar createReproject = function Initialisieren Sie Projekte $ scope.projects = projects.All (); // Greifen Sie nach dem letzten aktiven oder dem ersten Projekt $ scope.activeProject = $ scope.projects [Projects {createReject (projectTitle);}}; // rufen auf, um das angegebene Projekt $ scope.selectProject = Funktion (Projekt, Index) {$ scope.activeProject = projects.setLastactiveIctIndex (Index); modal $ ionicModal.fromTemplateurl ('new-task.html', function (modal) {$ scope.taskModal = modal;}, {scope: $ scope}); {return;} $ scope.activeProject.tasks.push ({Titel: task.title}); {$ scope.taskModal.show ();}; $ scope.closewtask = function () {$ scope.taskModal.hide ();} $ scope.toggleProjects = function () {$ ionicsMenudelegate.togglele. initialisiert // ordnungsgemäß $ timeout (function () {if ($ scope.projts.length == 0) {while (true) {var projectTitle = fordert ('Ihr erster Projekttitel:'); if (projectTitle) {createReject (ProjectTitle); Break;}}}}}); Der Ionen-Seite-Menus-Code im Körper ist wie folgt :: <Ion-Side-Menus> <!-CENTER-Inhalt-> <Ion-Seite-Menu-Content> <Ion-Header-Bar> <button ng-klick = "ToggleProjects ()"> </i> </h1> <H1> {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{< ng-click="newTask()"><i></i></button></ion-header-bar><ion-content scroll="false"><ion-list><ion-item ng-repeat="task in activeProject.tasks">{{task.title}}</ion-item></ion-list></ion-content><!-- Left Spalte-> <Ion-Seite-Menu Side = "links"> <Ion-Header-Bar> <h1> -Projekte </h1> <button ng-klick = "newProject ()"> </button> </Ion-Header-Bar> <ion-content scroll = "false"> <ion-list> <ion-item-item-item-item-item ng-repeat = "projecing" ° C. $ index) "ng-class =" {active: activeProject == project} "> {{project.title}} </ion-iTem> </ionlist> </ion-content> </ionside-menu> </ionside-menus>Der obige Inhalt ist der gesamte Code, wie Ionic ein App -Projekt erstellt, das der Editor Ihnen vorgestellt hat. Ich hoffe, es wird für alle hilfreich sein!