My very first mobile app

[LeBurt]

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.

[Leonardo Augusto]

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

https://dl.dropboxusercontent.com/u/103204235/angular and onsenui.rar

And a little piece of the code …

var notebooks = angular.module('app', ['onsen']);

notebooks.controller('NotebookListCtrl', function($scope) {  

HTML

  <ons-row style="margin-top: 100px; text-align: center;">
                <ons-col>
         <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>
  </select>
  <ul id="notebook_ul">
    <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
      name: {{notebook.name}}<br/>
      procesor: {{notebook.procesor}}<br/>
      <div class="right top">{{notebook.age}}</div>
    </li>
  </ul>
  <span>Number of notebooks: {{notebooks.length}}</span>
</div>
                </ons-col>
            </ons-row>

Is not Onsen2 but will be easy to you migrate!

And to help you, about tools:

Monaca + onsen ui
https://monaca.io/

Or Visual studio comunity + Onsen UI templates
https://visualstudiogallery.msdn.microsoft.com/8968a18d-cc94-4ebf-8183-ed0e1f6247f3

[munsterlander]

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!

[LeBurt]

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