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

Linux scott 158℃ 0评论
Linux:通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用

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

介绍

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

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

安装

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

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

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

    npm install -g cordova ionic

 安装完成之后,你可以尝试开始创建一个工程:

    npm install -g cordova ionic

  进入项目目录,添加ionic平台,创建应用,在虚拟机中运行,成为高富帅……

    cd myIonicApp
    ionic platform add android
    ionic build android
    ionic emulate android

  下面就是样例应用的效果:

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

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

开始

我们已经有一个不错的开始了,现在我们来创建一个ToDo列表的应用,我们从空白模板开始:

ionic start myToDoList blank

  如果你进入到项目目录,你会看到AngularJS文件,这是我们添加相关代码的地方。

创建和展示列表

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

    
    Scuba Diving
    Climb Mount Everest
    

  之后我们看一看添加ion-list之后我们的html文件是什么样的:

    
    
     
    
    
    
    
     
    
    
     
    
     
    
    
     
    
    
     
    
    
    
     
    
     
    
    
    My ToDo List
    
    
    
    Scuba Diving
    Climb Mount Everest
    
    
    
    
     
    

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

    angular.module('starter.controllers',[])
    .controller('ToDoListCtrl',function($scope){
    });

  在上面的代码中,我们定义了一个叫starter的module和一个叫作calledToDoListCtrl的Controler。

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

    angular.module('starter',['ionic','starter.controllers'])
    .run(function($ionicPlatform){
    $ionicPlatform.ready(function(){
    if(window.StatusBar){
    StatusBar.styleDefault();
    }
    });
    })

  我们继续,定义一个$scope来携带ToDo list的条目,ToDoListCtrl中声明一个新的$scope变量,如下: 

    .controller('ToDoListCtrl',function($scope){
     
    $scope.toDoListItems =[{
    task:'Scuba Diving',
    status:'not done'
    },{
    task:'Climb Everest',
    status:'not done'
    }]
    });

  把controllers.js添加到index.html中:

    
    
    {{item.task}}
    
    

  在上面的代码中,我们添加了bar-positive来给应用加颜色。你可以有同样添加很多不同的header。这里有详细的文档: here

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

    
    
    

现在确认一下,在上面的操作中,我们在modal中添加了一个header,一个input box和一个button。

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

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

    angular.module('starter.controllers',[])
    .controller('ToDoListCtrl',function($scope, $ionicModal){
    // array list which will contain the items added
    $scope.toDoListItems =[];
    //init the modal
    $ionicModal.fromTemplateUrl('modal.html',{
    scope: $scope,
    animation:'slide-in-up'
    }).then(function(modal){
    $scope.modal = modal;
    });
    // function to open the modal
    $scope.openModal =function(){
    $scope.modal.show();
    };
    // function to close the modal
    $scope.closeModal =function(){
    $scope.modal.hide();
    };
    //Cleanup the modal when we're done with it!
    $scope.$on('$destroy',function(){
    $scope.modal.remove();
    });
    //function to add items to the existing list
    $scope.AddItem=function(data){
    $scope.toDoListItems.push({
    task: data.newItem,
    status:'not done'
    });
    data.newItem ='';
    $scope.closeModal();
    };
     
    });

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

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

运行

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

总结

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

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

来源:http://www.gbtags.com/gb/share/4236.htm

转载请注明:osetc.com » Linux:通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址