Angular.js16 Angular js: Directive Directive Angular가 제공하는 디렉티브는 어트리뷰트 디렉티브(Attribute Directive)와 구조 디렉티브(Structural Directive)로 나뉜다. 디렉티브는 DOM의 모든 것을 직접 관리할 수 있다. HTML 요소 또는 어트리뷰트의 형태로 사용하여 디렉티브가 사용된 요소에게 무언가를 하라는 지시(directive)를 전달한다. 디렉티브는 프로젝트 전역에서 사용할 수 있는 공통 관심사를 컴포넌트에서 분리한 것으로 구현하여 컴포넌트의 복잡도를 낮추고 가독성을 향상시킨다. 어트리뷰트 디렉티브 NgClass: CSS 클래스 추가/제거 NgStyle: HTML 스타일 추가/제거 NgModel: HTML 폼 요소에 양방향 데이터 바인딩 추가 구조 디렉티브 NgIf: 조건에 따라 DOM.. 2023. 3. 31. Angular js 컴포넌트 구조 파악 app.component.ts를 예시로 Component 구조를 파악하고 나만의 논리로 정리 해놓겠음 //app.component. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'my-app'; } @(데코레이터)안 오브젝트 구조를 잘 보아야 함. selector: HTML 템플릿의 이름이며, 다른 템플릿에서 와 같이 html 이름으로 import 가능 templateUrl: 해당 컴포넌트의 HTML 템플릿과 매핑.. 2023. 3. 28. Angular js 구조, 구성 요소 생성 방법 Angular를 초기 제작하면 기본적으로 만들어지는 모듈과 컴포넌트가 있다. 모듈 app-routing.module.ts (이것은 프레임워크로 app 생성 시, y/n 문구가 나오는데 routing은 요즘 웹페이지에 기본 요소이므로 y를 누름) app.module.ts (전역으로 사용할 모듈을 모두 정의하는곳) 컴포넌트 app.component.html (SPA를 제공하는 키 페이지중 하나. Index.html에 로 선언 가능하며,(물론 이름 바꿀 수 있음) 이후 만들어지는 모든 컴포넌트들을 app.component.html에서 관리하여 보여줌) app.component.css or scss (큰 의미있는 파일은 아님. 매 컴포넌트를 생성할 때마다 css or scss 파일이 컴포넌트 폴더에 존재하는데,.. 2023. 3. 28. Angular js 장단점 및 개발 전 환경설정 회사를 들어오면서 Angular js를 이용하게 되었다. 입사 전 회사 기술에 대해 혼자 공부하게 되었는데 공부 내용을 끄적여 보겠음 Angular js 장점 컴파일 속도가 빠르다 MVC 패턴 개발이 가능하여 서버의 작업을 줄인다. 데이터 바인딩 기능으로 동적 웹 페이지를 손쉽게 구성한다 (옛말이고, React.js 나 Vue.js 보다 복잡하고 어려움..) UI 화면들을 재 사용할 수 있어 작업 생산성이 올라감 양방향 데이터 바인딩으로 유지보수 용이 프레임워크로 짜여진 틀이 있음 Angular cli 설치하기 npm install -g @angular/cli 개발 단계 들어가기 ng new my-app 클라이언트 서버 확인하기 cd my-app ng serve --open 이렇게 하면 angular 가.. 2023. 3. 27. 이전 1 2 3 다음