Download as PDF, PPTX
![2. ナビゲーション
∼実践∼
angular.module('app', ['ionic', 'app.controllers'])
.config(function($stateProvider,$urlRouterProvider)
{
$stateProvider
.state('tab.third',{
'url':'/third',
views: {
'third': {
templateUrl: "templates/tabs-third.html",
controller:'ThirdCtrl'
}
}
})
.state('tab.third-detail1',{
'url':'/third/detail1',
views: {
'third': {
templateUrl: "templates/tabs-third-
detail1.html",
controller:'ThirdDetail1Ctrl'
}
}
})
app.js
<ion-tab title="third" icon-off="ion-
chatbox" icon-on="ion-chatbox" ui-
sref="tab.third">
<ion-nav-view name="third"></ion-
nav-view>
</ion-tab>
…view やcontentを用意しStateを変更していく。URLの
階層が深くなるとナビゲートしてバックボタンが表示される。
tabs.html
href="#/tab/third/detail1"
もしくは、
ui-sref=“tab.third-detail1”
tabs-third.html
tabs-third-detail1.html](https://image.slidesharecdn.com/ionic-151015050843-lva1-app6892/75/Ionic-28-2048.jpg)
More Related Content
Ionicでハイブリッドアプリ入門①
- 1.
- 2. 対象者 ・HTML,CSS,JAVASCRIPTを理解していてかつ、WEBサービス が作れる ・ANGULAR.JSを理解している ・BOWER, NPM, GULP,CORDOVAが何かくらいはわかる ・MVCの概念が理解できている ・ある程度ターミナルに触り慣れてる 自信がない場合：ある程度調べてから取り組みましょう
- 3. IONICでハイブリッドアプ リ入門シリーズ 1. INTRODUCTION +STATE + UI (今回) 2. SERVICE + MODEL 3. AND MORE…
- 4. 今日のアウトライン ・WHAT IS THE“IONIC”? ・DEVELOPMENT ENVIRONMENT ・PART1: STATE ・PART1: UI ・LAST BUT NOT LEAST…
- 5.
- 6. WHAT IS THE“IONIC”? “THE BEAUTIFUL, OPEN SOURCE FRONT-END SDK FOR DEVELOPING HYBRID MOBILE APPS WITH HTML5.” - 美しいハイブリッドアプリを作るためのSDKです- ・ネイティブライクなUIが用意されているデザイン ツール
- 7. WHAT IS THE“IONIC”? ionic Angul ar.js Cordo va.js ハイブリッドアプリ HTML 5 Sass( CSS) Javas cript UI フレームワーク 言語
- 8. WHAT IS THE“IONIC”? ionic Angul ar.js Cordo va.js ハイブリッドアプリ HTML 5 Sass( CSS) Javas cript UI フレームワーク 言語 ANGULAR.JS ・双方向データバイ ンディング ・MVW ・依存性の注入(DI) JAVASCRIPTの拡張 というよりもHTML 拡張って感じ
- 9. WHAT IS THE“IONIC”? ionic Angul ar.js Cordo va.js ハイブリッドアプリ HTML 5 Sass( CSS) Javas cript UI フレームワーク 言語 CORDOVA.JS ・JAVSCIRPTのコード をネイティブコード へ橋渡しするもの ・WEBビュー上で擬似 的に再現している(常 にブラウザで見てい る感じ) WEBアプリ一つで複 数プラットフォーム で使えるアプリにな る
- 10.
- 11. INSTALLATION sudo npm install-g cordova ionic ionic start アプリ名 blank cd アプリ名 ionic serve 公式HP ※ node.jsとnpmは必要
- 12.
- 13. DIRECTORY ├── bower.json //bower dependencies ├── config.xml // cordova configuration ├── gulpfile.js // gulp tasks ├── hooks // custom cordova hooks to execute on specific commands ├── ionic.project // ionic configuration ├── package.json // node dependencies ├── platforms // iOS/Android specific builds will reside here ├── plugins // where your cordova/ionic plugins will be installed ├── scss // scss code, which will output to www/css/ └── www // application - JS code and libs, CSS, images, etc.
- 14. 手を動かす前に、、、 M: MODEL データ V:VIEW 表示部 C: CONTROLLER その他 処理 ・STATEは司令塔。特 定のURLにはこのVIEW とCONTROLLERという 様に結びつける M C V ユーザー State App.js Controller.js ※Angular.jsはMVW
- 15. 手を動かす前に、、、 ・SPA(SINGLE PAGE APPLICATION):基本INDEX.HTML１つ のみで後は部分的にJAVASCIRPTで動的にページ遷移し ていく手法。無駄な通信や再描画が無くなるので、 ネイティブアプリの様にサクサク動くように見える。 ・URLフラグメント: URLのお尻に付く# 以下の部分 SPAでは、画面遷移をこの技術を用いて行う。これを ROUTINGと言う。
- 16.
- 17.
- 18. 1. .config(function($stateProvider,$urlRouterProvider){ 2. $stateProvider 4..state('test', { 5. url: "/test", 6. templateUrl: “templates/test.html” 7. controller: “TestCtrl” 8. }) 9. $urlRouterProvider.otherwise("/test"); 11. }); STATE IONIC-NAV-VIEWが１つ の時(NAMEを振ってない時) - config内に定義 - $stateProviderと $urlRouterProvid erを読込 - state毎に①名前 ②url③template Url④Controller を定義(controller はtemplate内に 定義してもOK) ①名前 ②url ③templateUrl ④Controller
- 19. 1. .config(function($stateProvider,$urlRouterProvider){ 2. $stateProvider 4..state('test', { 5. url: "/test", 6. templateUrl: “templates/test.html” 7. controller: “TestCtrl” 8. }) 9. $urlRouterProvider.otherwise("/test"); 11. }); STATE IONIC-NAV-VIEWが１つ の時(NAMEを振ってない時) - urlがどれにも当 てはまらない時 のデフォルト stateを $urlRouterProvi er.otherwise(“”) で指定 ①名前 ②url ③templateUrl ④Controller
- 20. 1. .config(function($stateProvider,$urlRouterProvider){ 2. $stateProvider 3..state('test',{ 4. 'url':'/test', 5. views: { 6. 'hoge': { 7. templateUrl: "templates/test.html", 8. controller:'TestCtrl' 9. }, 10. 'fuga': { 11. templateUrl: "templates/test.html", 12. controller:'TestCtrl' 13. } 14. } 15. }); 16. $urlRouterProvider.otherwise("/test"); 18. }); STATE IONIC-NAV-VIEWが２つ 以上の時(NAMEを振ってる時) - ionic-nav-view のnameを指定 する - <ionic-nav-view name=“hoge”> </ionic-nav- view> - <ionic-nav-view name=“fuga”>< /ionic-nav- view> ①名前 ②url ③templateUrl ④Controller ③templateUrl ④Controller
- 21.
- 22. UIの基本４つの使い方 1. タブ 2. ナビゲーション 3.モーダル 4. サイドメニュー
- 23.
- 24. 1. タブ ∼基本構造∼ <ion-tabs> <ion-tabtitle="タブに表示される文字" icon- off="非選択時のアイコン" icon-on="選択時のアイコ ン" ui-sref="選択時のステータス指定"> <ion-nav-view name="コントローラのス テータスで指定したviewsの名前"></ion-nav-view> </ion-tab> </ion-tabs>
- 25. 1. タブ ∼実践∼ <ion-tabsclass="tabs-icon-top tabs-color-active- positive"> <ion-tab title="first" icon-off="ion-chatbox-working" icon-on="ion-chatbox-working" ui-sref="tab.first"> <ion-nav-view name="first"></ion-nav-view> </ion-tab> <ion-tab title="second" icon-off="ion-chatboxes" icon- on="ion-chatboxes" ui-sref="tab.second"> <ion-nav-view name="second"></ion-nav-view> </ion-tab> <ion-tab title="third" icon-off="ion-chatbox" icon- on="ion-chatbox" ui-sref="tab.third"> <ion-nav-view name="third"></ion-nav-view> </ion-tab> </ion-tabs>
- 26.
- 27.
- 28. 2. ナビゲーション ∼実践∼ angular.module('app', ['ionic','app.controllers']) .config(function($stateProvider,$urlRouterProvider) { $stateProvider .state('tab.third',{ 'url':'/third', views: { 'third': { templateUrl: "templates/tabs-third.html", controller:'ThirdCtrl' } } }) .state('tab.third-detail1',{ 'url':'/third/detail1', views: { 'third': { templateUrl: "templates/tabs-third- detail1.html", controller:'ThirdDetail1Ctrl' } } }) app.js <ion-tab title="third" icon-off="ion- chatbox" icon-on="ion-chatbox" ui- sref="tab.third"> <ion-nav-view name="third"></ion- nav-view> </ion-tab> …view やcontentを用意しStateを変更していく。URLの 階層が深くなるとナビゲートしてバックボタンが表示される。 tabs.html href="#/tab/third/detail1" もしくは、 ui-sref=“tab.third-detail1” tabs-third.html tabs-third-detail1.html
- 29.
- 30. 3. モーダル ∼実践∼ ．．． .controller('FirstCtrl',['$scope','$ionicModal',function($scope, $ionicModal){ $ionicModal.fromTemplateUrl('templates/modal.html',{ scope: $scope, animation:'slide-in-up' }).then(function(modal){ $scope.myModal= modal; }); controllers.js hoge.html myModal.html どこかで ng-click=“myModal.show()” もちろんController内で関数を定義して それを呼び出してもOK！ どこかで ng-click=“myModal.hide()” 読込
- 31. 4. サイドメニュー ・ボタン押すor横スワイプで 出てくるメニュー ・左 or右 or 両方でも設置可 ・カテゴリを変えたりするの に使える！
- 32. 4. サイドメニュー ・ion-side-menusで囲う ・ion-side-menu-contentとion- side-menu-contentが一つずつ必要 ・ion-nav-buttonsでトグルボタン を設置 ・buttonにmenu-toggleでおした時 の動作を指定できる。 ・Defaultでは、rootページ以外で はトグルボタンが無くなり、swipe も出来なくなる <ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="bar- stable"> <ion-nav-buttonsside="left"> <button menu-toggle="left" class="button button-icon button- clear ion-navicon"> </button> </ion-nav-buttons> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar>test</ion- header-bar> <ion-content>test</ion-content> </ion-side-menu> </ion-side-menus> index.htmlコンテンツ部分 サイドメニュー部分
- 33. LAST BUT NOTLEAST… ・IONIC CREATOR ある程度までのビジュアル部分だけ、ドラッグアン ドドロップで直感的に作れるWEBサービス ・IONICONS デフォルトで使えるアイコン集