ionic App erstellen

In den vorherigen Kapiteln haben wir gelernt, wie man das Ionic-Framework in ein Projekt importiert.

Als Nächstes zeigen wir Ihnen, wie Sie eine Ionic-App erstellen.

Ionic-Apps werden mit HTML, CSS und JavaScript erstellt, daher können wir ein www-Verzeichnis erstellen und darin eine index.html-Datei mit folgendem Code anlegen:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css.html" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js.html"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
    <script src="cordova.js.html"></script>
  </head>
  <body>
  </body>
</html>

Im obigen Code haben wir die Ionic-CSS-Datei, die Ionic-JS-Datei und die Ionic-AngularJS-Erweiterung ionic.bundle.js (ionic.bundle.js) eingebunden.

Die Datei ionic.bundle.js enthält bereits das Ionic-Core-JS, AngularJS und die AngularJS-Erweiterung von Ionic. Wenn Sie weitere Angular-Module einbinden müssen, können Sie sie aus dem Verzeichnis lib/js/angular laden.

cordova.js wird beim Erstellen einer App mit Cordova/PhoneGap generiert und muss nicht manuell eingebunden werden. Sie können diese Datei in Cordova/PhoneGap-Projekten finden, daher ist es normal, dass sie während der Entwicklung 404 zurückgibt.

App erstellen

Als Nächstes implementieren wir eine App, die einen Header, eine Seitenleiste, eine Liste usw. enthält. Das Entwurfsdiagramm sieht wie folgt aus:

Seitenleiste erstellen

Die Seitenleiste wird mit dem ion-side-menus-Controller erstellt.

Bearbeiten Sie die zuvor erstellte index.html-Datei und ändern Sie den Inhalt innerhalb von <body> wie unten gezeigt:

<body>
  <ion-side-menus>
    <ion-side-menu-content>
    </ion-side-menu-content>
    <ion-side-menu side="left">
    </ion-side-menu>
  </ion-side-menus>
</body>

Controller-Erklärung:

ion-side-menus：Es ist ein Container mit einem Seitenleistenmenü, das durch Klicken auf eine Schaltfläche oder Wischen über den Bildschirm erweitert werden kann.
ion-side-menu-content: Ein Container, der den Hauptinhalt anzeigt; Sie können das Menü durch Wischen über den Bildschirm erweitern.
ion-side-menu: Ein Container, der die Seitenleiste enthält.

App initialisieren

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 Attribut ng-app zu unserem body-Tag hinzu:

<body ng-app="todo">

Fügen Sie oberhalb von `` in der Datei index.html die Datei app.js ein:

<script src="js/app.js.html"></script>

Ändern Sie den Inhalt des body-Tags in der Datei index.html, wie im folgenden Code gezeigt:

<body ng-app="todo">
  <ion-side-menus>

    <!-- 中心内容 -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

  </ion-side-menus>
</body>

Ausprobieren »

Mit den oben genannten Schritten haben wir eine grundlegende Ionic-App abgeschlossen.

List erstellen

Erstellen Sie zuerst einen Controller.TodoCtrl：

<body ng-app="todo" ng-controller="TodoCtrl">

In der Datei app.js verwenden Sie einen Controller, um die Listendaten zu definieren:

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: 'Example' },
    { title: 'www.example.com' },
    { title: 'Example' },
    { title: 'www.example.com' }
  ];
});

Auf der Seite index.html verwenden wir Angulars ng-repeat, um die Listendaten zu durchlaufen:

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Todo</h1>
  </ion-header-bar>
  <ion-content>
    <!-- 列表 -->
    <ion-list>
      <ion-item ng-repeat="task in tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

Nach der Änderung sieht der Code innerhalb des body-Tags von index.html wie folgt aus:

 <body ng-app="todo" ng-controller="TodoCtrl">
    <ion-side-menus>

    <!-- 中心内容 -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
        <!-- 列表 -->
        <ion-list>
          <ion-item ng-repeat="task in tasks">
            {{task.title}}
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

    </ion-side-menus>
    <script src="../static/ionic/js/app.js"></script>
    <script src="cordova.js.html"></script>
</body>

Ausprobieren »

Seite „Hinzufügen“ erstellen

Ändern Sie index.html, und fügen Sie nach</ion-side-menus>den folgenden Code hinzu:

<script id="new-task.html" type="text/ng-template">

  <div class="modal">

    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">New Task</h1>
      <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>

      <form ng-submit="createTask(task)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="What do you need to do?" ng-model="task.title">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Create Task</button>
        </div>
      </form>

    </ion-content>

  </div>

</script>

Im obigen Code verwenden wir<script id="new-task.html" type="text/ng-template">, um eine neue Vorlagenseite zu definieren.

Wenn das Formular übermittelt wird, wird die Funktion createTask(task) ausgelöst.

