通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用

介绍 自从混合式移动开发火起来之后,一部分Web工程师开始转战移动开发。混合式移动开发技术让Web工程师可以开发...

介绍

        自从混合式移动开发火起来之后,一部分Web工程师开始转战移动开发。混合式移动开发技术让Web工程师可以开发出各个平台的移动应用,而且不需要学习各个平台的原生编程语言。现在已经有很多诸如PhoneGap和Titanium这些混合式开发平台来帮助我们进行混合式编程,今天我们要介绍一是一个相比之下更新的混合式移动开发平台Ionic。

        Ionic是一个高级HTML5混合式移动应用开发框架,同时也是一个开源的前端框架。Ionic应用是基于Cordova的, 所以Cordova相关的工具也都可以构建到应用中去,Lonic注重的是视觉效果和用户体验,所以使用了 AngularJS来构建很各种酷的效果。

安装

        想要开始Ionic开发,你需要先安装 Node.js。

        然后根据你的开发环境来安装相应的 Android 或 IOS 平台,在这篇文章中,我们会创建一个Android应用。

        接下来你要安装一个 Cordova 和 Ionic的命令行工具,操作如下:

  1. npm install -g cordova ionic
复制代码
        安装完成之后,你可以尝试开始创建一个工程:

  1. ionic start myIonicApp tabs
复制代码
        进入项目目录,添加ionic平台,创建应用,在虚拟机中运行,成为高富帅……

  1. cd myIonicApp
  2. ionic platform add android
  3. ionic build android
  4. ionic emulate android
复制代码
        下面就是样例应用的效果:


开始

        我们已经有一个不错的开始了,现在我们来创建一个ToDo列表的应用,我们从空白模板开始:
  1. ionic start myToDoList blank
复制代码
        如果你进入到项目目录,你会看到AngularJS文件,这是我们添加相关代码的地方。

创建和展示列表

        首先,你需要在应用中添加一个list,我们直接用 ion-list ,添加ion-list到www/index.html:

  1. <ion-list>
  2.   <ion-item>Scuba Diving</ion-item>
  3.   <ion-item>Climb Mount Everest</ion-item>
  4. </ion-list>
复制代码
        之后我们看一看添加ion-list之后我们的html文件是什么样的:

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  6.   <title></title>

  7.   <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  8.   <link href="css/style.css" rel="stylesheet">

  9.   <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  10.     <link href="css/ionic.app.css" rel="stylesheet">
  11.     -->

  12.   <!-- ionic/angularjs js -->
  13.   <script src="lib/ionic/js/ionic.bundle.js"></script>

  14.   <!-- cordova script (this will be a 404 during development) -->
  15.   <script src="cordova.js"></script>

  16.   <!-- your app's js -->
  17.   <script src="js/app.js"></script>
  18. </head>

  19. <body ng-app="starter">

  20.   <ion-pane>
  21.     <ion-header-bar class="bar-stable">
  22.       <h1 class="title">My ToDo List</h1>
  23.     </ion-header-bar>
  24.     <ion-content>
  25.       <ion-list>
  26.         <ion-item>Scuba Diving</ion-item>
  27.         <ion-item>Climb Mount Everest</ion-item>
  28.       </ion-list>
  29.     </ion-content>
  30.   </ion-pane>
  31. </body>

  32. </html>
复制代码
        然后我们可以在 www/js/中创建一个controllers.js文件,来定义一个新的cntroller,我们暂且叫它ToDoListCtrl。这是controllers.js文件的内容:

  1. angular.module('starter.controllers', [])
  2.     .controller('ToDoListCtrl', function ($scope) {
  3. });
复制代码
        在上面的代码中,我们定义了一个叫starter的module和一个叫作calledToDoListCtrl的Controler。

        然后我们就要把这个module加到我们的应用中了。打开www/js/app.js ,然后把module添加进去:

  1. angular.module('starter', ['ionic', 'starter.controllers'])
  2. .run(function ($ionicPlatform) {
  3.   $ionicPlatform.ready(function () {
  4.     if (window.StatusBar) {
  5.       StatusBar.styleDefault();
  6.     }
  7.   });
  8. })
