Improve this

Migrating from Onsen UI 1.x

Onsen UI 1.x was dependent on AngularJS 1.x, while Onsen UI 2.x is built on top of Web Components and is framework agnostic. However, we do provide AngularJS 1 bindings to support the cool features of this framework.

In this guide, we will briefly explain how to migrate the code of your apps from Onsen UI 1.x to Onsen UI 2.x + AngularJS 1 bindings. If you rather want to use with Angular 2+ or even React and other frameworks, please take a look into docs for each frameworks. They share the same core, which means you can still use the same knowledge, components and style definitions.

Within the provided Onsen UI 2 package, you will find onsenui.js as well as angular-onsenui.js, the latter standing for the mentioned bindings. It does not include AngularJS 1 itself anymore. First of all, you need to update the included files in your index.html in the following way:

<script src="path/to/onsenui.js"></script>
<script src="path/to/angular.js"></script>
<script src="path/to/angular-onsenui.js"></script>

That is the first and main change for the migration process. Now, if you try to run your app you will probably find some console errors due to inexistent methods and objects. The reason is that for Onsen UI 2 we have updated and improved the API to make it more comfortable for developers. Basically, in most of the cases all you will need to do is replacing some method names and use the newly introduced properties instead of old method calls.

In the following we summarize a list of common changes that you will probably face. In case you have a different problem, please have a look at Onsen UI 2 reference and check the new names of the API. In case you cannot find an answer you can also ask in our community forum.

General:
ons-navigator
ons-tabbar
ons-list
ons-button
ons-scroller

This directive has been removed. You can use a div element with simple CSS to achieve the same behavior:

.scroller {
  display: block;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  -ms-scroll-snap-type: mandatory;
}

Removing AngularJS?

In case you want to also remove AngularJS 1 dependency from your project, you may need to do something else: