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
Todo List
{{#each tasks}} {{> task}} {{/each}}
{{text}}
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 () {});} Meteor parses all the HTML files in app folder and identifies three top-level tags:
, and
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> me teor 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
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); Deploy the App} }); 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
