AngularJS 사용한 프레임 워크 ionic의 환경은 Yeoman + generator-ionic을 사용하여 생성되었습니다. 환경은 우분투입니다.

준비

사전 준비로 nodejs 등은 설치되었습니다.

사전 준비

npm install -g yo grunt-cli generator-angular

아마 위의 모듈을 설치했을 것입니다.

generator-ionic 설치

npm install -g generator-ionic

ionic 파일 생성

yo 명령으로 ionic 파일을 생성합니다.

ionic 파일 생성

mkdir ionic
cd ionic
yo ionic

yo 명령을 실행하면 생성하기 전에 몇 가지 질문을 받지만 cordova는 앱용이므로 이번에는 space를 눌러 제거합니다.

위와 같은 화면이 표시됩니다.

초기 템플릿을 선택할 수 있으므로 Side Menu를 선택했습니다.

동작 확인

지금까지 grunt serve하고 서버가 시작되면 성공입니다.

그러나 나의 환경에서는 Multiple addresses의 선택 화면이 나왔습니다.

서버 시작

grunt serve

略

Multiple addresses available.

Please select which address to use by entering its number from the list below:

 1) 10.0.2.18 (eth0)
 2) 192.168.33.11 (eth1)
 3) localhost

Address Selection:  

왠지 여기에서 숫자를 선택할 수 없어 멈춰 버렸습니다＼(^o^)／

vagrant를 이용하고 있는 탓인지 생각하고, Mac에서도 환경을 만들어 보았습니다만, 마찬가지로 Multiple addresses가 표시되었습니다.

지금까지의 흐름에서 Yeoman의 yo ionic 명령으로 파일을 생성했을 때 .ionic 디렉토리가 사용자의 홈 디렉토리에 생성됩니다. .ionic 디렉토리에는 ionic.config라는 파일이 있으므로 ionicServeAddress를 지정합니다.

vi ~/.ionic/ionic.config
{
  "versionCheck": 1414045129210,
  "ionicServeAddress": "localhost"
}

versionCheck의 항목 만 있으므로 ionicServeAddress를 추가했습니다.

다시 grunt serve로 서버를 시작합니다.

서버 시작

grunt serve

略

Running "ionic:serve" (ionic) task

Running "watch" task
Waiting...Running dev server: http://localhost:8100

8100번으로 서버가 기동했으므로, 브라우저로부터 확인합니다.
덧붙여서 나의 vagrant 환경은 localhost에서는 액세스 할 수 없는 지정이 되어 있었습니다. vagrant가 192.168.33.11에서 시작되었으므로 IP http://192.168.33.11:8100/에 직접 액세스하여 확인했습니다.


Side Menu가 있는 ionic의 UI를 브라우저에서 확인할 수 있었습니다.
했어(☝ ՞ਊ ՞)

참고

htps : // 기주 b. 코 m / 에고 네트 / 게네라와 r 이오니 c
h tp : / / s t c ゔ rf ぉ w. 코 m / 쿠에 s 치온 s / 26328184 / 이오니 쿠 r ゔーーーーーーーーーーーー짱게아아d/26330536