관리 메뉴

HAMA 블로그

IoT 를 위한 하이브리드앱 개발 (3) - IONIC 프로젝트 살펴보기 본문

하이브리드앱

IoT 를 위한 하이브리드앱 개발 (3) - IONIC 프로젝트 살펴보기

[하마] 이승현 (wowlsh93@gmail.com) 2015. 5. 28. 15:42

IONIC 프로젝트 살펴보기 


tabs 기반의 기본 프로젝트 ( $ ionic start myApp tabs ) 는 다음과 같다.  하나씩 살펴보자 


├── 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.


www
├── css            // css
├── img            // 이미지
├── js             // 컨트롤러 
├── lib            // 아이오닉 관련 라이브러리들 
├── templates      // 뷰       
└── index.html     


index.html

<!DOCTYPE html>

<html>

  <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="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 스크립트 (this will be a 404 during development) -->

    <script src="cordova.js"></script>


    <!-- 포함될 어플리케이션 js 들, 프런트엔드 MVC 패턴   -->

    <script src="js/app.js"></script>

    <script src="js/controllers.js"></script>

    <script src="js/services.js"></script>

  </head>

  <body ng-app="starter">  // AngularJS  ng-app 디렉티브 선언  'starter' 은 메인  모듈 이름이다.

    <!--

      The nav bar that will be updated as we navigate between views.

    -->

    <ion-nav-bar class="bar-stable">

      <ion-nav-back-button>

      </ion-nav-back-button>

    </ion-nav-bar>

    

   <!--

      아래 뷰 디렉티브에 /templates 폴더에 있는 html 파일들이 보여집니다 

    -->

    <ion-nav-view></ion-nav-view>

  </body>

</html>



app.js

// angular.module 은 생성, 등록 및 Angular 모듈들을 불러오기위한  전역공간이다. 

// 'starter' 는  angular 모듈 예제의 이름이다.  ( index.html 의 body  태그에 속성으로 세팅되있다.) 

// 두번째 파라미터는  'requires' (의존 객체들)  의 배열이다. 

// 'starter.services' 는 services.js 에 구현되어있다.

// 'starter.controllers' 는 controllers.js 에 구현되어있다.


angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {

    // 디폴트로 엑세서리 바를 숨긴다 (엑세서리 바를 보이고 싶으면 이것을 지우시오)

    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    }

    if (window.StatusBar) {

      // org.apache.cordova.statusbar required

      StatusBar.styleLightContent();

    }

  });

})


.config(function($stateProvider, $urlRouterProvider) {


  // 더 배우려면 여기로   https://github.com/angular-ui/ui-router

  // app 이 할수있는 다양한 상태를 셋업하라.

  // 각각의 상태들의 컨트롤러들은 controllers.js 파일에서 발견할수있다.

 $stateProvider


   // the tabs directive 를 위한 추상상태를 셋업하라.

    .state('tab', {

    url: "/tab",           // 경로 

    abstract: true,

    templateUrl: "templates/tabs.html"   // 연관 템플릿 뷰 

  })


  // 각각의 탭은 그것의 nav 히스토리 스택을 갖고있다.

  .state('tab.dash', {

    url: '/dash',

    views: {

      'tab-dash': {

        templateUrl: 'templates/tab-dash.html',   // 연관 템플릿 뷰 

        controller: 'DashCtrl'                            //  연관 컨트롤러 

      }

    }

  })


  .state('tab.chats', {

      url: '/chats',

      views: {

        'tab-chats': {

          templateUrl: 'templates/tab-chats.html',   // 연관 템플릿 뷰 

          controller: 'ChatsCtrl'                             //  연관 컨트롤러 

        }

      }

    })

    .state('tab.chat-detail', {

      url: '/chats/:chatId',

      views: {

        'tab-chats': {

          templateUrl: 'templates/chat-detail.html',   // 연관 템플릿 뷰 

          controller: 'ChatDetailCtrl'                       //  연관 컨트롤러 

        }

      }

    })


  .state('tab.account', {

    url: '/account',

    views: {

      'tab-account': {

        templateUrl: 'templates/tab-account.html',  // 연관 템플릿 뷰 

        controller: 'AccountCtrl'                            //  연관 컨트롤러 

      }

    }

  });


  // if none of the above states are matched, use this as the fallback

  $urlRouterProvider.otherwise('/tab/dash');


});


tabs.html

<!--

tabs-positive  을 사용하여 tabs 를 아이콘과 라벨을 가지고 만든다. 

각각의 탭의 자식인 <ion-nav-view> 디렉티브는 그 자신소유의 네비게이션 히스토리를 가질것이다. 

-->

<ion-tabs class="tabs-icon-top tabs-color-active-positive">


  <!-- Dashboard Tab -->

  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">

    <ion-nav-view name="tab-dash"></ion-nav-view>

  </ion-tab>


  <!-- Chats Tab -->

  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">

    <ion-nav-view name="tab-chats"></ion-nav-view>

  </ion-tab>


  <!-- Account Tab -->

  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">

    <ion-nav-view name="tab-account"></ion-nav-view>

  </ion-tab>



</ion-tabs>



tab-dash.html

<ion-view view-title="목록">

  <ion-content class="padding">

    <div class="list card">

      <div class="item item-divider">Recent Updates</div>

      <div class="item item-body">

        <div>

          There is a fire in <b>sector 3</b>

        </div>

      </div>

    </div>

    <div class="list card">

      <div class="item item-divider">Health</div>

      <div class="item item-body">

        <div>

          You ate an apple today!

        </div>

      </div>

    </div>

    <div class="list card">

      <div class="item item-divider">Upcoming</div>

      <div class="item item-body">

        <div>

          You have <b>29</b> meetings on your calendar tomorrow.

        </div>

      </div>

    </div>

  </ion-content>

</ion-view>



Comments