- 浏览: 2486985 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
Hybrid(1)ionic Cordova meteor
After reading a lot of documents, cordova is similar to phoneGap. ionic is focus on mobile UI and based on cordova/phoneGap. Meteor seems provide both browser and hybrid. Let try that first.
1. Meteor Installation
Just a simple command to install that on MAC
> curl https://install.meteor.com/ | sh
Try to create the first project
> meteor create easymeteor
That will generate all the html, css and JS files there.
> meteor
Visit the http://localhost:3000/ to see the first page.
2. Try TODO Example
the HTML file easymeteor.html file will be
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>
The JS file easymeteor.js will be as follow:
// simple-todos.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is task 2" },
{ text: "This is task 3" }
]
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Meteor parses all the HTML files in app folder and identifies three top-level tags: <head>, <body> and <template>
template can be used in HTML as {{> templateName }} or in JavaScript as Template.templateName.
We can pass the data from JS to HTML template via helpers and {{}} mark.
Adding CSS in easymeteor.css
Storing tasks in a collection
collection in meteor can be access from both server and the client.
Create the collection and client will connect to that server to get the tasks.
// simple-todos.js
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: function () {
return Tasks.find({});
}
});
}
Inserting the tasks from the console
Connect to the database
> meteor mongo
Query
> db.tasks.find();
Insert
> db.tasks.insert({ text: "CREATE the JIRA ticket for Hybrid", createAt: new Date() });
Forms and Events
The HTML form will be easy
<!-- add a form below the h1 -->
<form class="new-task">
<input type="text" name="text" placeholder="Type to add new tasks" />
</form>
handle the event and store our data into mongo
Template.body.events({
"submit .new-task": function (event) {
// This function is called when the new task form is submitted
var text = event.target.text.value;
Tasks.insert({
text: text,
createdAt: new Date() // current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
return false;
}
});
}
Update and Remove Operation
Add the operation label to the html
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="text">{{text}}</span>
</li>
</template>
Event Operation on JS, update the checked property or delete the data
// In the client code, below everything else
Template.task.events({
"click .toggle-checked": function () {
// Set the checked property to the opposite of its current value
Tasks.update(this._id, {$set: {checked: ! this.checked}});
},
"click .delete": function () {
Tasks.remove(this._id);
}
});
3. Deploy the App
> meteor deploy sillycat.meteor.com
Then after that, I can visit this URL
http://sillycat.meteor.com/
References:
http://cordova.apache.org/docs/en/4.0.0/guide_overview_index.md.html#Overview
http://ngcordova.com/
http://ionicframework.com/
one example
https://github.com/windy/wblog_app
http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framework.html
phonegap
http://sillycat.iteye.com/blog/2008402
meteor
https://www.meteor.com/
https://github.com/awatson1978/meteor-cookbook/blob/master/table-of-contents.md
https://www.meteor.com/try
https://github.com/meteor/meteor
camera
http://www.sitepoint.com/beginners-guide-mobile-development-meteor/
https://github.com/meteor/mobile-packages
https://github.com/meteor/mobile-packages/blob/master/packages/mdg:camera/README.md
After reading a lot of documents, cordova is similar to phoneGap. ionic is focus on mobile UI and based on cordova/phoneGap. Meteor seems provide both browser and hybrid. Let try that first.
1. Meteor Installation
Just a simple command to install that on MAC
> curl https://install.meteor.com/ | sh
Try to create the first project
> meteor create easymeteor
That will generate all the html, css and JS files there.
> meteor
Visit the http://localhost:3000/ to see the first page.
2. Try TODO Example
the HTML file easymeteor.html file will be
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>
The JS file easymeteor.js will be as follow:
// simple-todos.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is task 2" },
{ text: "This is task 3" }
]
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Meteor parses all the HTML files in app folder and identifies three top-level tags: <head>, <body> and <template>
template can be used in HTML as {{> templateName }} or in JavaScript as Template.templateName.
We can pass the data from JS to HTML template via helpers and {{}} mark.
Adding CSS in easymeteor.css
Storing tasks in a collection
collection in meteor can be access from both server and the client.
Create the collection and client will connect to that server to get the tasks.
// simple-todos.js
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: function () {
return Tasks.find({});
}
});
}
Inserting the tasks from the console
Connect to the database
> meteor mongo
Query
> db.tasks.find();
Insert
> db.tasks.insert({ text: "CREATE the JIRA ticket for Hybrid", createAt: new Date() });
Forms and Events
The HTML form will be easy
<!-- add a form below the h1 -->
<form class="new-task">
<input type="text" name="text" placeholder="Type to add new tasks" />
</form>
handle the event and store our data into mongo
Template.body.events({
"submit .new-task": function (event) {
// This function is called when the new task form is submitted
var text = event.target.text.value;
Tasks.insert({
text: text,
createdAt: new Date() // current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
return false;
}
});
}
Update and Remove Operation
Add the operation label to the html
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="text">{{text}}</span>
</li>
</template>
Event Operation on JS, update the checked property or delete the data
// In the client code, below everything else
Template.task.events({
"click .toggle-checked": function () {
// Set the checked property to the opposite of its current value
Tasks.update(this._id, {$set: {checked: ! this.checked}});
},
"click .delete": function () {
Tasks.remove(this._id);
}
});
3. Deploy the App
> meteor deploy sillycat.meteor.com
Then after that, I can visit this URL
http://sillycat.meteor.com/
References:
http://cordova.apache.org/docs/en/4.0.0/guide_overview_index.md.html#Overview
http://ngcordova.com/
http://ionicframework.com/
one example
https://github.com/windy/wblog_app
http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framework.html
phonegap
http://sillycat.iteye.com/blog/2008402
meteor
https://www.meteor.com/
https://github.com/awatson1978/meteor-cookbook/blob/master/table-of-contents.md
https://www.meteor.com/try
https://github.com/meteor/meteor
camera
http://www.sitepoint.com/beginners-guide-mobile-development-meteor/
https://github.com/meteor/mobile-packages
https://github.com/meteor/mobile-packages/blob/master/packages/mdg:camera/README.md
发表评论
-
ionic UI(4)ionic2 framework - basic and components and native
2016-03-24 02:33 1223ionic UI(4)ionic2 framework - b ... -
ionic UI(3)TypeScript - handbook
2016-03-22 23:21 591ionic UI(3)TypeScript - handboo ... -
ionic UI(2)ionic2 framework - TypeScript - tutorial
2016-03-22 06:52 1620ionic UI(2)ionic2 framework - T ... -
Parse and Heroku Service(3)Parse Server and Parse Dashboard
2016-03-22 06:30 942Parse and Heroku Service(3)Pars ... -
Parse and Heroku Service(2)Mail Templates and Push Notification
2016-03-22 02:45 543Parse and Heroku Service(2)Mail ... -
ionic UI(1)Introduction
2016-03-19 03:18 679ionic UI(1)Introduction 1 Inst ... -
Parse and Heroku Service(1)Heroku Installation and Play
2016-03-19 00:13 784Parse and Heroic Service(1)Hero ... -
Hybrid(5)Customize Meteor Directly Google Login
2015-09-01 02:33 885Hybrid(5)Customize Meteor Direc ... -
Hybrid(4)Favorite Places - Google Login
2015-09-01 02:02 1296Hybrid(4)Favorite Places - Goog ... -
Hybrid(3)More Meteor Example - Social
2015-08-11 05:04 728Hybrid(3)More Meteor Example - ... -
Hybrid(2)meteor Running Android and iOS
2015-07-28 23:59 1003Hybrid(2)meteor Running Android ... -
Create the Google Play Account
2015-07-18 06:42 1056Create the Google Play Account ... -
Secure REST API and Mobile(1)Document Read and Understand OAUTH2
2015-07-14 00:36 728Secure REST API and Mobile(1)Do ... -
Screen Size and Web Design
2015-07-11 01:11 694Screen Size and Web Design iPh ... -
Android Fire Project(1)Recall Env and Knowledge
2015-02-11 12:28 650Android Fire Project(1)Recall ... -
Android Content Framework(1)Concept
2014-06-14 13:54 1049Android Content Framework(1)Con ... -
Feel Android Studio(1)Install and Update Android Studio
2014-04-11 03:12 1975Feel Android Studio(1)Install a ... -
IOS7 App Development Essentials(2)iBeacon
2014-03-05 05:55 848IOS7 App Development Essentials ... -
IOS7 App Development Essentials(1) Persistent Store
2014-03-05 05:54 1277IOS7 App Development Essentials ... -
Mobile Jquery(5)Update and Know about Express
2014-01-30 06:33 1227Mobile Jquery(5)Update and Know ...
相关推荐
自定义Cordova插件,开源的插件不满足需求时,可以自己开发自己的插件
ionic cordova android安装教程
APP ionic cordova 生物识别指纹识别面部识别登录
一共22个pdf文档,适合初学者学习,内容详细。
基于ionic+cordova+angularJs搭建移动端App开发环境。
离子广播样本使用在ionic 5中使用样本用法当前该项目支持Cordova平台浏览器, Android , IOS要求我用过节点物品版本笔记节点12.16.1 npm 6.13.4科尔多瓦物品版本笔记科尔多瓦区9.0.0 本地项目科尔多瓦android引擎...
特征: 检查指纹扫描仪是否可用 指纹认证 离子原生支持 后备选项 人脸识别支持 该插件的 4.0 版本是对以前版本的重大升级。以前的版本只允许视觉指纹提示。4.0 版允许在生物识别提示后面保存加密的秘密,以实现真正...
You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your ...
本文档适合初学者阅读,关于介绍nodejs的安装,ionic+cordova 开发移动APP,包括 详细安装教程和打包apk教程。
cordova和ionic的样例工程,对使用原理做了基本和全面的示范
3.在命令台输入【ionic cordova platform add android】,添加android平台 4.在命令台输入【ionic cordova build android】,打android包 5.在命令台输入【cordova run android】,运行到真机或模拟机(只能连接一个...
Ionic Angular Cordova介绍以及Ionic环境搭建
用ionic3做个打印的功能,自定义个插件demo,并且调用成功
一、Ionic 介绍............................................................................................................................1 二、Ionic 和Cordova(phonegap)、Angular 关系。..................
自定义cordova插件,添加到项目中使用(含参考链接,可自己学习)
Cordova_Ionic_AngularJs环境安装及Eclipse开发HybridApp的配置 Cordova(以前叫PhoneGap)提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、 麦克风等。 Cordova还...
/ *安装TenJ节点,Ionic,Cordova,SDK和android Todo con sus sus configurados * / // Comandos Crear nueva应用程序离子启动Nombre空白 Agregar plataforma android ionic平台添加android Construir应用程序...
主要介绍了ionic cordova一次上传多张图片(类似input file提交表单)的实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
ngCordova插件例子整合ionic,cordova,angluarJs。其中包括摄像头、gps定位、文件读写、网络状态、sqlite、toast等。
Ionic : Hybrid Mobile App Development by Rahat Khanna English | 14 Jun. 2017 | ASIN: B072N8FRG8 | 544 Pages | AZW3 | 18.96 MB An end–to-end journey, empowering you to build real-time, scalable, and ...