JS&FRONT/AngularJS(14)
-
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 -
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.09.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.09.23 -
PhoneCat Tutorial App 4 - Filtering Repeater
오늘 진행한 부분에 대해서도 크게 어려운 점은 없었지만, Filter의 효과를 어디에 접목시켜서 잘 쓸것인지 고민해야 겠다. 암튼 시작! 지난 시간에 어플리케이션을 위한 기반을 마련하는데 많은 일들을 했습니다. 그래서 지금부터는 간단한 무언가를 할 것 입니다; 전체 텍스트 검색을 추가할 것입니다. (예, 간단할 것입니다.) 또한 E2E (End-to-End 를 E2E라고 약자로 사용할겁니다.... 한글로 적당한 말이 생각이 안나요;;) 테스트를 작성할 것입니다. 왜냐하면 좋은 E2E 테스트는 좋은 친구이니까요. E2E는 여러분들의 어플리케이션에 머물러 있고, E2E에 집중하시고 빠르게 뒤돌아감을 발견하세요. -어플리케이션은 지금부터 검색박스를 갖습니다.페이지상에 Phone 목록은 사용자가 검색박스에 타이..
2014.09.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.09.17