ion buat APP

Bab-bab sebelumnya kita telah belajar kerangka bagaimana ion ke dalam proyek.

Berikutnya kami akan memperkenalkan cara membuat aplikasi APP ionik.

ionik buat APP menggunakan HTML, CSS dan Javascript untuk membangun, sehingga kami dapat membuat direktori www, dan membuat file index.html di direktori, sebagai berikut:

<!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" rel="stylesheet">

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

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

Kode di atas, kami memperkenalkan Ionic file CSS, ekstensi file Ionic JS dan Ionic AngularJS ionic.bundle.js (ionic.bundle.js).

File ionic.bundle.js sudah berisi Ionic inti JS, AngularJS, perpanjangan Ionic dari AngularJS, sudut jika Anda perlu untuk memperkenalkan modul lain dapat dipanggil dari / lib js / direktori sudut.

cordova.js ketika menggunakan Cordova / PhoneGap Buat menghasilkan aplikasi dan tidak memerlukan pengenalan manual, Anda dapat menemukan file dalam proyek Cordova / PhoneGap, sehingga tampilan dalam proses pembangunan 404 adalah normal.

Buat APP

Selanjutnya kita menyadari aplikasi yang berisi judul, sidebar, daftar, dll, desain adalah sebagai berikut:

Buat sidebar

Sidebar dibuat menggunakan kontroler ion-side-menu.

mengedit file index.html kita buat sebelumnya, memodifikasi isi dari <body>, sebagai berikut:

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

ion-side-menu: wadah dengan menu sidebar, Anda dapat mengklik tombol atau geser layar untuk memperluas menu.
ion-side-menu-konten: menampilkan isi utama wadah, Anda dapat memperluas menu dengan menggeser layar.
ion-side-menu: wadah sidebar.

inisialisasi APP

Selanjutnya, kita buat modul AngularJS baru, dan menginisialisasi kode www / js / app.js di:

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

Setelah Anda menambahkan properti ng-aplikasi di tag tubuh kita:

<body ng-app="todo">

Dalam file index.html <script src = "cordova.js"> </ script> di atas diperkenalkan berkas app.js:

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

Memodifikasi isi dari tag tubuh file index.html, kode tersebut adalah sebagai berikut:

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

Coba »

Kami telah menyelesaikan langkah di atas aplikasi APP dasar ionik.

Buat daftar

Pertama, menciptakan controllerTodoCtrl:

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

Dalam file app.js, menggunakan controller untuk menentukan daftar data:

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

.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: '本教程' },
    { title: 'www.w3big.com' },
    { title: '本教程' },
    { title: 'www.w3big.com' }
  ];
});

Halaman index.html data dalam daftar kami gunakan untuk iterate sudut Data ng-repeat:

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

Setelah memodifikasi tag index.html tubuh dalam kode tersebut adalah sebagai berikut:

 <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="http://www.w3big.com/static/ionic/js/app.js"></script>
    <script src="cordova.js"></script>
</body>

Coba »

Buat menambahkan halaman

Memodifikasi index.html di</ ion-side-menu> Setelah Anda menambahkan kode berikut:

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

Melalui kode di atas<script id = "baru-task.html " type = "text / ng-template"> mendefinisikan sebuah halaman template baru.

CreateTask (tugas) fungsi dipicu ketika formulir dikirimkan.

ng-model = input data "task.title" bentuk akan ditugaskan untuk atribut judul tugas objek.

Konten<ion-side-menu-konten > dalam kode tersebut adalah sebagai berikut:

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

File app.js, kode controller sebagai berikut:

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

.controller('TodoCtrl', function($scope, $ionicModal) {
  $scope.tasks = [
    { title: '本教程' },
    { title: 'www.w3big.com' },
    { title: '本教程' },
    { title: 'www.w3big.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();
  };
});

Buat sidebar

Melalui langkah-langkah di atas kita telah menerapkan fitur baru, sekarang kita menambahkan fungsionalitas ke sidebar aplikasi.

Konten<ion-side-menu-konten > dalam kode tersebut adalah sebagai berikut:

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

Menambahkan sidebar:

<!-- 左边栏 -->
<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-item> instruksi ng-kelas dalam gaya aktif menu setup.

Di sini kita membuat app2.js js file baru (tidak harus bingung dengan sebelumnya), sebagai berikut:

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

});

tubuh dalam kode ion-side-menu adalah sebagai berikut ::

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

Coba »

Sebelumnya: instalasi ionik

Berikutnya: kepala ionik dan bawah

ionic kuliah

ionic CSS

ionic JavaScript

ion buat APP

Buat APP

Buat sidebar

inisialisasi APP

Buat daftar

Buat menambahkan halaman

Buat sidebar