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

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
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

Tags more

Archives

Today

Total

관리 메뉴

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>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</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">

<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>

<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>

<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="item item-divider">Recent Updates</div>

<div>

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

</div>

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

<div>

You ate an apple today!

</div>

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

<div>

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

</div>

</ion-content>

</ion-view>

저작자표시 비영리 변경금지

'하이브리드앱' 카테고리의 다른 글

IoT 를 위한 하이브리드앱 개발 (5) - 고급 로그인 시스템 (1)	2015.06.01
IoT 를 위한 하이브리드앱 개발 (4) - 로그인 시스템 만들기 (0)	2015.05.28
IoT 를 위한 하이브리드앱 개발 (2) - IONIC 프레임워크 시작하기 (0)	2015.05.27
IoT 를 위한 하이브리드앱 개발 (1) - 소개 (0)	2015.05.27
하이브리드앱개발에 필요한 기술들 정리 (0)	2015.05.19

'하이브리드앱' Related Articles

Comments

HAMA 블로그

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

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

'하이브리드앱' 카테고리의 다른 글

티스토리툴바