AngularJS13 Greeting Java Hipster 회사에서 간단한 웹 사이트를 만들일이 있을 듯 싶다.새로운 기능으로 만들어 보고 싶은 맘에 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.. 2015. 10. 16. Learn to Build Modern Web Apps with MEAN https://thinkster.io/mean-stack-tutorial/ 전체적인 번역도 해보면서, 샘플을 직접 하드코딩해 가면서, 테스트까지 완료해봤다.MEAN stack에 대한 전체적인 개념 정리를 속성으로 할수 있는 튜토리얼이였다. 번역을 한것을 넣을까 하다가...실제 해당 사이트에 가서 보는 것이 보다 낫다고 판단했다.내가 번역한것은 역시 나만 나중에 추억으로 간직하고자... Evernote에 넣어 두었고,혹시 전체적인 sample을 받아 보고자 하는 분들은 github에 넣어 두었으니.. 이건 참고로 보시면 될듯.. https://github.com/kimseunghyun76/meanstack_test.git 이걸 토대로 무엇을 추가적으로 만들어 볼지에 대해서 고민을 해야 겠네요... 2015. 7. 20. PhoneCat Tutorial App 10- Event Handlers 이번 장에서는 , 폰 상세 페이지에 클릭 가능한 폰 이미지 스와퍼를 추가 하도록 하겠습니다. - 폰 상세 페이지는 현재 폰의 큰 이미지 하나 와 좀 더 작은 썸네일 이미지들을 보여줍니다. 단지 요구한 썸네일 이미지에 클릭을 함에 따라 어느 썸네일이든 큰 이미지로 대신 할수 있었다면, 그건 정말 대단한 일이지도 모르겠습니다.암튼 Angular를 가지고 이것을 어떻게 하는지에 해서 보도록 합시다. Controllerapp/js/controllers.js : PhoneDetailCtrl 컨트롤러에서는, mainImageUrl 모델 속성과 첫 번째 폰 이미지 URL의 기본 값 설정을 생성했습니다. mainImageUrl의 값을 변경 할 setImage 이벤트 핸들러 함수를 생성했습니다. Templateapp/p.. 2014. 10. 1. PhoneCat Tutorial App 9- Filters 이번 장에서는 여러분 자신의 커스텀 디스플레이 필터를 어떻게 만드는지를 배울 것입니다.-이전 장에서는, 세부 페이지가 정확한 폰 기능들이 표현되던지 그렇지 않은지를 나타내는 한쪽의 true 또는 false이 보여졌습니다. True를 위해 ✓ 그리고 false을 위해 ✘ Glyphs 안에 그 텍스트 문자열들을 컨버트 하기 위해 일반 필터를 사용했습니다. 필터 코드는 무엇과 같은지 보도록 합시다. Custom Filter새로운 필터를 만들기 위해서, phonecatFilter 모듈을 만들 것이고, 이 모듈과 함께 여러분의 커스텀 필터를 등록할 것입니다.app/js/filters.js 우리 필터 이름은 “checkmark” 입니다. input 은 true인지 false인지를 평가하고 우리가 true 또는 fa.. 2014. 9. 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. 9. 30. PhoneCat Tutorial App 7 - Routing & Multiple views 이번 장에서는 레이아웃 템플릿을 만드는 방법과 ngRoute 이라 불리는 Angular 모듈을 이용해서 라우팅을 추가해서 다중 뷰를 가지고 있는 어플리케이션을 만드는 방법에 대해서 배워보겠습니다.-app/index.html 에 이동 할 때, app/index.html#/phones로 리다이렉트되어지고, 브라우저에서 폰 리스트를 나타냅니다.-폰 링크를 클릭할 때, URL은 폰과 폰 디테일 페이지의 일부분이 보여지는 곳으로 변경됩니다. Dependencies이번 단계에서 추가된 라우팅 상관 관계는 코어 Angular 프레임워크로부터 세분화되어 분산되어진 ngRoute 모듈에서 angular에 의해 제공되어 집니다. 클라이언트 사이드 의존성들을 설치하기 위해 Bower를 사용하고 있습니다. 이번 단계에서 새로.. 2014. 9. 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. 9. 30. PhoneCat Tutorial App 6 - XHRs & Dependency Injection (참고) XHR = XmlHttpRequest 의 약자입니다.... 무슨넘의 약자를 이리 많이 쓰노... 하드코딩 데이터 셋안의 세개의 폰들을 가지고 앱을 구성하는 것은 이젠 충분합니다. 자 이제 $http 를 가지고 서버로부터 좀 더 큰 데이터 셋을 가져오도록 합시다. Angular의 DI를 사용해서 PhoneListCtrl 컨트롤에서 서비스를 제공 할 것입니다.여기 서버로부터 로드 한 20개의 폰 목록이 있습니다. Data 여러분 프로젝트 안에 app/phones/phones.json 파일에는 JSON 포멧에 맞춰 저장된 좀 더 큰 폰 리스트를 포함하고 있는 데이터셋이 있습니다아래 샘플 파일을 보세요. Controller컨트롤러는 웹 서버에 있는 app/phones/phones.json 파일안에 데이.. 2014. 9. 25. PhoneCat Tutorial App 5 - Two-way Data Binding 이번 단계에서는, 여러분들은 phone 리스트상의 아이템 정렬을 여러분의 사용자 컨트롤상에 부여하는 기능을 추가하겠습니다. 다이나믹 한 정렬은 새로운 모델 프로퍼티를 만드는 것, repeater와 함께 감싸는 것, 그리고 작업의 나머지를 하는 데이터 바인딩 마술을 시키는 것에 의해 구현됩니다.-검색 박스 이외에, 어플리케이션은 phone이 목록화 된 것을 정렬하도록 사용자가 컨트롤 하는 것을 허가하는 dropdown 메뉴를 보여드립니다. 가장 중요한 변화는 아래 링크를 보고 참고하세요. https://github.com/angular/angular-phonecat/compare/step-3...step-4 Templateapp/index.html : index.html 템플릿에 아래 변경 사항들을 구현 .. 2014. 9. 23. PhoneCat Tutorial App 4 - Filtering Repeater 오늘 진행한 부분에 대해서도 크게 어려운 점은 없었지만, Filter의 효과를 어디에 접목시켜서 잘 쓸것인지 고민해야 겠다. 암튼 시작! 지난 시간에 어플리케이션을 위한 기반을 마련하는데 많은 일들을 했습니다. 그래서 지금부터는 간단한 무언가를 할 것 입니다; 전체 텍스트 검색을 추가할 것입니다. (예, 간단할 것입니다.) 또한 E2E (End-to-End 를 E2E라고 약자로 사용할겁니다.... 한글로 적당한 말이 생각이 안나요;;) 테스트를 작성할 것입니다. 왜냐하면 좋은 E2E 테스트는 좋은 친구이니까요. E2E는 여러분들의 어플리케이션에 머물러 있고, E2E에 집중하시고 빠르게 뒤돌아감을 발견하세요. -어플리케이션은 지금부터 검색박스를 갖습니다.페이지상에 Phone 목록은 사용자가 검색박스에 타이.. 2014. 9. 19. PhoneCat Tutorial App 3 - Static Template & Angular Template 1. Static TemplateAngular가 표준 HTML을 어떻게 증진시키는지에 대해 설명하기 위해서는, 여러분들은 순수한 정적 HTML 페이지를 만들고, 이 HTML 코드를 Angular가 어떠한 데이터 셋을 가지고도 같은 결과를 다이나믹하게 보여주는 탬플릿으로 어떻게 변경할 수 있는지에 대해 설명할 것입니다. 이번 단계에서 여러분들은 두 개의 셀룰러 폰에 대한 약간의 기본 정보를 HTML 페이지에 추가할 것입니다.-페이지는 현재 두개의 폰에 관한 정보를 가진 리스트를 포함하고 있다.첫번째 단계 체크아웃 : Git checkout –f step-1app/index.html Experiments 정적인 HTML에 아래 예제 내용을 추가해보세요. Total number of phone : 2 Summ.. 2014. 9. 17. PhoneCat Tutorial App 2 - Bootstrapping Bootstrapping * Bootstrap 이란? (네이버 백과사전 에서…)그 자체의 동작에 의해서 어떤 소정의 상태로 이행하도록 설정되어 있는 방법. 예를 들면, 최초의 수개의 명령에 의해서 그것에 계속해서 모든 명령을 입력 장치에서 계산기내에 패치 할 수 있도록 하는 방법. 즉 프로그램을 입력하는 방법의 하나이며, 최초에 명령을 읽어 들이기 위한 간단한 조작을 하면 계속해서 명령을 fetch하는 것을 순차로 하여 최종적으로 완전한 프로그램이 기억 장치 내에 수용 되도록 하는 방법을 말한다. 단, 루틴을 가리킬 때에는 부트스트랩 루틴 또는 부트스트랩 입력 루틴 등으로 부르며, 입력동작을 부트스트랩이라고 하는 경우가 많다. 또 그것 자체가 주기억장치에 로드 한다는 의미 이며, 셀프 로딩 혹은 셀프 로.. 2014. 9. 16. 이전 1 2 다음
