본문 바로가기

Angular

Angular> 검색 기능 2022. 1. 31. 개발 순서 1. Spring boot에서 검색 메소드 생성 2. 검색을 위한 컴포넌트 생성 3. 검색을 위한 Angular route 생성 4. route에 데이터를 보내기 위한 검색 컴포넌트 수정 5. Product service를 통해 product를 검색하는 ProductListComponent 수정 6. Spring Boot에 URL을 요청하는 Product service 수정 Angular에서는 Event를 Event binding으로 감지한다. 다른 프레임워크에서는 Event handling이라고 한다. Event 종류는 focus - 구성요소가 집중되었을 때 blur - 구성요소가 집중을 잃었을 때 keyup - 누른 키를 땔 때. keyup.enter keydown - 버튼을 눌렀을 때 d..
Angular> 카테고리로 상품 출력 2022. 1. 30. 순서 1. Spring boot 수정 - entity id 설정 2. Angular에서 Product Category class 생성 3. menu component 생성 4. prduct service로부터 데이터를 읽기 위해 menu component 수정 5. Spring boot 에 url 요청하기 위해 product service 업데이트 6. HTML에서 menu component 링크 수정 1. Spring boot 수정 - entity id 설정 Rest api에서 entity의 id가 보여지도록 설정하는 방법 MyDataRestConfig.java 2. ProductCategory 클래스 생성 3. 컴포넌트 생성 4. 컴포넌트는 서비스에서 ProductCategory 클래스 객체를 가져와..
Angular> 카테고리로 제품 검색 예시 2022. 1. 28. 간단개념 Router - 메인 라우팅 서비스. 유저 선택에 따라 적절한 route를 보여준다. Route - 컴포넌트와 URL 경로를 일치시킨다. RouterOutlet - placeholder 역할을 한다. route에 맞는 컴포넌트를 보여준다. RouterLink - 어플리케이션에서 url으로 routes를 연결시킨다. ActivatedRoute - 현재 컴포넌트를 열고 있는 route. route parameter에 접근하기에 유용하다. 더 자세한 건 홈페이지에서.. Angular - Common Routing Tasks Angular angular.io 순서 1. Routes 정의 2. Routes에 기반하여 Router 구성 3. Router outlet 정의 4. 카테고리 id param가 지..
Angular> Bootstrap 적용, 조건문, 서식 2022. 1. 16. 부트스트랩을 가져오기 이것을 index.html에 붙인다. Angular 조건문 서식
Angular> 기본 작동 방식 2022. 1. 15. 작동방식 실행되면 가장 보여지는 페이지 index.html app-root 태그가 있는데 ts 파일에서 selector에 있다. html에서 selector를 태그로 쓰면 url의 html이 보여진다. 컴포넌트와 테이블을 만들어 보자. 1. 새로운 프로젝트를 만들고 이동 ng new [프로젝트] : 프로젝트를 위한 앵귤러 스타터 파일들을 모두 만든다. cd [프로젝트] ng serve 프로젝트를 만들고 경로를 불러오고 경로에 가서 ng serve한다. 그런다음 localhost:4200으로 접속 2. update main template page src/app/app.component.html 파일 틀고 안에 있는 기본 내용은 싹 다 지운다. 3. generate new component ng gener..
Angular> Create Project 2022. 1. 13. Angular 용어 Component : Angular에서 핵심으로 두 가지로 나뉜다. 1. 유저 인터페이스를 위한 view 2. 어플리케이션 로직을 담는 class/ view를 위한 이벤트 핸들러 View Template : component를 위한 유저 인터페이스. 동적 요소가 있는 정적 HTML Directive : HTML 구성에 custom behavior를 넣는다. Service : 서버에서 데이터를 얻거나, 계산이나 유효성을 수행을 도와주는 클래스 Module : 관련된 component, directives, service 등등을 모아둔 모음집 http://cli.angular.io Angular angular.io CLI : Command Line Interface npm install ..

티스토리툴바