웹개발 (4) 썸네일형 리스트형 [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] 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.. 이전 1 다음
