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