AngularJSとOnsenUIを使ったMonaca

現在、Monacaでハイブリットアプリを制作しています。

【Onsen UI Tabbar】というテンプレートで制作を始めると、見た目はOnsenUIですが

画面遷移などはMVCの【AngularJS】というフレームワークを使っていることがわかりました。

しかし、このAngularJSの使い方がさっぱりわかりません。
以前仕事で、PHPのMVCフレームワークを1年程使っていたのでMVCの考え方などは、なんとか理解しています。

そこで質問なのですが

① ng-click="myNavigator.pushPage('subpage.html')" などでページを遷移した場合、右端から画面が出てきたような効果を使って、画面遷移を行いますよね。
これを2回やりたい場合、つまり A→B→C と移動したい場合 (BとCがリスト)はどのよな実装を行えばよいのでしょうか。

②AngularJSを基礎から勉強できるサイトや書籍などおススメがあれば教えてください。

ご存じの方、どうかご教授願います。
大変初歩的な質問になりますが、どうぞよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

今回のご質問内容であれば、AngularJS 云々よりも、OnsenUI の GitHub にある demo のソースを読むのがわかりやすいと思います。

OnsenUI/OnsenUI

demo/navigator_navigator/index.html にあるこの部分を

html
1  <ons-template id="page1.html">
2    <ons-page>
3      <ons-toolbar>
4        <div class="left"><ons-back-button>Back</ons-back-button></div>
5        <div class="center">Page 2</div>
6      </ons-toolbar>
7
8      <div style="text-align: center">
9        <h1>Page 2</h1>
10        <ons-button modifier="light"
11          ng-click="navi.pushPage('page1.html')">
12          Push Page
13          </ons-button>
14
15        <ons-button modifier="light"
16          ng-click="navi.popPage()">
17          Pop Page
18        </ons-button>
19      </div>
20    </ons-page>
21  </ons-template>

ページ分作成するだけです。

html
1  <ons-template id="page1.html">
2    <ons-page>
3      <ons-toolbar>
4        <div class="left"><ons-back-button>Back</ons-back-button></div>
5        <div class="center">Page 2</div>
6      </ons-toolbar>
7
8      <div style="text-align: center">
9        <h1>Page 2</h1>
10        <ons-button modifier="light"
11          ng-click="navi.pushPage('page2.html')">
12          Push Page 3
13          </ons-button>
14
15        <ons-button modifier="light"
16          ng-click="navi.popPage()">
17          Pop Page
18        </ons-button>
19      </div>
20    </ons-page>
21  </ons-template>
22  <ons-template id="page2.html">
23    <ons-page>
24      <ons-toolbar>
25        <div class="left"><ons-back-button>Back</ons-back-button></div>
26        <div class="center">Page 3</div>
27      </ons-toolbar>
28
29      <div style="text-align: center">
30        <h1>Page 3</h1>
31        <ons-button modifier="light"
32          ng-click="navi.pushPage('page3.html')">
33          Push Page 4
34          </ons-button>
35
36        <ons-button modifier="light"
37          ng-click="navi.popPage()">
38          Pop Page
39        </ons-button>
40      </div>
41    </ons-page>
42  </ons-template>
43  <ons-template id="page3.html">
44    <ons-page>
45      <ons-toolbar>
46        <div class="left"><ons-back-button>Back</ons-back-button></div>
47        <div class="center">Page 4</div>
48      </ons-toolbar>
49
50      <div style="text-align: center">
51        <h1>Page 4</h1>
52<!--         <ons-button modifier="light"
53          ng-click="navi.pushPage('page1.html')">
54          Push Page
55          </ons-button>
56
57 -->        <ons-button modifier="light"
58          ng-click="navi.popPage()">
59          Pop Page
60        </ons-button>
61      </div>
62    </ons-page>
63  </ons-template>

書籍は、『AngularJS アプリケーションプログラミング』でしょうか。決してポチらず、書店で内容を確認してから購入することをお勧めします。

投稿2015/10/16 01:48

izkn

総合スコア1698

izkn

2015/10/16 02:10

追加です。別ページでの構成で、少しAngularJS での処理も記載されています。こちらのほうがご質問内容にマッチしていたかも。 Easily create Master/Detail pages in Onsen UI : Asial BLOG http://blog.asial.co.jp/1219?lang=en