AngularJS (4) 썸네일형 리스트형 AngularJS, HTML Rendering AngularJS가 DOM 트리를 먼저 구성합니다.Directive, Component들 중에 Custom Tag를 Brower Engine이 이해할 수 있는 HTML Element로 변환합니다.이 때는 DOM을 조작할 수 있지만 아직 지시자와 컴포넌트 간에 연결이 되지 않은 상태이자 아직 Data가 반영되지 않은 상태이기 때문에 실제 View라고 볼 수 없습니다. 그저 DOM 덩어리들이라고 보면 됩니다.자신의 컴포넌트 혹은 지시자의 scope를 생성하고 Data와 Element를 링크하여 View를 만듭니다.자식 요소들까지 링크가 됩니다.초기 DOM Parsing → Directive, Component 찾기→ HTML 변환 → Controller Scope 초기화 → Data Binding → Vie.. AngularJS, Application Structure ModuleAngularJS 애플리케이션의 기본 구성 단위로, 여러 구성 요소를 그룹화합니다.Service, Factory, ProviderData와 Business Logic을 담고 있는 그릇Controller에 주입해서 넣을 수 있음DirectiveReact의 JSX Component와 같이 요소로 사용 가능restrict를 통해 요소, 속성, 클래스로 사용가능주의점은 JS에서는 CamelCase Ex) yeChanSong html에서 태그로 사용될 경우 kebabCase Ex)ye-chan-songDOM 조작 혹은 복잡한 동작에 적합ComponentAngular 1.5버전 부터 나온 컴포넌트 React 컴포넌트와 유사한 부분이 많다.재사용성 UI와 단방향 바인드로 구성이 쉽고 사용하기 간결하다.주의.. AngularJS, Directory Structure 어플리케이션의 규모가 커지다보면 파일관리가 복잡해지며 이러한 경우는 곧 디버깅의 어려움으로 직결되어지기 마련입니다 코드는 간결하고 의존을 줄여 독립성을 높이고 재사용성을 높일 수록 효과적입니다. 한 가지 기능만을 넣는 것을 추천하는데요 Angular는 이러한 모듈별로 디렉토리를 구성하는 것을 좋아합니다.app/ phone-list/ phone-list.module.js phone-list.component.js phone-list.component.spec.js app.module.js다음과 같이 phone-list 라는 모듈을 만들기 위해 해당 디렉토리를 만들고 그 안에 모듈과 관련된모듈 파일컴포넌트 파일테스트 파일 등을 넣는 것을 확인할 수 있습니다angular.module('ph.. AngularJS, Install & Tutorial 0. 공식 문서 & Node, git installhttps://docs.angularjs.org/api AngularJSLoading … There was an error loading this resource. Please try again later.docs.angularjs.org https://nodejs.org/en/download/package-manager/current Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orghttps://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-.. 이전 1 다음
