index.html
- "js/mine.js", "ng-app=ionicApp" 그리고 body 안에 있는 html 태그를 제외하고는 모두 ionic 프로젝트 생성 시 기본으로 생성되는 내용입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <html ng-app= "ionicApp" > <head> <meta charset= "utf-8" > <meta name= "viewport" content= "initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" > <title></title> <link href= "lib/ionic/css/ionic.css" rel= "stylesheet" > <!-- <link href= "lib/ionic/css/ionicons.css" rel= "stylesheet" > --> <link href= "css/style.css" rel= "stylesheet" > <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href= "css/ionic.app.css" rel= "stylesheet" > --> <!-- ionic/angularjs js --> <script src= "lib/ionic/js/ionic.bundle.js" ></script> <!-- cordova script (this will be a 404 during development) --> <script src= "cordova.js" ></script> <!-- your app's js --> <script src= "js/mine.js" ></script> </head> <body> <ion-tabs class = "tabs-icon-bottom tabs-icon-only" > <ion-tab ng-controller= "friends" title= "친구" icon-on= "ion-person" icon-off= "ion-person" > <ion-header-bar class = "bar-dark" > <a class = "button button-clear button-white" ng-click= "toggleEdit()" >{{data.status}}</a> <h1 class = "title" >친구</h1> <a class = "button button-clear button-white" > <i class = "icon ion-person-add" ></i> </a> </ion-header-bar> <ion-content> <ion-list show- delete = "data.showDelete" > <ion-item ng-repeat= "item in items" item= "item" > {{item.name}} <ion- delete -button class = "ion-minus-circled" ng-click= "onItemDelete(item)" ></ion- delete -button> </ion-item> </ion-list> </ion-content> </ion-tab> <ion-tab title= "채팅" icon-on= "ion-chatbubble" icon-off= "ion-chatbubble" > <!-- Tab 2 content --> </ion-tab> <ion-tab title= "채널" icon-on= "ion-ios-list" icon-off= "ion-ios-list" > <!-- Tab 3 content --> </ion-tab> <ion-tab title= "더보기" icon-on= "ion-more" icon-off= "ion-more" > <!-- Tab 4 content --> </ion-tab> </ion-tabs> </body> </html> |
js/mine.js
- Android 기기에서는 Tab의 위치가 기본으로 Top 으로 지정이 되고 iOS 에서는 Bottom 으로 지정이 되는 것을 항상 Bottom 으로 지정이 되도록 하였습니다.
- 그리고 친구 리스트를 편집/완료 할 수 있는 기능을 추가 하였습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | # js/mine.js angular.module( 'ionicApp' , [ 'ionic' ]) .config( function ($ionicConfigProvider) { // 모든 OS 에서 Tab의 위치를 Bottom 으로 지정 $ionicConfigProvider.tabs.position( "bottom" ); $ionicConfigProvider.tabs.style( "standard" ); }) .controller( 'friends' , function ($scope) { $scope.data = { status: '편집' , showDelete: false }; $scope.items = [ {name: '친구1' }, {name: '친구2' } ]; $scope.toggleEdit = function () { $scope.data.status = $scope.data.showDelete === false ? '완료' : '편집' ; $scope.data.showDelete = $scope.data.showDelete === false ? true : false ; }; $scope.onItemDelete = function (item) { $scope.items.splice($scope.items.indexOf(item), 1); }; }) ; |
결과
'하이브리드앱' 카테고리의 다른 글
Cordova(Phonegap) - ngCordova 설치하기 (0) | 2015.08.24 |
---|---|
Cordova(Phonegap) + Ionic Framework - '<a>' 태그로 전화걸기 기능 구현하기 (2) | 2015.08.24 |
Cordova(Phonegap) + Ionic Framework - "Access-Control-Allow-Origin" 문제점 해결방법 (CORS) (0) | 2015.08.14 |
Cordova(Phonegap) + Ionic Framework - 위치정보(Geolocation) 사용하기 (4) | 2015.08.11 |
하이브리드 앱 개발을 위한 Ionic 프레임워크 시작하기 (0) | 2015.08.09 |