Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

My very first mobile app

  • Greetings from Canada!

    So I’m a total newbie. I know how to code, but haven’t done anything in the mobile space ever. It took me a while to decide on the tools and frameworks to use, and now I’ve set my mind on Cordova + Angular2 + Onsen2.

    The thing is, while I can understand the three frameworks separately, I’m having a hard time figuring out how to combine them. I’m wondering if anybody would be kind enough to publish a HelloWorld app that uses an Onsen2 page, built on top of Angular2, compilable in Cordova. I think that’d be enough to get me started.

    Thanks much.

  • hello @LeBurt ! Greetings from Brazil . I’m suspect i love ANGULAR lol.
    So, follows a full example and onsenui.rar

    And a little piece of the code …

    var notebooks = angular.module('app', ['onsen']);
    notebooks.controller('NotebookListCtrl', function($scope) {  


      <ons-row style="margin-top: 100px; text-align: center;">
             <div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl">
      <input type="text" id="query" ng-model="query" onfocus="pxtrack.emit('counter', '1')"/>
      <select ng-model="orderList" onchange="pxtrack.emit('counter', '2')">
        <option value="name">By name</option>
        <option value="-age">Newest</option>
        <option value="age">Oldest</option>
      <ul id="notebook_ul">
        <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
          name: {{}}<br/>
          procesor: {{notebook.procesor}}<br/>
          <div class="right top">{{notebook.age}}</div>
      <span>Number of notebooks: {{notebooks.length}}</span>

    Is not Onsen2 but will be easy to you migrate!

    And to help you, about tools:

    Monaca + onsen ui

    Or Visual studio comunity + Onsen UI templates

  • As @Leonardo-Augusto discussed, there are multiple examples that are easy to implement. If you want the most basic example from Onsen direct, then I recommend using the Free Monaca Cloud IDE, create a project, and then scroll to the bottom and select the Onsen 2.0 Quick Start. It has plain JS, React.JS, and AngularJS as all demos that run on the device and can be compiled.

    The easiest way to test your apps, is with the Monaca Debugger available in the app stores for your desired platform. It syncs with your Monaca account and you can do real-time debugging.

    Good luck regardless of the direction you go!

  • Thanks guys, I think I should be OK with this. I’ll give it a good try and see what happens.