Créer une application Ionic

Dans les chapitres précédents, nous avons appris comment importer le framework Ionic dans un projet.

Ensuite, nous allons vous montrer comment créer une application Ionic.

Les applications Ionic sont construites avec HTML, CSS et JavaScript, nous pouvons donc créer un répertoire www et créer un fichier index.html à l'intérieur, avec le code suivant :

<!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>

Dans le code ci-dessus, nous avons inclus le fichier CSS Ionic, le fichier JS Ionic, et l'extension AngularJS Ionic ionic.bundle.js (ionic.bundle.js).

Le fichier ionic.bundle.js inclut déjà le cœur JS d'Ionic, AngularJS et l'extension AngularJS d'Ionic. Si vous devez inclure d'autres modules Angular, vous pouvez les charger depuis le répertoire lib/js/angular.

cordova.js est généré lors de la création d'une application avec Cordova/PhoneGap et n'a pas besoin d'être inclus manuellement. Vous pouvez trouver ce fichier dans les projets Cordova/PhoneGap, il est donc normal qu'il renvoie 404 pendant le développement.

Créer une application

Ensuite, nous allons implémenter une application qui comprend un en-tête, une barre latérale, une liste, etc. Le schéma de conception est le suivant :

Créer une barre latérale

La barre latérale est créée à l'aide du contrôleur ion-side-menus.

Modifiez le fichier index.html que nous avons créé précédemment et changez le contenu à l'intérieur de <body> comme indiqué ci-dessous :

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

Explication du contrôleur :

ion-side-menus：Il s'agit d'un conteneur avec un menu latéral, qui peut être déployé en cliquant sur un bouton ou en balayant l'écran.
ion-side-menu-content: Un conteneur qui affiche le contenu principal ; vous pouvez déployer le menu en balayant l'écran.
ion-side-menu: Un conteneur destiné à contenir la barre latérale.

Initialiser l'application

Ensuite, nous créons un nouveau module AngularJS et l'initialisons. Le code se trouve dans www/js/app.js :

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

Ajoutez ensuite l'attribut ng-app à notre balise body :

<body ng-app="todo">

Au-dessus de `` dans le fichier index.html, incluez le fichier app.js :

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

Modifiez le contenu de la balise body dans le fichier index.html, comme indiqué dans le code suivant :

<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>

Essayez-le »

Grâce aux étapes ci-dessus, nous avons terminé une application Ionic de base.

Créer une List

Créez d'abord un contrôleur.TodoCtrl：

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

Dans le fichier app.js, utilisez un contrôleur pour définir les données de la liste :

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

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

Sur la page index.html, nous utilisons le ng-repeat d'Angular pour parcourir les données de la liste :

<!-- 中心内容 -->
<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>

Après modification, le code à l'intérieur de la balise body de la page index.html est le suivant :

 <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>

Essayez-le »

Créer une page d'ajout

Modifiez index.html, et après</ion-side-menus>ajoutez le code suivant :

<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>

Dans le code ci-dessus, nous utilisons<script id="new-task.html" type="text/ng-template">pour définir une nouvelle page de modèle.

Lorsque le formulaire est soumis, la fonction createTask(task) est déclenchée.

ng-model="task.title" assigne les données de saisie du formulaire à la propriété title de l'objet task.

Modifiez<ion-side-menu-content>le contenu à l'intérieur, le code est le suivant :

<!-- 中心内容 -->
<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>

Dans le fichier app.js, le code du contrôleur est le suivant :

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();
  };
});

Créer une barre latérale

Grâce aux étapes ci-dessus, nous avons implémenté la fonction d'ajout. Nous allons maintenant ajouter une fonctionnalité de barre latérale à l'application.

Modifiez<ion-side-menu-content>le contenu à l'intérieur, le code est le suivant :

<!-- 中心内容 -->
<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>

Ajouter une barre latérale :

<!-- 左边栏 -->
<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>

La directive ng-class dans `<ion-item>` définit le style actif du menu.

Ici, nous créons un nouveau fichier JS app2.js (pour éviter toute confusion avec le précédent), avec le code suivant :

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;
        }
      }
    }
  });

});

Le code ion-side-menus dans le body est le suivant :

<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>

Essayez-le »

Autres extensions

ionic CSS

JavaScript Ionic

Créer une application Ionic

Créer une application

Créer une barre latérale

Initialiser l'application

Créer une List

Créer une page d'ajout

Créer une barre latérale