AngularJS + Onsen UI 2 + Monaca

While Angular 2 has just been released and promises to bring a revolution on the hybrid app development scene, AngularJS still is widely used, widely documented and very simple to use due to how similar it is to Cordova App development. Angular 2 makes heavier use of TypeScript which is a subset of Javascript with its own rules and features.

Coding with AngularJS

AngularJS makes use of the $scope environment to attach functions to variables and add dynamism to the elements in the App. In this example I attach the input text element to a name variable which is then used in the <p> element. This way whenever the text on the input is modified, the <p> value will display the modified text in real time.

Creating a MultiPage Application

Somewhere down the line of our development process we're going to need an application that displays several different windows. This may be due to the fact each window has a different purpose or the data among them isn't related. Whatever the reason, these can be implemented through the use of the <ons-navigator> tag.

The following code allows the Monaca application to load another page called page2.html when the user presses the Change Page button. The files are placed inside the www folder and the AngularJS file is placed inside a js folder in www.