【OnsenUI】リストを使って、詳細画面への遷移を行う【AngularJS】
前回の記事にも書いた通り、AngularJSとOnsenUIのリストを使って画面遷移を実装する
記事の作成から数年が経ち、情報が古くなったので新たに記事をおこした。
OnsenUI vaer2.0を仕様
---------------------------------------------------
以下古い記事なので参考までに
今後の開発についてだが、基本的にはMonacaを使用して行う。理由は開発環境が整っていて、ブラウザがあれば開発が可能だから。
＜本日のメニュー＞
0.事前準備
1.リストの作成
2.データを保持するServiceの実装
3.データの表示（リスト形式）
4.画面遷移の実装（データの受け渡し）
それぞれわからないところを細かく調べていく。
横道にそれることもあるので・・・
参考ページ
参考というか、ソースは拝借して、ここではもっと深く入り込んでいく。
事前準備
まずはMonacaにログインして、OnsenUIテンプレートを選ぶ
（無料会員登録が済んでいない場合は、まず会員登録から）
これを選択すると、
このように表示される。
このテンプレートではindex.htmlが呼ばれると、そのままpage1.htmlが表示される仕組みになっている。これは「ページナビゲーション」とよばれる実装方法。
以下、OnsenUIの説明
ページナビゲーション
Onsen UIでは、
<ons-navigator>コンポーネントでページナビゲーションを実装します。ons-navigatorは画面要素を持たない、ナビゲーションコントローラーです。そのため、一般的にはページ内にツールバーを表示するために<ons-toolbar>を組み合わせます。ナビゲーターは画面遷移をする際に自動的にアニメーションを適用し、親子関係を持つページを作成するために利用できます。
なので、まずはpage1.htmlにリストを表示させる！
リストの作成
OnsenUIでリストを作成するには
<ons-list> </ons-list>
を使用する。もともとのpage1.htmlを以下のように変更する
<ons-page>
<ons-toolbar>
<div class="center">ListPage</div>
</ons-toolbar><div style="text-align: center">
<ons-list>
<ons-list-item>リスト1</ons-list-item>
<ons-list-item>リスト2</ons-list-item>
<ons-list-item>リスト3</ons-list-item>
</ons-list>
</div>
</ons-page>
すると、リストが表示される
今回は、リスト押下時に画面遷移をさせたいので、矢印（＞）のようなものをつけたい。CSSや画像などで付ける方法もあるが、OnsenUIにはそれが用意されている
<ons-list modifier="chevron"></ons-list>
のように、「modifier="chevron"」をつけることによって、右矢印付きのリストが表示される。
修正後のpage1.htmlと表示画面は以下の通り。
<ons-page>
<ons-toolbar>
<div class="center">ListPage</div>
</ons-toolbar><div style="text-align: center">
<ons-list>
<ons-list-item modifier="chevron">リスト1</ons-list-item>
<ons-list-item modifier="chevron">リスト2</ons-list-item>
<ons-list-item modifier="chevron">リスト3</ons-list-item>
</ons-list>
</div>
</ons-page>
データを保持するServiceの実装
今回はデータを固定で用意して、それをリストに表示させる。上でリストを作成したのはどのように表示されるか試すためなので、page1.htmlはあとで修正する。
まずはdataService.jsを作成し、以下のように書く
＜ dataService.js＞
var myApp = angular.module('myApp');
myApp.factory('Data', function(){
var data = {};
data.items = [
{
title: 'Item 1',
description: 'Item 1 Description'
},
{
title: 'Item 2',
description: 'Item 2 Description'
},
{
title: 'Item 3',
description: 'Item 3 Description'
}
];
return data;
});
上記はAngularJSを用いた書き方。初見なので何をやっているかわからない。
調べつつ、情報の整理のために、書き方に解説を加えていく。
var List = angular.module('List');
まず思ったことは、「moduleってなに？？」ってこと
要約すると、
モジュールはアプリケーションが必要としているパーツの情報を持ったオブジェクト
続いて
List.factory('Data', function(){ });
ここでは思ったことは「factoryってなに？？」ってこと
要約すると、
factory()は値や関数を定義する方法の一つ！
{
id: 'Item 1',
memo: 'Item 1 Description'
}
なのでdataService.jsでは「data」に配列を格納しており、それを返しているのだろう。長くなりそうなので、続きは次回。
データを表示させるところから。
