회사에서 간단한 웹 사이트를 만들일이 있을 듯 싶다.새로운 기능으로 만들어 보고 싶은 맘에 JHipster 라는 것을 발견했다.(YEOMAN + MAVEN + SPRING + ANGULARJS IN ONE HANDY GENERATOR) https://jhipster.github.io/https://github.com/jhipster/jhipster-sample-app Goal완벽하고 모던 웹앱을 만드는 것이 목표랍니다. Sample & Source : https://github.com/jhipster/jhipster-sample-app한번 해보고 나서, 스타를 줄지 말지 고민해보도록 하겠습니다. ㅎ 간단하게 생성한 어플리케이션을 체크 아웃 해보시길 바랍니다. 링크는 위에. Release note Rele..

https://thinkster.io/mean-stack-tutorial/ 전체적인 번역도 해보면서, 샘플을 직접 하드코딩해 가면서, 테스트까지 완료해봤다.MEAN stack에 대한 전체적인 개념 정리를 속성으로 할수 있는 튜토리얼이였다. 번역을 한것을 넣을까 하다가...실제 해당 사이트에 가서 보는 것이 보다 낫다고 판단했다.내가 번역한것은 역시 나만 나중에 추억으로 간직하고자... Evernote에 넣어 두었고,혹시 전체적인 sample을 받아 보고자 하는 분들은 github에 넣어 두었으니.. 이건 참고로 보시면 될듯.. https://github.com/kimseunghyun76/meanstack_test.git 이걸 토대로 무엇을 추가적으로 만들어 볼지에 대해서 고민을 해야 겠네요...

이번 장에서는 , 폰 상세 페이지에 클릭 가능한 폰 이미지 스와퍼를 추가 하도록 하겠습니다. - 폰 상세 페이지는 현재 폰의 큰 이미지 하나 와 좀 더 작은 썸네일 이미지들을 보여줍니다. 단지 요구한 썸네일 이미지에 클릭을 함에 따라 어느 썸네일이든 큰 이미지로 대신 할수 있었다면, 그건 정말 대단한 일이지도 모르겠습니다.암튼 Angular를 가지고 이것을 어떻게 하는지에 해서 보도록 합시다. Controllerapp/js/controllers.js : PhoneDetailCtrl 컨트롤러에서는, mainImageUrl 모델 속성과 첫 번째 폰 이미지 URL의 기본 값 설정을 생성했습니다. mainImageUrl의 값을 변경 할 setImage 이벤트 핸들러 함수를 생성했습니다. Templateapp/p..

이번 장에서는 여러분 자신의 커스텀 디스플레이 필터를 어떻게 만드는지를 배울 것입니다.-이전 장에서는, 세부 페이지가 정확한 폰 기능들이 표현되던지 그렇지 않은지를 나타내는 한쪽의 true 또는 false이 보여졌습니다. True를 위해 ✓ 그리고 false을 위해 ✘ Glyphs 안에 그 텍스트 문자열들을 컨버트 하기 위해 일반 필터를 사용했습니다. 필터 코드는 무엇과 같은지 보도록 합시다. Custom Filter새로운 필터를 만들기 위해서, phonecatFilter 모듈을 만들 것이고, 이 모듈과 함께 여러분의 커스텀 필터를 등록할 것입니다.app/js/filters.js 우리 필터 이름은 “checkmark” 입니다. input 은 true인지 false인지를 평가하고 우리가 true 또는 fa..

이번 단계에서는 사용자가 폰 리스트 안에 폰을 클릭할 때 보여지는 폰 상세 뷰를 구현하겠습니다.-폰 리스트에 폰을 클릭할 때, 폰 상세 정보와 함께 폰 상세 페이지 는 보여질 것 입니다. Dataphones.json에 더해서, app/phones 디렉토리는 또한 각각의 폰에 대해 한 개의 json 파일을 포함합니다.app/phones/nexus-s.json : (sample snippet)각각의 이 파일들은 다양한 폰의 속성들을 같은 데이터 구조를 사용하여 묘사합니다. 폰 상세 뷰에서 이 데이터를 보여줄 겁니다. Controller $http 서비스를 사용해서 json 파일을 가지오기 위해 phoneDetailCtrl를 확장 할것입니다. app/js/controllers.jsHTTP 요청을 위한 URL을..

이번 장에서는 레이아웃 템플릿을 만드는 방법과 ngRoute 이라 불리는 Angular 모듈을 이용해서 라우팅을 추가해서 다중 뷰를 가지고 있는 어플리케이션을 만드는 방법에 대해서 배워보겠습니다.-app/index.html 에 이동 할 때, app/index.html#/phones로 리다이렉트되어지고, 브라우저에서 폰 리스트를 나타냅니다.-폰 링크를 클릭할 때, URL은 폰과 폰 디테일 페이지의 일부분이 보여지는 곳으로 변경됩니다. Dependencies이번 단계에서 추가된 라우팅 상관 관계는 코어 Angular 프레임워크로부터 세분화되어 분산되어진 ngRoute 모듈에서 angular에 의해 제공되어 집니다. 클라이언트 사이드 의존성들을 설치하기 위해 Bower를 사용하고 있습니다. 이번 단계에서 새로..