Improve this

Onsen UI 1.x からの移行

Onsen UI 1.x は、AngularJS 1.x に依存していました。Onsen UI は、2.x 以降から、Web Component を基礎として構築され、他のフレームワークへの依存もなくなりました。ただし、AngularJS 1 では役立つ機能も多々提供されているため、Onsen UI と AngularJS 1 を連携させ、一部機能は継続してサポートしています。

ここでは、Onsen UI 1.x から 2.x ( AngularJS 1 と連携 ) へのコードの移行方法を、簡単に解説します。なお、Onsen UI と他のフレームワーク ( Angular 2+、React など ) の組み合わせに興味がある方は、各フレームワーク向けのドキュメントをご確認ください。Onsen UI のコア/中核となる中身 ( コンポーネント、スタイルなど ) は、どのフレームワークの組み合わせにおいても変わらないため、Onsen UI のコンポーネント、スタイルなどに関しては、同じ知識が使用できます。

配布用 Onsen UI 2 パッケージの中には、onsenui.js と angular-onsenui.js が置かれており、後者のファイルでは、ファイル名が示すとおり、前述の 連携処理を行っています。なお、AngularJS 1 本体の読み込みは、現在、行っていません ( 代わりに、「 連携処理 」 を行っています )。最初に行うことは、index.html 内で読み込んでいるファイルを、次のように更新します。

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

移行する上で、上記の変更が、最も大事で、最も初めに行う処理です。ただし、上記の更新後に、アプリを実行しても、コンソール上ではエラー ( メソッドの欠如/オブジェクトの欠如を示すエラー ) が出力されます。これは、Onsen UI 2 では、開発者に使いやすいように API が改良されているためです。エラーを解決するためには、別途、コード内で使用されているメソッドの名前を更新したり、または、新規に追加されたプロパティーを使用できるようにメソッドの定義を修正する必要があります。

次の項目では、開発者側で行う変更点をまとめています。変更後もなんらかの問題が生じる場合には、Onsen UI 2 の ガイド 上で API の詳細などを確認してください。それでも解決できない場合には、コミュニティーのフォーラム を併せてご確認ください。

概要
ons-navigator
ons-tabbar
ons-list
ons-button
ons-scroller

このディレクティブは廃止されました。現在は、次のような CSS と div 要素を使用して、同等の挙動を実現しています。

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

AngularJS 1 を取り除く方法

プロジェクトから AngularJS 1 を取り除く場合には、次の処理が必要となります。

← Onsen UIの拡張 Monacaとは？ →