일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 스칼라
- 이더리움
- 파이썬 동시성
- CORDA
- 주키퍼
- play 강좌
- 스칼라 동시성
- Golang
- hyperledger fabric
- 블록체인
- 파이썬 머신러닝
- Akka
- 스위프트
- 그라파나
- 파이썬
- 하이퍼레저 패브릭
- 스칼라 강좌
- Play2 로 웹 개발
- 파이썬 데이터분석
- 하이브리드앱
- Hyperledger fabric gossip protocol
- Adapter 패턴
- 플레이프레임워크
- 안드로이드 웹뷰
- play2 강좌
- Play2
- Actor
- 파이썬 강좌
- 엔터프라이즈 블록체인
- akka 강좌
- Today
- Total
HAMA 블로그
IoT 를 위한 하이브리드앱 개발 (3) - IONIC 프로젝트 살펴보기 본문
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>
'하이브리드앱' 카테고리의 다른 글
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 |