一个先进的App框架:使用Ionic创建一个简单的APP
介绍
自Hybrid Mobile技术发展以来,Web开发者转到移动开发的人数大大增加了。
Hybrid Mobile开发技术使得一个Web开发者能够去开发一个运行在多个平台上的移动应用。完全不用去学习相应的平台语言和使用已经存在的技术。
Hybrid Mobile技术已经发展了很多,有很多不同类型的平台存在,比如说 PhoneGap 和 Titanium 。
一个值得考虑的Hybrid Mobile开发新平台就是 Ionic 。
Ionic 是一个先进的HTML5(Hybrid Mobile)技术App框架。它是一个可以使用HTML5来创建一个漂亮的移动应用的前端开源框架。
Ionic的App都是基于 Cordova 的,所以Cordova工具可以 用来构建,部署和测试App。Ionic重点研究App的外观和感觉,它目前使用 AngularJS 来构建一个看起来很棒的前端。
安装
要开始使用Ionic,首先要确保你已经安装了 Node.js 。
然后,根据你所想要开发的App平台,安装所需的 Android 或者 IOS 平台附件。在这篇文章里,我们将试着创建一个Android的App。
再下一步,安装最新版本的Cordova和Ionic,命令行工具如下:
npm install -g cordova ionic
当安装完成时,试着用一个标签模版如下图所示创建一个新的项目:
ionic start myIonicApp tabs
切换到项目目录,添加ionic平台,如下所示建立app和效仿它:
cd myIonicApp
ionic platform add android
ionic build android
ionic emulate android
这是一个默认标签模版的app:
入门
我们将要创建一个简单的 ToDo List
应用程序。让我们使用一个空模版来建立一个简单 的app,这样能够让我们从零开始。如下所示使用一个空模版建立一个新app:
ionic start myToDoList blank
如果你切换到 myToDoList/www
的目录下你可以看到AngularJS的文件。这就是我们将要添 加相关代码的地方,以便于用来创建我们的app。
创建和显示列表
首先,我们需要创建一个列表用来显示“任务列表”。为此我们将利用到 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
到 index.html
之后,这里是html中所有的代码的样子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="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">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="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>
现在,让我们动手来重建和仿真出app来得到这个列表。
就像上面看到的代码,使用 ion-list
我们给我们的任务列表硬编码出2个项目。为了让app的功能更加完善,我们应该能够动态的添加和查看项目列表。
在里面, www/js/
创建了一个 controllers.js
文件和定义了一个叫做 ToDoListCtrl
新的控制器。这是 controllers.js
文件的样子:
angular.module('starter.controllers', [])
.controller('ToDoListCtrl', function ($scope) {
});
在上面的代码中,我们定义了一个新的模块 starter.controller
和一个新的控制器 ToDoListCtrl
。
接下来,我们需要将这个模块添加到我们已经存在的应用中。打开 www/js/app.js
然后将这个模块添加进去。
这是添加了新的 starter.controller
模块之后的app.js代码:
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
下一步,定义一个 $scope
来支撑任务列表项目。在里面, ToDoListCtrl
声明了一个新的 $scope
变量 toDoListItems
,如下所示:
.controller('ToDoListCtrl', function ($scope) {
$scope.toDoListItems = [{
task: 'Scuba Diving',
status: 'not done'
}, {
task: 'Climb Everest',
status: 'not done'
}]
});
在 index.html
里的 app.js
包含着 controllers.js
。
我们需要将上述的控制器逻辑添加到我们 index.html
里的 ion-list
中,如下图所示修改 ion-list
:
<ion-list ng-controller="ToDoListCtrl">
<ion-item ng-repeat="item in toDoListItems">
{{item.task}}
</ion-item>
</ion-list>
正如你在上述代码中所看到的,我们使用 ng-controller
指令来将控制器添加到 ion-list
中。我们使用了 ng-repeat
指令在 $scope
的变量中反复定义了 toDoListItems
将它展示在列表中。
现在,通过行动来重建app和仿真出你想要做的列表。
在列表中添加项目
接下来,我们需要实现出可以将项目添加到已存在的列表中的一种方式。为此,我们将会利用 ionicModal ,它可以在按钮被点击之后让展开的列表向上滚动起来。
首先在展开的页面的顶部添加一个按钮,以便于给列表添加新的项目。
然后,让我们利用 ion-header-bar 来使我们列表的头部看起来更加富有色彩的。如下所示修改代码:
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">My ToDo List</h1>
<div class="buttons">
<button class="button" ng-click="openModal()">Add</button>
</div>
</ion-header-bar>
正如你在上面的代码中所看到的,我们添加了一个类名为 bar-positive
的 ion-header-bar
标签,它可以为列表添加颜色。你可以很多不同类型的头部,请参考 这里 的详细文档。
我们也已经在我们列表的头部的右侧添加了一个名为 Add
的新按钮,它将会调用一个函数来打开一个模式窗口(我们将会立即定义这个模式)。
如下所示在 index.html
中添加一个模式弹出:
<script id="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">
Add Item
</button>
</div>
</form>
</div>
</script>
按照上面的代码,我们有一个头部文件在我们的模式集中,一个输入框和一个将新项目添加到任务列表中的添加按钮。
我们在头部文件中有一个返回按钮,我们给它添加了一个 closeModal()
函数来使用 ng-click
来关闭模式。我们使用 ng-submit
给表单添加了一个叫做 AddItem
的函数,当表单 提交的时候将会添加项目到已有的列表中。
现在,我们需要将ionic模式结合到我们的控制器中。我们将 $ionicModal
添加到控制器并定义所需要到的函数,如下所示:
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
定义初始化时定义了两个选项还有当文本加载的时候的动画类型。
我们同样定义了打开,关闭模式的函数,同时还定义了一个向已存在的数组中添加项目的函数。
演示屏幕
我们的实现已经完成,我们已经准备好要运行和仿真我们的app。保存所有文件,重建并且仿真app。我们任务列表的app的两个屏幕应该是这个样子的:
在这里输入图片描述
结束语
在这篇文章里,我们看到了如何从零开始使用Ionic——混合应用程序开发中的一个先进的HTML5框架。我们使用一些Ionic的工具如 ionicModal
和 ion-list
来开发一个简单的基础的任务列表app。
这个app可以扩展出更多的功能, 这里 有详细说明。为了更好的去理解AngularJS,我建议参考 AngularJS文档 。同时上述文章中的代码可以在 GitHub 上得到。
本文根据 @Jay Raj 的《 Building a Simple App Using Ionic, an Advanced Mobile App Framework 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://www.sitepoint.com/building-simple-app-using-ionic-advanced-html5-mobile-app-framework/ 。
一个先进的App框架:使用Ionic创建一个简单的APP的更多相关文章
- hybird app(混合式app开发)cordova ionic 创建相应平台的app
hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...
- 创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来,并显示出来
/*4.创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来,并显示出来*/ #import <Foundation/Foundation.h>#defin ...
- MUI框架-01-介绍-创建项目-简单页面
MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问 ...
- 【niubi-job——一个分布式的任务调度框架】----如何开发一个niubi-job的定时任务
引言 上篇文章LZ主要讲解了niubi-job如何安装,如果看过上一篇文章的话,大家应该知道,niubi-job执行的任务是需要用户自己上传jar包的. 那么问题来了,这个jar包如何产生?有没有要求 ...
- android在当前app该文件下创建一个文件夹
/********************************************************************* * Author : Samson * Date ...
- console.log的一个应用 -----用new方法生成一个img对象和document.createElement方法创建一个img对象的区别
我用两种方法来生成img对象,第一种方法是用new方法,第二种方法是用document.createElement方法. var img1 = new Image(); var img2 = docu ...
- android2.3 View视图框架源码分析之一:android是如何创建一个view的?
View是所有控件的一个基类,无论是布局(Layout),还是控件(Widget)都是继承自View类.只不过layout是一个特殊的view,它里面创建一个view的数组可以包含其他的view而已. ...
- 几款开源的hybird移动app框架分析
几款开源的Hybrid移动app框架分析 Ionic Onsen UI 与 ionic 相比 jQuery Mobile Mobile Angular UI 结论 很多移动开发者喜欢使用原生代码开发, ...
- Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目
之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...
随机推荐
- 机器学习进阶-图像特征harris-角点检测 1.cv2.cornerHarris(进行角点检测)
1.cv2.cornerHarris(gray, 2, 3, 0.04) # 找出图像中的角点 参数说明:gray表示输入的灰度图,2表示进行角点移动的卷积框,3表示后续进行梯度计算的sobel算子 ...
- jquery查找筛选器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- android 环境变量
1.新建一个环境变量和系统变量名称为ANDROID_HOME,变量值为当前安装SDK的目录 2.把%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools添 ...
- js函数的创建
1.js 函数的创建有几种方式: 1.1 直接声明 1.2 创建匿名函数,然后赋值 1.3 声明函数,然后赋值给变量 1.4 使用1.3 得到的变量再赋值给变量 1.5 使用函数对象创建函数 < ...
- Python : 什么是*args和**kwargs
让生活Web个够 先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '-- ...
- 尚硅谷redis学习9-发布订阅
是什么? 图示说明 命令 例子
- Linux下tomcat运行命令
tomcat启动 [root@master webapps]# /usr/local/tomcat7.0/bin/catalina.sh start startup.sh的源代码,其实就是执行 c ...
- Object-c 协议@protocol(@required、@optional)
一.什么是协议? 1.协议声明了可以被任何类实现的方法2.协议不是类,它是定义了一个其他对象可以实现的接口3.如果在某个类中实现了协议中的某个方法,也就是这个类实现了那个协议.4.协议经常用来实现委托 ...
- linux 一种小的性能优化手段
在编写内核模块的过程中,我们经常会创建percpu的hash表,比如定义结构如下: struct A { int a: int b: struct hlist_node hlist_node;-- ...
- pip安装提示PermissionError: [WinError 5]错误问题解决
操作环境 Python3.6 + Winodws7 问题现象 新安装python3.6版本后使用pip安装第三方模块失败,报错信息如下: C:\Users\linyfeng>pip inst ...