Front-End/AngularJS (4) 썸네일형 리스트형 [Docs번역-Tutorial]#3.Master.Detail(리스트만들기) 이번에는 영웅들의 리스트를 보여주고, 사용자가 영웅을 선택하여 상세내역을 확인할 수 있도록 만들어 볼 것입니다. 코드는 다음과 같습니다. ( https://embed.plnkr.co/?show=preview ) 파일 디렉토리angular-tour-of-heroessrcappapp.component.tsapp.module.tsmain.tsindex.htmlstyles.csssystemjs.config.jstsconfig.jsonnode_modules ...package.json heroes 보여주기프로젝트를 만들기 영웅들의 리스트를 보여주기 위해서는 view template를 추가하자. Mock data로 사용할 10개의 heroes를 만들자.src/app/app.component.ts (hero arra.. [Docs번역-Tutorial]#2.The Hero Editor(양방향 바인딩) 개발 환경 로컬에 구성하기 angular-tour-of-heroes 프로젝트를 만들기 위해 해당 링크(https://angular.io/guide/setup)를 따라하자. angular-tour-of-heroessrcappapp.component.tsapp.module.tsmain.tsindex.htmlstyles.csssystemjs.config.jstsconfig.jsonnode_modules ...package.json 우리가 이 모든것을 완성하고 나면 다음과 같은 화면(https://embed.plnkr.co/?show=preview)을 볼 수 있다. 앱을 compile하고 실행하자.터미널에 다음과 같은 명령어를 입력하자. npm start 이 커맨드는 TypeScript 컴파일러가 "watch .. [Docs번역-Tutorial]#1.Introduction 이 튜토리얼에서는 영웅들의 인력관리를 위한 앱을 만들 것이다. 이 앱은 Angular의 핵심 기반들을 다룰 것이다. 우리는 data-driven app에 기대하는 다양한 특징들을 가진 앱을 만들것이다. ( 영웅들의 리스트를 얻고 보여주며, 선택된 영웅들의 세부내역을 편집하고, 영웅들의 데이터를 다양한 관점에서 보여줄 수 있는 ) 우리는 영웅들의 데이터를 보여주고, element들을 보여주고 숨기기 위해 build-in directive(지시자)를 사용할 것이다. 우리는 영웅들의 상세 내용과 영웅들을 배열로 보여주기 위해 component 들을 만들 것이다. 우리는 read-only 데이터를 위해 one-way data binding을 사용할 것이다. 우리는 편집가능한 필드를 위해 2-way databin.. 데이터 바인딩이란? 1. 데이터 바인딩이란? - 데이터 바인딩은 왜 필요한가? 어플리케이션에서 '화면에 있는 객체'와 '데이터'를 일치시키는 일은 중요하다. ( 개발 경험이 없을 때는 이게 당연한 줄 알았다. 데이터를 보여주는건 당연하니까 ) 일반 어플리케이션 ( ex: SWT,jFace 이용 ) 에서는 바인딩이 자연스러운데 웹에서는 왜 이래? 웹 출발 시점에는 사용자와의 양방향 상호작용을 가정한 것이 아님 이 작업을 도와주는 것이 데이터 바인딩 2. 기본 웹 기술의 데이터 바인딩 - framework 없이 데이터 바인딩 해보기 해야 할 일 사용자가 입력한 정보를 얻어옴 찾아온 데이터를 갱신 위의 일을 위해서 DOM API나 jQuery를 사용함 예제) input 태그 안의 keyup 이벤트가 발생할 때 마다, 해당 inp.. 이전 1 다음
