The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

【OnsenUI】リストを使って、詳細画面への遷移を行う【AngularJS】

前回の記事にも書いた通り、AngularJSとOnsenUIのリストを使って画面遷移を実装する

 

it-innovation.hatenablog.com

f:id:duo-taro100:20160218004611p:plain

 

記事の作成から数年が経ち、情報が古くなったので新たに記事をおこした。

OnsenUI vaer2.0を仕様

www.sky-limit-future.com

 

 

 

 

---------------------------------------------------

以下古い記事なので参考までに

 

今後の開発についてだが、基本的にはMonacaを使用して行う。理由は開発環境が整っていて、ブラウザがあれば開発が可能だから。

 

 

<本日のメニュー>

0.事前準備
1.リストの作成
2.データを保持するServiceの実装
3.データの表示(リスト形式)
4.画面遷移の実装(データの受け渡し)

f:id:duo-taro100:20160322234952p:plain

それぞれわからないところを細かく調べていく。

横道にそれることもあるので・・・

参考ページ

blog.asial.co.jp

 

参考というか、ソースは拝借して、ここではもっと深く入り込んでいく。

事前準備

まずはMonacaにログインして、OnsenUIテンプレートを選ぶ

(無料会員登録が済んでいない場合は、まず会員登録から)

monaca.io

 

f:id:duo-taro100:20160323000747p:plain

これを選択すると、

f:id:duo-taro100:20160323000932p:plain

 このように表示される。

このテンプレートでは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>

すると、リストが表示される 

f:id:duo-taro100:20160323001645p:plain

 

今回は、リスト押下時に画面遷移をさせたいので、矢印(>)のようなものをつけたい。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>

f:id:duo-taro100:20160323003809p:plain

データを保持する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を用いた書き方。初見なので何をやっているかわからない。

調べつつ、情報の整理のために、書き方に解説を加えていく。

f:id:duo-taro100:20160322234907p:plain

 

var List = angular.module('List');

まず思ったことは、「moduleってなに??」ってこと

 

it-innovation.hatenablog.com

 

要約すると、

モジュールはアプリケーションが必要としているパーツの情報を持ったオブジェクト

 

続いて

List.factory('Data', function(){ });

 ここでは思ったことは「factoryってなに??」ってこと

 

it-innovation.hatenablog.com

 

要約すると、

factory()は値や関数を定義する方法の一つ!

   { 
      id: 'Item 1',
      memo: 'Item 1 Description'
   }

 なのでdataService.jsでは「data」に配列を格納しており、それを返しているのだろう。長くなりそうなので、続きは次回。

データを表示させるところから。