JS&FRONT(29)
-
Node.js 다시한번 공부 해보자....랑 잡소리
우선 npm을 설치 하고 node.js를 설치 해야 합니다.npm은 지난번 Angular.js 에 대한 튜토리얼을 진행하면서, 설치가 되어 있어서 별도로 설치를 하지 않고 진행 하였으며, Node.js 또한 설치가 되어 있어서 .. .그냥 이 부분에 대한 것은 패스 했다.자 본론으로 서버... http://pyrasis.com/nodejs/nodejs-HOWTO 에 있는 것을 차근차근 따라 합니다.저작권으로 인해 링크만 걸수 있어서 링크만 걸어 놓았다. 요약도 안된다 ㅎㅎㅎ정말 잘 설명 되었으니, 별 추가적인 설명도 필요가 없다.#20150612 추가Node.js Socket.io 를 사용해서 서버로 사용하는 것.. 이것과 기존 Tomcat,resin 등의 웹서버와 Spring 단을 사용하는 것에 대한 ..
2015.06.11 -
PhoneCat Tutorial App 10- Event Handlers
이번 장에서는 , 폰 상세 페이지에 클릭 가능한 폰 이미지 스와퍼를 추가 하도록 하겠습니다. - 폰 상세 페이지는 현재 폰의 큰 이미지 하나 와 좀 더 작은 썸네일 이미지들을 보여줍니다. 단지 요구한 썸네일 이미지에 클릭을 함에 따라 어느 썸네일이든 큰 이미지로 대신 할수 있었다면, 그건 정말 대단한 일이지도 모르겠습니다.암튼 Angular를 가지고 이것을 어떻게 하는지에 해서 보도록 합시다. Controllerapp/js/controllers.js : PhoneDetailCtrl 컨트롤러에서는, mainImageUrl 모델 속성과 첫 번째 폰 이미지 URL의 기본 값 설정을 생성했습니다. mainImageUrl의 값을 변경 할 setImage 이벤트 핸들러 함수를 생성했습니다. Templateapp/p..
2014.10.01 -
PhoneCat Tutorial App 9- Filters
이번 장에서는 여러분 자신의 커스텀 디스플레이 필터를 어떻게 만드는지를 배울 것입니다.-이전 장에서는, 세부 페이지가 정확한 폰 기능들이 표현되던지 그렇지 않은지를 나타내는 한쪽의 true 또는 false이 보여졌습니다. True를 위해 ✓ 그리고 false을 위해 ✘ Glyphs 안에 그 텍스트 문자열들을 컨버트 하기 위해 일반 필터를 사용했습니다. 필터 코드는 무엇과 같은지 보도록 합시다. Custom Filter새로운 필터를 만들기 위해서, phonecatFilter 모듈을 만들 것이고, 이 모듈과 함께 여러분의 커스텀 필터를 등록할 것입니다.app/js/filters.js 우리 필터 이름은 “checkmark” 입니다. input 은 true인지 false인지를 평가하고 우리가 true 또는 fa..
2014.09.30 -
PhoneCat Tutorial App 8 - More Templating
이번 단계에서는 사용자가 폰 리스트 안에 폰을 클릭할 때 보여지는 폰 상세 뷰를 구현하겠습니다.-폰 리스트에 폰을 클릭할 때, 폰 상세 정보와 함께 폰 상세 페이지 는 보여질 것 입니다. Dataphones.json에 더해서, app/phones 디렉토리는 또한 각각의 폰에 대해 한 개의 json 파일을 포함합니다.app/phones/nexus-s.json : (sample snippet)각각의 이 파일들은 다양한 폰의 속성들을 같은 데이터 구조를 사용하여 묘사합니다. 폰 상세 뷰에서 이 데이터를 보여줄 겁니다. Controller $http 서비스를 사용해서 json 파일을 가지오기 위해 phoneDetailCtrl를 확장 할것입니다. app/js/controllers.jsHTTP 요청을 위한 URL을..
2014.09.30 -
PhoneCat Tutorial App 7 - Routing & Multiple views
이번 장에서는 레이아웃 템플릿을 만드는 방법과 ngRoute 이라 불리는 Angular 모듈을 이용해서 라우팅을 추가해서 다중 뷰를 가지고 있는 어플리케이션을 만드는 방법에 대해서 배워보겠습니다.-app/index.html 에 이동 할 때, app/index.html#/phones로 리다이렉트되어지고, 브라우저에서 폰 리스트를 나타냅니다.-폰 링크를 클릭할 때, URL은 폰과 폰 디테일 페이지의 일부분이 보여지는 곳으로 변경됩니다. Dependencies이번 단계에서 추가된 라우팅 상관 관계는 코어 Angular 프레임워크로부터 세분화되어 분산되어진 ngRoute 모듈에서 angular에 의해 제공되어 집니다. 클라이언트 사이드 의존성들을 설치하기 위해 Bower를 사용하고 있습니다. 이번 단계에서 새로..
2014.09.30 -
PhoneCat Tutorial App 7 - Templating Links & Images
이번 장에서는 폰 리스트안에 폰 썸네일을 추가 할 것입니다. 그리고 어딘지는 모를 알수 없는 곳으로 갈 링크를 붙이게 됩니다. 그 다음엔, 추가적인 정보인 카탈로그안에 폰에 관해서 보여주는 링크들을 사용 할 것입니다. 지금 리스트 안에 폰 이미지와 링크가 있습니다. 가장 중요한 변경사항들을 아래 리스트되어 있습니다. 전체 다른점을 깃허브에서 볼 수 있습니다. Dataphones.json 파일은 유니크한 ID 와 이미지 URL 각각의 폰에 대한 포함하고 있다는 것을 주목하세요. URL은 app/img/phones/ 디렉토리을 가리키고 있습니다. app/phones/phones.json (sample snippet): Templateapp/index.html 향후에 폰 디테일 페이지로 이어지는 링크를 다이나..
2014.09.30