`
sillycat
  • 浏览: 2550934 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Hybrid(1)ionic Cordova meteor

 
阅读更多
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">&times;</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 cordova 插件

    自定义Cordova插件,开源的插件不满足需求时,可以自己开发自己的插件

    ionic cordova android安装教程

    ### ionic cordova Android安装教程 #### 一、安装JDK 为了确保Ionic Cordova能够顺利地在Android环境中运行,第一步需要安装Java Development Kit (JDK)。 1. **下载与安装** - 访问Oracle官方网站:...

    APP ionic cordova 生物识别指纹识别面部识别登录

    APP ionic cordova 生物识别指纹识别面部识别登录

    基于Ionic Cordova的LogisticService后勤项目设计源码

    该项目为基于Ionic Cordova框架开发的LogisticService后勤服务系统源码,包含268个文件,涵盖67个PNG图片、46个JavaScript、41个SCSS样式表、30个HTML页面、24个JPG图片、17个JSON数据文件等多种类型。主要采用...

    ionic+Angular+Cordova初学者文档

    《ionic+Angular+Cordova初学者文档》是一套全面的移动端开发教程,专为初学者设计。这个压缩包包含了22个PDF文档,每个都详细介绍了关键概念和技术,旨在帮助新手快速掌握混合移动应用开发的核心技能。 首先,让...

    ionic+cordova学习之环境搭建

    Ionic+Cordova 环境搭建知识点大全 Ionic+Cordova 环境搭建是移动应用开发的必经之路,对于初学者来说,环境搭建的过程往往是一个痛苦的过程。本文将详细介绍 Ionic+Cordova 环境搭建的过程,包括 JDK 环境配置、...

    基于ionic+cordova+angularJs搭建移动端App

    基于ionic+cordova+angularJs搭建移动端App开发环境。

    基于Ionic和Cordova的跨平台移动APP的研究与应用.pdf

    本文讨论了如何使用Ionic和Cordova(PhoneGap)开发跨平台移动Hybrid App。Ionic是一个专注于使用Web开发技术,基于HTML5创建类似于手机平台原生应用的开发框架。Cordova提供了丰富的原生接口,解决了移动端原生功能...

    ionic3-使用cordova创建自定义插件

    1. 初始化插件目录结构:使用 `cordova plugin create` 命令创建插件项目。 ```bash cordova plugin create my-plugin --id com.example.myplugin ``` 2. 编写 `plugin.xml` 文件:这是插件的核心配置文件,用于...

    cordova,ionic 例程

    【Cordova和Ionic框架详解】 Cordova和Ionic是两个在移动应用开发领域广泛使用的开源框架,它们结合使用可以创建跨平台的原生移动应用程序。Cordova主要负责将Web应用程序打包成原生应用,而Ionic则提供了丰富的UI...

    ionic3自定义cordova插件

    1. **安装插件**:通过`cordova plugin add &lt;your-plugin-path&gt;`命令将本地的插件添加到`Ionic 3`项目中,或者如果是从npm获取的,使用`npm install --save &lt;your-plugin-name&gt;`。 2. **导入和使用插件**:在`Ionic...

    ionic-broadcaster-sample:使用ionic-native在ionic2中使用cordova-broadcaster的样本用法

    离子广播样本使用在ionic 5中使用样本用法当前该项目支持Cordova平台浏览器, Android , IOS要求我用过节点物品版本笔记节点12.16.1 npm 6.13.4科尔多瓦物品版本笔记科尔多瓦区9.0.0 本地项目科尔多瓦android引擎...

    ionic-cordova-demo-master.zip

    1. `config.xml` - Cordova项目的配置文件,定义了应用的基本信息,如名称、ID、图标和权限。 2. `platforms` - 存放针对不同移动操作系统的原生项目代码,如Android和iOS。 3. `plugins` - 存放项目使用的Cordova...

    支持 Android 和 iOS 的用于指纹传感器(和 FaceID)的 Cordova 插件_java_代码_下载

    特征: 检查指纹扫描仪是否可用 指纹认证 离子原生支持 后备选项 人脸识别支持 该插件的 4.0 版本是对以前版本的重大升级。以前的版本只允许视觉指纹提示。4.0 版允许在生物识别提示后面保存加密的秘密,以实现真正...

    01 Ionic Angular Cordova介绍以及Ionic环境搭建-avi.rar

    【标题】"01 Ionic Angular Cordova介绍以及Ionic环境搭建-avi.rar"涉及的主要知识点是移动应用开发框架 Ionic、Angular 和 Cordova 的基础知识及其环境配置。这篇文章将详细讲解这三个技术的核心概念、相互关系以及...

    初学者 nodejs+ionic+cordova 详细安装教程

    ### 初学者 nodejs+ionic+cordova 详细安装教程 #### 一、Node.js 安装及概述 **Node.js简介** Node.js 是一个开放源代码、跨平台的JavaScript运行时环境,它允许开发者使用JavaScript编写服务器端的应用程序。...

    Hybrid Mobile Development with Ionic

    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 ...

    picker_ionic4.zip

    3.在命令台输入【ionic cordova platform add android】,添加android平台 4.在命令台输入【ionic cordova build android】,打android包 5.在命令台输入【cordova run android】,运行到真机或模拟机(只能连接一个...

    ionic支持库(包括命令行和插件)

    - **打包与发布**:完成开发后,使用`ionic cordova build android --prod`或`ionic cordova build ios --prod`创建生产版本的APK/IPA,然后通过各自平台的发布流程进行分发。 ### 5. 文件放置 如果由于网络问题...

    ionic3 基于cordova编写的安卓串口通信插件 ionic3 serial port plugins for android.zip

    ionic3 基于cordova编写的安卓串口通信插件 ionic3 serial port plugins for androidcordova-插件-串行端口ionic3 基于cordova编写的安卓串口通信插件 ionic3 serial port plugins for android支持读取字符串和十六...

Global site tag (gtag.js) - Google Analytics