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
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