ng-model="task.title" weist die Formulareingabedaten der title-Eigenschaft des task-Objekts zu.

Ändern Sie<ion-side-menu-content>den Inhalt darin, der Code sieht wie folgt aus:

<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
  <h1 class="title">Todo</h1>
  <!-- 新增按钮-->
  <button class="button button-icon" ng-click="newTask()">
    <i class="icon ion-compose"></i>
  </button>
</ion-header-bar>
<ion-content>
  <!-- 列表 -->
  <ion-list>
    <ion-item ng-repeat="task in tasks">
      {{task.title}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu-content>

In der Datei app.js sieht der Controller-Code wie folgt aus:

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope, $ionicModal) {
  $scope.tasks = [
    { title: 'Example' },
    { title: 'www.example.com' },
    { title: 'Example' },
    { title: 'www.example.com' }
  ];

  // 创建并载入模型
  $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();
    task.title = "";
  };

  // 打开新增的模型
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  // 关闭新增的模型
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };
});

Seitenleiste erstellen

Durch die oben genannten Schritte haben wir die Hinzufügen-Funktion implementiert. Jetzt fügen wir der App eine Sidebar-Funktionalität hinzu.

Ändern Sie<ion-side-menu-content>den Inhalt darin, der Code sieht wie folgt aus:

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <button class="button button-icon" ng-click="toggleProjects()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title">{{activeProject.title}}</h1>
    <!-- 新增按钮 -->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></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>
</ion-side-menu-content>

Sidebar hinzufügen:

<!-- 左边栏 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
  <h1 class="title">Projects</h1>
  <button class="button button-icon ion-plus" 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-menu>

Die ng-class-Direktive in `<ion-item>` legt den aktiven Menüstil fest.

Hier erstellen wir eine neue JS-Datei app2.js (um Verwechslungen mit der vorherigen zu vermeiden), mit dem folgenden Code:

angular.module('todo', ['ionic'])
/**
 * The Projects factory handles saving and loading projects
 * from local storage, and also lets us save and load the
 * last active project index.
 */
.factory('Projects', function() {
  return {
    all: function() {
      var projectString = window.localStorage['projects'];
      if(projectString) {
        return angular.fromJson(projectString);
      }
      return [];
    },
    save: function(projects) {
      window.localStorage['projects'] = angular.toJson(projects);
    },
    newProject: function(projectTitle) {
      // Add a new project
      return {
        title: projectTitle,
        tasks: []
      };
    },
    getLastActiveIndex: function() {
      return parseInt(window.localStorage['lastActiveProject']) || 0;
    },
    setLastActiveIndex: function(index) {
      window.localStorage['lastActiveProject'] = index;
    }
  }
})

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {

  // A utility function for creating a new project
  // with the given projectTitle
  var createProject = function(projectTitle) {
    var newProject = Projects.newProject(projectTitle);
    $scope.projects.push(newProject);
    Projects.save($scope.projects);
    $scope.selectProject(newProject, $scope.projects.length-1);
  }


  // Load or initialize projects
  $scope.projects = Projects.all();

  // Grab the last active, or the first project
  $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];

  // Called to create a new project
  $scope.newProject = function() {
    var projectTitle = prompt('Project name');
    if(projectTitle) {
      createProject(projectTitle);
    }
  };

  // Called to select the given project
  $scope.selectProject = function(project, index) {
    $scope.activeProject = project;
    Projects.setLastActiveIndex(index);
    $ionicSideMenuDelegate.toggleLeft(false);
  };

  // Create our modal
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope
  });

  $scope.createTask = function(task) {
    if(!$scope.activeProject || !task) {
      return;
    }
    $scope.activeProject.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();

    // Inefficient, but save all the projects
    Projects.save($scope.projects);

    task.title = "";
  };

  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  }

  $scope.toggleProjects = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };


  // Try to create the first project, make sure to defer
  // this by using $timeout so everything is initialized
  // properly
  $timeout(function() {
    if($scope.projects.length == 0) {
      while(true) {
        var projectTitle = prompt('Your first project title:');
        if(projectTitle) {
          createProject(projectTitle);
          break;
        }
      }
    }
  });

});

Der ion-side-menus-Code im body lautet wie folgt:

<ion-side-menus>

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <button class="button button-icon" ng-click="toggleProjects()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title">{{activeProject.title}}</h1>
    <!-- 新增按钮 -->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></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>
</ion-side-menu-content>

<!-- 左边栏 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
  <h1 class="title">Projects</h1>
  <button class="button button-icon ion-plus" 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-menu>

</ion-side-menus>

Ausprobieren »

Andere Erweiterungen

ionic CSS

Ionic JavaScript

ionic App erstellen

App erstellen

Seitenleiste erstellen

App initialisieren

List erstellen

Seite „Hinzufügen“ erstellen

Seitenleiste erstellen