ionik Cipta APP


Dalam bab sebelumnya, kami telah mempelajari cara mengimport rangka kerja ionik ke dalam projek.

Seterusnya kami akan memperkenalkan cara mencipta aplikasi APP ionik.

ionik mencipta APP menggunakan HTML, CSS dan Javascript untuk membina, jadi kami boleh mencipta direktori www dan mencipta fail index.html dalam direktori, kodnya adalah seperti 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>

Dalam kod di atas, Kami memperkenalkan fail CSS Ionic, fail JS Ionic dan sambungan Ionic AngularJS ionic.bundle.js (ionic.bundle.js).

Fail ionic.bundle.js sudah mengandungi teras Ionic JS, AngularJS dan sambungan AngularJS Ionic Jika anda perlu memperkenalkan modul Angular lain, anda boleh memanggilnya dari direktori lib/js/angular.

cordova.js dijana apabila menggunakan Cordova/PhoneGap untuk membuat aplikasi Ia tidak perlu diperkenalkan secara manual Anda boleh mencari fail ini dalam projek Cordova/PhoneGap, jadi adalah perkara biasa untuk memaparkan 404 proses pembangunan.

Buat APP

Seterusnya kami akan melaksanakan aplikasi termasuk tajuk, bar sisi, senarai, dll. Gambar rajah reka bentuk adalah seperti berikut:

3-mockup.png

Buat sisi Bar sisi

Bar sisi dicipta menggunakan pengawal menu sisi ion.

Edit fail index.html yang kami buat sebelum ini dan ubah suai kandungan dalam <body> seperti 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>

Penghuraian pengawal:

  • menu sisi ion: ialah bekas dengan menu bar sisi yang boleh dikembangkan dengan mengklik butang atau meluncurkan skrin.

  • kandungan-menu-sisi-ion: Bekas yang memaparkan kandungan utama Menu boleh dikembangkan dengan meluncurkan skrin.

  • ion-side-menu: Bekas untuk menyimpan bar sisi.

Inisialisasikan APP

Seterusnya kami mencipta modul AngularJS baharu dan memulakannya Kod tersebut terletak dalam www/js/app.js: 

angular.module('todo', ['ionic'])
<🎜. >


Kemudian tambahkan atribut ng-app dalam teg badan kita: 


<body ng-app="todo">

<script src="cordova.js"> dalam fail index.html ; </script> Fail app.js diperkenalkan di atas: 

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

Ubah suai kandungan teg kandungan fail index.html adalah seperti 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>


Kami telah melengkapkan aplikasi APP asas ionik dalam langkah di atas.

Buat senarai

Mula-mula buat pengawal

TodoCtrl: 

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

Dalam fail app.js, gunakan pengawal untuk menentukan data senarai :

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

.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: 'php中文网' },
    { title: 'www.php.cn' },
    { title: 'php中文网' },
    { title: 'www.php.cn' }
  ];
});

Dalam senarai data dalam halaman index.html, kami menggunakan Angular ng-repeat untuk mengulang data: 

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

Kod dalam teg badan index.html yang diubah suai ialah seperti 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.php.cn/static/ionic/js/app.js"></script>
    <script src="cordova.js"></script>
</body>


Buat halaman tambah

Ubah suai index.html dan tambah kod berikut selepas

</ion- side-mens>: 

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

Dalam kod di atas, kami mentakrifkan halaman templat baharu melalui

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

Fungsi createTask(task) dicetuskan apabila borang diserahkan.

ng-model="task.title" akan memperuntukkan data input borang kepada atribut tajuk objek tugas.

Ubah suai kandungan dalam <ion-side-menu-content>, kodnya adalah seperti 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>

Dalam fail app.js, kod pengawal adalah seperti berikut: 

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

.controller('TodoCtrl', function($scope, $ionicModal) {
  $scope.tasks = [
    { title: 'php中文网' },
    { title: 'www.php.cn' },
    { title: 'php中文网' },
    { title: 'www.php.cn' }
  ];

  // 创建并载入模型
  $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 bar sisi

Melalui langkah di atas, kami telah melaksanakan fungsi baharu, dan kini kami menambah fungsi bar sisi pada apl.

Ubah suai kandungan dalam <ion-side-menu-content>, kodnya adalah seperti 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>

Tambah bar sisi: 

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

Arahan kelas ng dalam<item-ion> menetapkan gaya pengaktifan menu.

Di sini kami mencipta fail js app2.js baharu (agar tidak dikelirukan dengan yang sebelumnya), kodnya adalah seperti 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;
        }
      }
    }
  });

});

Kod menu sisi ion dalam badan adalah seperti 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>