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.
ons.disableAutoStyling(); right after including onsenui.js in your index.html.component.setX(...) or component.isX() method has been removed. Use X property instead (CamelCase). Example: myCarousel.setDisabled(true); => myCarousel.disabled = true;.getDeviceBackButtonHandler()-like methods have been removed. Use onDeviceBackButton properties instead. Example: myNavigator.onDeviceBackButton = function() {};.getCurrentPage method has been removed. Use topPage (HTMLElement) property instead: myNavigator.getCurrentPage(); => myNavigator.topPage;getPages() method has been removed. Use pages property (HTMLCollection) instead: myNavigator.getPages(); => myNavigator.pages;options.onTransitionEnd has been renamed to options.callback.persistent and no-reload attributes for tabs. These behaviors are now always applied by default.modifiers (longdivider, nodivider, etc.).ons-list-item can be restructured with left, center and right elements instead of using ons-col and ons-row or custom CSS.setActiveCarouselItemIndex() method has been renamed to setActiveIndex().getActiveCarouselItemIndex() method has been renamed to getActiveIndex().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;
}
In case you want to also remove AngularJS 1 dependency from your project, you may need to do something else:
var attribute works only for AngularJS. Use id instead and get the element with getElementById or querySelector. Example. var myNavigator = document.getElementById('my-navigator'); myNavigator.pushPage(...);ons-prepush attributes work only for AngularJS. Use normal JavaScript event listeners instead. Example: `document.addEventListener(‘prepush’, function(event) {});ons-sliding-menu and ons-split-view directives work only for AngularJS. Use ons-splitter component instead.