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

2017-05-01 503

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

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

开始

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

ionic start myToDoList blank

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

创建和展示列表

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

<ion-list>
<ion-item>Scuba Diving</ion-item>
<ion-item>Climb Mount Everest</ion-item>
</ion-list>

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

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<linkhref="lib/ionic/css/ionic.css"rel="stylesheet">
<linkhref="css/style.css"rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<scriptsrc="lib/ionic/js/ionic.bundle.js"></script>
<scriptsrc="cordova.js"></script>
<scriptsrc="js/app.js"></script>
</head>
<bodyng-app="starter">
<ion-pane>
<ion-header-barclass="bar-stable">
<h1class="title">My ToDo List</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>Scuba Diving</ion-item>
<ion-item>Climb Mount Everest</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>

然后我们可以在 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中：

<ion-listng-controller="ToDoListCtrl">
<ion-itemng-repeat="item in toDoListItems">
{{item.task}}
</ion-item>
</ion-list>

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

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

<scriptid="modal.html"type="text/ng-template">
<div class="modal">
<div class="bar bar-header bar-calm">
<button class="button" ng-click="closeModal()">back</button>
<h1 class="title">Add Item</h1>
</div>
<br></br>
<br></br>
<form ng-submit="AddItem(data)">
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="ToDo Item" ng-model="data.newItem">
</label>
</div>
<button class="button button-block button-positive" type="submit">
AddItem
</button>
</div>
</form>
</div>
</script>

现在确认一下，在上面的操作中，我们在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和添加条目到数组的方法。

运行

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

原文发布时间：2014-12-08

本文来自云栖合作伙伴“linux中国”

微信关注我们

原文链接：https://yq.aliyun.com/articles/85919

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

《众妙之门——JavaScript与jQuery技术精粹》——第2章　复查JavaScript 代码的启示2.1　简介

本节书摘来自异步社区《众妙之门——JavaScript与jQuery技术精粹》一书中的第2章，第2.1节，作者：【德】Smashing Magazine译者：吴达茄芮鹏飞更多章节内容可以访问云栖社区“异步社区”公众号查看。第2章　复查JavaScript 代码的启示在开始之前，我想问一个问题：你最近一次复查代码是什么时候？代码复查应该是提高整体解决问题能力的最好方式，如果没有利用好它，将会错过发现漏洞和聆听建议的机会，而这些正是使你的代码更加完美所需的。没有人能写出100%没有漏洞的代码，所以不要为寻求帮助感到羞愧。我们行业中一些非常有经验的开发者，包括架构师和浏览器开发师都会经常要求别人来复查他们的代码，询问别人是否有地方可以改进以避免发生尴尬。代码复查应该被当成一项和其他技术方式解决问题同等重要的方法。现在我们来谈一谈在哪里可以使代码得到复查，怎样构造复查请求以及哪些是需要复查的内容。我最近被邀请复查一项JavaScript应用程序的代码，所以考虑和大家分享一下成果，因为它大致上覆盖了关于JavaScript代码复查必须熟记于心的全部相关知识。 2.1　简介代码复...

2017-05-02

491

前言 Cisco IPv6网络实现技术（修订版）IPv6在1992年由IETF推出。与IPv4地址空间匮乏相比，IPv6在今天看来将成为基本的、容易安装的解决方案。由于其设计基于IPv4协议过去20年的经验，IPv6的效率较IPv4有显著的提高。对于IPv6，我们不得不改变思维方式，因为IPv6协议不仅仅是为网络（如当前的IPv4 Internet）上的计算机而设计的。IPv6应用于所有的通信设备，如蜂窝设备、无线设备、电话、个人数字助理、电视、广播设备等，而不只限于计算机。 IPv6 的一个主要目标是通过简化任何基于IP网络的实施、运营和管理，使路由器成为网络的关键组件。而且，对于将有数十亿个节点设备的全球网络，如3G基础设施，IPv6比IPv4更先进，更具规模扩展性。IPv6的一些优势包括：巨大的地址空间、简单的数据包头、自动配置、网络重编号、网络聚合、多穴、过渡以及与现有的IPv4基础设施并存。从长远角度来看，Internet专家和高层分析人员一致认为Internet必须升级到IPv6。事实上，IPv6的最终目标是完全替代IPv4。因此，IPv6的长远市场是巨大的，意味着世...

2017-05-02

597

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

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

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

介绍

安装