# IONIC2

[[ionic hide-nav-bar]]


## 설치

`nodejs`가 설치된 상태에서 시작합니다. 4.x 버전으로 설치합니다. 

```sh
npm install -g cordova ionic@beta
```
ionic2 를 사용하기 위해서 `ionic@beta` 로 설치 합니다. 

## 시작
```sh
ionic start sitemoa sidemenu --v2
```

## Plugin

### admobpro
```sh
ionic plugin add cordova-plugin-admobpro
```

### inappbrowser
```sh
ionic plugin add cordova-plugin-inappbrowser
```

### whitelist
```sh
ionic plugin add cordova-plugin-whitelist
```

[Ionic 2 | Making REST HTTP Requests Like a Pro](http://www.gajotres.net/ionic-2-making-rest-http-requests-like-a-pro/)

index.html에 메타 정보를 추가한다.
```html
<meta http-equiv="Content-Security-Policy" content="img-src * data:; default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
```

`img-src * data:;` 를 추가함. [출처](http://stackoverflow.com/questions/32166870/img-src-was-not-explicitly-set-so-default-src-is-used-as-a-fallback)



## 서버 시작
```sh
ionic serve
```

## 빌드
```sh
ionic build android
```

플랫폼이 추가 되어 있지 않은 경우, 플랫폼 추가 질문이 나옵니다. 아래 명령어를 통해 설치도 가능합니다. 
```sh
ionic platform add android
```

`ios` 의 경우 `android` 자리에 대신 적으면 됩니다. 



### 참고
- https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0.1&foreColor=fff%2C0&crop=0&backgroundShape=square&backColor=bde2f6%2C100&effects=score





```js
declare var jsSHA: any;
 
@Component({
    selector: "my-app",
    templateUrl: "app/app.html",
    directives: []
})
 
class App {}
```

중요한 것은 declare var 를 @Component 위에 선언하는 것이었다. 




- [Using Firebase 3 in Angular 2 and Ionic 2](https://webcake.co/using-firebase-3-in-angular-2-and-ionic-2/)
- [Loading external javascript files in ionic2](https://forum.ionicframework.com/t/loading-external-javascript-files-in-ionic2/51161)





```
TypeScript error: C:/3.Dev/ionic/food-map/app/providers/firebase/firebase.ts(15,
26): Error TS2345: Argument of type 'string' is not assignable to parameter of t
ype 'Http'.
```

---
ionic2 기본 샘플이 typescript 로 변경되었다. 

새로운 프로젝트 생성.

![](https://goo.gl/bvcnsA)
진행이 안된다.... 네트워크 문제를 의심하고, 올가(프록시 프로그램)를 실행한다.

- [Integrating Firebase with AngularFire2 into AngularJS & Ionic2](http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angularjs-ionic2)

---
http://ngcordova.com/docs/plugins/inAppBrowser/


설정화면, 메뉴가 많이 있다면 초기 화면을 선택하는 설정 필요.
현재는 국내구매, 해외구매 두개이므로, 탭으로 변경할까 고민함. 
탭을 하면 화면 두줄을 차지하기 때문에, 사이드 메뉴로 유지함.


### Application Error 발생
![](https://goo.gl/79XBeC)

[이곳](http://stackoverflow.com/questions/12319809/application-error-the-connection-to-the-server-was-unsuccessful-file-andr)을 보고 해결시도.

`config.xml`파일에 `<preference name="loadUrlTimeoutValue" value="700000" />` 를 추가한다.



- [Ionic 2: How to Create a Sliding Delete Button for Lists](http://www.joshmorony.com/ionic-2-how-to-create-a-sliding-delete-button-for-lists/)

`<ion-item-sliding>` 태그 안에 `<ion-item-option>` 태그를 넣는다.

## 안드로이드6 버전에서 하얀색 화면으로 멈춘다.

[White Screen of Death Ionic 2 - Andorid 6](https://forum.ionicframework.com/t/white-screen-of-death-ionic-2-andorid-6/49868/20?u=vukasin)

```
Hi,
I solved with
cd ionic project folder
ionic platform add android
ionic plugin add cordova-plugin-crosswalk-webview

Android version: 4.1.2
```