Angular로 간단한 게임 만들어보기 - 3 (Angular 시작하기) <ng-route>

안녕하세요 엄티입니다.

오늘은 폭풍 포스팅이네요

아무래도 저번과 이어지다 보니 어쩔 수 없나봐요.

일단 저번 포스팅에서 말했던 것 처럼 ng-route에 대해서 알아 볼껀데요

말 그대로 routing을 해주는 거에요.

url주소를 보고 그 주소에 맞게 routing을 해주는 뭐 그런 개념이죠

그럼 본론으로 들어가보죠.

 

https://github.com/angular/bower-angular-route

angular/bower-angular-route

여기에 들어가서 다운을 받습니다. 저는 개인적으로 bower를 이용했는데요.

 

/**

bower가 없으신 분은 '$ npm install -g bower ' 이렇게 간단한 명령어를 터미널 창에 치셔서 다운받으시면 되요. (참고로 맥 기준입니다)

궁금 하신 분은 https://blog.weirdx.io/post/9016 여기 참조해주세요~

bower 설치 및 사용하기, bower-installer - 이상한모임

**/

 

무튼 bower를 통해 받으면 bower_components에 angular, angular-route폴더가 두개가 생기는데요 기존에 lib에 있던 angular를 사용하려 했더니 아무래도 버전 dependency가 있는것 같아서 급하게 1.6.8로 바꿔야 겠네요 하하하

 그다음 index.html 파일을 바꾸어 주면 되요.

 

빨간 박스 부분을 주목 해 주세요.

 

이렇게 bower_components폴더가 생기고 그 안에 있는 angular.js, angular-route.js파일을 각각 index파일에 넣어 줍니다.

 

그다음 app.js 입니다.

 

먼저  .module 안에 'ngRoute'를 써야 하는데 우리는 angular-route.js를 불러왔으니 ngRoute라는 이름을 쓸 수 있어요.

글고 '$routeProvider'를 통하여 url부분에서 각각 controller, templateUrl을 불러올 수 있죠.

그럼 index.html를 열게 되면 'eomttblog'라는 이름을 통하여 app.js가 실행이 되고 

그다음 run 함수 config함수가 실행이 되는데 

index.html를 눌러서 보면 

"Cross origin requests are only supported for protocol shemes: blabla"라는 오류가 뜨는근요.

 

다음과 같은 에러가 뜨네요 아무래도 폴더에서 html파일을 직접 열어서 경로가 file://이라서 그런것 같네요 ㅜㅜ

즉, 웹서버가 필요하다 ㅜㅜ

 

그래서 몇번에 검색 결과 !!!!!!!!!!!!!

https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local

"Cross origin requests are only supported for HTTP." error when loading a local file

 

그중에 맘에드는게 하나있어서 가져와 봅니다.

 

크롬 앱스토어에가서 웹서버를 돌릴 수 있는 앱이 있네요

*** 크롬창에서 열어야 되요!!!!!!!!

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related?hl=en

Web Server for Chrome

 

크롬앱스토어를 통하여 설치 한 후 

 

 

열면 다음과 같이 CHOOSE FOLDER가 있습니다 .

우리 코드가 들어있는 폴더를 선택!

그다음 Web Server URL(s) 밑에 있는 주소를 클릭하면!

 

main.html이 보이게 되고 main.controller가 동작하는 모습을 보실 수 있어요!!!!

 

<결과>

<주소를 입력했을 때 모습>

 

<로그 모습>

 

 

<main.controller.js와 main.html> 코드

 

 

다음번에는 스타일에 대해 알아보도록 할께요 그럼 이만 빠염.

틀린점이나 수정될 사항 또는 모르는 점이 있으시면 댓글 남겨주세요~~~~