본문 바로가기

Tech/Angular

(8)
[Angular] 의존성 주입을 위한 서비스 작성 서비스는 앵귤러에서 의존성 주입을 위해 사용되는 요소입니다. 컴포넌트에서 비즈니스 로직을 분리할 수 있지요. 서비스를 사용함으로써 컴포넌트에서 new를 통해 객체를 생성하지 않고 Injectable class에서 데이터를 얻어올 수 있습니다. Reference : https://angular.io/guide/dependency-injection Angular angular.io 의존성 주입(DI, Dependency Injection)이란 각 객체간의 결합을 느슨하게 만들어 프로그램이 의존성 역전(Dependency inversion)과 단일 책임 법칙(Single responsibility principle)을 따르게 설계하는 디자인 패턴을 의미합니다. 각 구성요소(혹은 객체)간의 관계를 해당 객체 내..
[Angular] 양방향 바인딩 (2-way binding) 지난번에 구성한 레이아웃에 이어 Departments 페이지에 대한 레이아웃도 비슷하게 구성하고 진행하겠습니다. 우선 departments.component.ts 파일에 Departments 리스트를 다음과 같이 import 해 줍니다. //departments.component.ts import { Component, OnInit } from '@angular/core'; import { Department } from './department'; import { DEPARTMENTS } from './departmentList'; @Component({ selector: 'app-departments', templateUrl: './departments.component.html', styleUrls..
[Angular] UI 작업, 라우팅 (routing-module) 지난번에 구성한 오른쪽 레이아웃에 몇 가지 기능을 더 추가하고 라우팅 모듈을 작성할 것입니다. 그 전에 department component를 추가하고 employees component에 몇 가지 속성을 더 추가하겠습니다. 터미널 상에서 다음 명령어를 입력합니다. ng generate component departments 그리고 해당 컴포넌트 내에 Department 클래스를 정의합니다. //department.ts export class Department { id: number; name: string; } 리스트를 작성합니다. //departmentList.ts import { Department } from './department'; export const DEPARTMENTS: Depart..
[Angular] 클릭 이벤트 핸들러, ngIf Reference : https://angular.io/tutorial/toh-pt2 Angular angular.io 일단 이전에 만든 페이지의 UI를 살짝 수정하고 계속 진행하겠습니다. 이는 페이지를 다음과 같이 구성하기 위함입니다 : employees.component.css 파일 내용을 다음과 같이 수정합니다. /* employees.component.css */ div.left { width: 50%; float: left; box-sizing: border-box; padding: 5px 5px 5px 5px; } div.right { width: 50%; float: right; box-sizing: border-box; padding: 5px 5px 5px 5px; } 다음으로 employ..
[Angular] 부트스트랩 적용하기 (ng-bootstrap 사용) 지난 글에서 생성한 employee list는 정말 못생겼습니다. 여기에 Bootstrap.css를 적용해 보겠습니다. Reference : https://ng-bootstrap.github.io/#/getting-started Angular powered Bootstrap Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, tabset, timepicker, tooltip, typeahead ng-bootstrap.github.io 일단 npm을 사용하여 bootstrap을 다운로드 해 줍니다. 터미널에 다음과 같이 입력해줍니다. n..
[Angular] 리스트 생성, ngFor 지난번 글에서 생성한 employee 클래스를 통하여 리스트를 만들고 이를 뷰 상에 전시해 보겠습니다. Reference : https://angular.io/tutorial/toh-pt1 Angular angular.io /src/app/employees 경로에 employeeList.ts 파일을 만들고 다음과 같이 작성해줍니다. //employeeList.ts import { Employee } from './employee'; export const EMPLOYEES: Employee[] = [ { id: 11, name: 'Sean'}, { id: 12, name: 'Andy'}, { id: 13, name: 'Cindy'}, { id: 14, name: 'Anne'}, { id: 15, name..
[Angular] 컴포넌트 생성 및 클래스 정의하기 지난 글에서 Angular 개발환경을 맥 상에 구축했습니다. 이번 글에서는 컴포넌트를 생성하고 클래스를 정의해 준 다음 이를 뷰에 띄워보겠습니다. Reference : https://angular.io/tutorial/toh-pt1 Angular angular.io 터미널 상에서 다음 명령어를 입력합니다. ng generate component employees 그리고 Employee 컴포넌트에서 보여주게 될 클래스를 src/app/employees 경로 상에 작성해줍니다. // employee.ts export class Employee { id: number; name: string; } 작성한 클래스를 employees.component.ts 내에서 import한 후, employee 하나를 임의로..
[Angular] Mac OS에서 Angular 설치 및 개발환경 구축 졸업학기 프로젝트를 하면서 이리저리 꼬아둔 맥을 연말을 맞이하여 3년만에 싹- 갈아엎었습니다. 깨끗해진 맥에다가 웹개발 공부를 위해 Angular를 다시 설치하는 방법을 정리해 보았습니다. [시스템 사양] MacOS version : MacOS Catalina 10.15.2 Homebrew version : 2.2.2 MacOS에서 Angular을 설치하여 프로젝트를 만들기 위해서는 우선 npm이 필요한데, brew를 통해 node를 먼저 설치합니다. Homebrew 설치 : https://brew.sh Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 터미널에서 brew를 설치하고 node를 설치해 줍니다. brew install n..