复制代码
        我们继续,定义一个$scope来携带ToDo list的条目,ToDoListCtrl中声明一个新的$scope变量,如下:
  1. .controller('ToDoListCtrl', function ($scope) {

  2.   $scope.toDoListItems = [{
  3.     task: 'Scuba Diving',
  4.     status: 'not done'
  5.   }, {
  6.     task: 'Climb Everest',
  7.     status: 'not done'
  8.   }]
  9. });
复制代码
        把controllers.js添加到index.html中:

  1. <ion-list ng-controller="ToDoListCtrl">
  2.   <ion-item ng-repeat="item in toDoListItems">
  3.     {{item.task}}
  4.   </ion-item>
  5. </ion-list>
复制代码
        在上面的代码中,我们添加了bar-positive来给应用加颜色。你可以有同样添加很多不同的header。这里有详细的文档: here。

        我们现在需要在index.html中添加一个button来触发事件:

  1. <script id="modal.html" type="text/ng-template">
  2. <div class="modal">

  3.   <div class="bar bar-header bar-calm">
  4.     <button class="button" ng-click="closeModal()">back</button>
  5.     <h1 class="title">Add Item</h1>
  6.   </div>
  7.   <br></br>
  8.   <br></br>
  9.   <form ng-submit="AddItem(data)">
  10.     <div class="list">
  11.       <div class="list list-inset">
  12.         <label class="item item-input">
  13.           <input type="text" placeholder="ToDo Item" ng-model="data.newItem">
  14.         </label>
  15.       </div>
  16.       <button class="button button-block button-positive" type="submit">
  17.         Add Item
  18.       </button>
  19.     </div>
  20.   </form>

  21. </div>
  22. </script>
复制代码
        现在确认一下,在上面的操作中,我们在modal中添加了一个header,一个input box和一个button。

        我们同样有需要一个回退的Button在header中,它用来触发 closeModal() 功能。

        现在我们开始绑定 ionic modal 到我们的 controller中,我们通过如下的方法把 $ionicModal 注入到controller中:

  1. angular.module('starter.controllers', [])
  2. .controller('ToDoListCtrl', function ($scope, $ionicModal) {
  3. // array list which will contain the items added
  4. $scope.toDoListItems = [];
  5. //init the modal
  6. $ionicModal.fromTemplateUrl('modal.html', {
  7.   scope: $scope,
  8.   animation: 'slide-in-up'
  9. }).then(function (modal) {
  10.   $scope.modal = modal;
  11. });
  12. // function to open the modal
  13. $scope.openModal = function () {
  14.   $scope.modal.show();
  15. };
  16. // function to close the modal
  17. $scope.closeModal = function () {
  18.   $scope.modal.hide();
  19. };
  20. //Cleanup the modal when we're done with it!
  21. $scope.$on('$destroy', function () {
  22.   $scope.modal.remove();
  23. });
  24. //function to add items to the existing list
  25. $scope.AddItem = function (data) {
  26.   $scope.toDoListItems.push({
  27.     task: data.newItem,
  28.     status: 'not done'
  29.   });
  30.   data.newItem = '';
  31.   $scope.closeModal();
  32. };

  33. });
复制代码
        我们在上面的代码中使用了 .fromTemlateUrl 来加载html的内容,然后在初始化的时候通过两个选项定义了$scope和animation的类型。

        当然我们也定义了打开、关闭moda和添加条目到数组的方法。

运行

        好了,万事俱备,虚拟机走起,看起来还不错吧。

总结

        在这篇文章中,我们了解了使用Ionic的一个大概流程。你可以在这里看到详细的代码。如果想深入学习,还是应该多了解一下 AngularJS。

        参考:大家有兴趣的话,可以阅读这套AngularJS的基础开发教程:AngularJS开发框架实用编程入门之一
via sitepoint

更多 cordova 相关内容

更多 hybrid 相关内容

更多 跨平台 相关内容