https://www.garamx.com/dokuwiki/ 2026-05-06T13:38:39+00:00 https://www.garamx.com/dokuwiki/ https://www.garamx.com/dokuwiki/lib/tpl/darkblue/images/favicon.ico text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:angular-cli-matarial&rev=1744711518&do=diff CLI + Material starter template Datatable ng generate @angular/meterial:material-table --name=my-table text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:angular-cli&rev=1744711518&do=diff Angular CLI Angular CLI기반으로 angular이용을 효율적으로 할 수 있다. Package의 추가 및 업데이트 ng update <package> * analyses your package.json * recommend updates to your application * 3rd parties can provide update scripts using schematis text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:angular6&rev=1744711518&do=diff Angular 6 Registering providers Before import { EmployeeService } from './employee.service'; providers : [EmployeeService], Now @Injectable({ providedIn: 'root', }) export class EmployeeService{ ngModelChange Before <input [(ngMedel)]="name" (ngModelChange)="onChange($event)"> onChange(value) { console.log(value); // would log updated value } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:binding&rev=1744711518&do=diff 바인딩 [Data Binding] Interpolation(보간법) template: ` <h2>{{ title }}</h2> ` 단방향 바인딩 <h1 [innerText]="car.name"></h1> <div [style.color]="color">{{ title }} </div> * [attr.aria-label] * 특성 바인딩 * 알려진 속성이 아닌 경우에는 이 방식을 사용 text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:class-binding&rev=1744711518&do=diff import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test-pb', template: ` <h2> Welcome {{name}} </h2> <h2 class="text-success">Codevolution</h2> <h2 [class]="successClass">Codevolution</h2> <h2 class="text-success" [class]="successClass">Codevolution</h2> <h2 [class.text-danger]="hasError">Codevolution</h2> <h2 [ngClass]="messageClasses">Codevolution</h2> `, styles: [` .text-success { color: green; } .tex… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:component-interaction&rev=1744711518&do=diff Component Interaction From the parent component To the child component 1.Parent Component <app-test-component-interaction [parentData]="name"></app-test-component-interaction> 2.Child Component export class TestComponentInteractionComponent implements OnInit { //@Input() public parentData; @Input('parentData') public name; constructor() { } ngOnInit() { } } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:component&rev=1744711518&do=diff Component Angular에서 UI를 표현하기 위해서 사용한다. * Communication angular CLI ng generate component <component name> [option] ng g component <component name> [option] ng g c <component name> [option] Angular.Io참조 Component Annotation Angular에게 Component를 알려주는 Annotation은 @Component라는 Annotation을 사용한다. -sample text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:dependency-injection&rev=1744711518&do=diff Angular의 의존성 주입 의존성 주입(Dependency injection, DI)은 애플리케이션 디자인 패턴 중에서도 아주 중요한 패턴입니다. Angular는 독자적인 의존성 주입 시스템을 제공하고 있기 때문에, 이 패턴을 활용하면 Angular 애플리케이션을 좀 더 효율적인 모듈 형태로 구성할 수 있습니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:directive&rev=1744711518&do=diff Directive @Directive({ selector: "[app-key-press]" }) export class KeyupDirective { @HostListener("keyup", ["$event"]) onKeyUp(event: KeyboardEvent) { console.log(event); } } Test describe('ComponentDirective', () => { // let component: MaroBaseComponent; let fixture : ComponentFixture<MaroDialogComponent>; it('should create an instance', () => { const directive = fixture.componentInstance.gdComponent; expect(directive).toBeTruthy(); }); }); text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:download&rev=1744711518&do=diff Download File import rxjs/Rx; details = {id: 75,name: "some name"} this.nameService.getData(this.details).subscribe(response => { this.downloadFile(response); }) downloadFile(data: Response) { let blob = new Blob([data]); let link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = evt.filename; link.click(); } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:event-binding&rev=1744711518&do=diff Event Binding import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test-eb', template: ` <h2> Welcome {{ name }} </h2> <button (click)="onClick($event)">Greet</button> <button (click)="greeting='Welcome Code'">Greet</button> {{ greeting }} `, styleUrls: ['./test-eb.component.css'] }) export class TestEbComponent implements OnInit { name = "Codevolution"; greeting = ""; constructor() { } ngOnInit() { } onClick(event){ console.l… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:form_array&rev=1744711518&do=diff FormArray FormArray와 FormGroup text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:forms&rev=1744711518&do=diff Forms Vital to business applications Create an experience that guides the user e1fficiently and effectively through the workflow. Developers * Data binding * Change tracking * Validation * Visual feedback * Error messages * Form submission text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:hangul&rev=1744711518&do=diff 한글 한글입력문제 <http://devstory.ibksplatform.com/2017/07/angular2.html> app.module.ts에 COMPOSITION_BUFFER_MODE를 추가 providers: [ { provide: COMPOSITION_BUFFER_MODE, useValue: false } ], <https://angular.io/api/forms/COMPOSITION_BUFFER_MODE> text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:home&rev=1744711518&do=diff Angular * Angular * Study * Study Angular * Angular Material * Angular Testing * Angular Login * Observable & RxJs * Angular HttpClient * FormArray * ng-template와 ng-container * Angular Local Storage * Angular CLI * iframe 사용 - pipe로 검증해야함 * Directive * Mat-Icon * Download 주의할것들 HTML5에 제공되는 property, attribute하고 Angular에서 사용하는 property하고 충돌이 나올 수 있다. 두가지 모두를 만족하지는 않는다.… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:http-observables&rev=1744711518&do=diff HTTP and Observables Observables A sequence of items that arrive asynchronously over time. HTTP call - single item Single item - HTTP response HTTP, Observables and RxJS * HTTP Get request from EmpService * Receive the observable and cast it into an employee array text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:httpclient&rev=1744711518&do=diff HttpClient 관련 POST * 현창현 POST 대부분의 프런트 엔드 응용 프로그램은 HTTP 프로토콜을 통해 백엔드 서비스와 통신합니다. 최신 브라우저는 HTTP 요청을하기 위해 XMLHttpRequest 인터페이스와 fetch() API의 두 가지 API를 지원합니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:interpolation&rev=1744711518&do=diff Interpolation(보간법) 보간법이라고 해석하고들 있습니다. <h2> {{ title }} </h2> <h2> {{ 2 + 2 }} </h2> <h2> {{ "Welcome " + title }} </h2> <h2> {{ title.length }} </h2> <h2> {{ title.toUpperCase() }} </h2> <h2> {{ greetUser() }} </h2> text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:localstorage&rev=1744711518&do=diff Angular Local Storage 보관함은 나중에 사용할 수 있도록 물건을 보관하는 공간입니다. 웹 애플리케이션 관점에서 스토리지는 크게 서버 측 스토리지 와 클라이언트 측 스토리지의 두 가지 유형으로 분류될 수 있습니다 . 서버측 스토리지란 SQL, MYSQL, MongoDB 등과 같은 다양한 유형의 데이터베이스 스토리지를 의미합니다. 클라이언트측 스토리지는 서버측 데이터베이스를 요청하지 않고도 필요할 때 사용할 수 있도록 브라우저 자체에 데이터를 저장하는 것을 의미합니다.… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:login&rev=1744711518&do=diff Angular Login JWT[JSON Web Tokens] text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:mat-icon&rev=1744711518&do=diff Material Icon mat-icon list <mat-icon>clear</mat-icon> text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:material&rev=1744711518&do=diff Angular Material * mat-icon List ng CLI 사용 Angular Project에 Angular Material을 추가 설치하려면 npm install --save @angular/material @angular/cdk @angular/animations 또는 ng add @angular/material Component Segments Name Descriptionaddress-form Component with a form group that uses Material Design form controls to prompt for a shipping address text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:ng-template-ng-container&rev=1744711518&do=diff ng-template와 ng-container @defer ViewContainerRef @defer (뷰포트에서) { < comment-list /> } @placeholder { <!-- 댓글이 로드될 때까지 표시할 자리 표시자 콘텐츠 --> < img src = "comments-placeholder.png" > } @defer (뷰포트에서) { < comment-list /> } @loading { 로드 중… } @error { 로드 실패 :( } @placeholder { < img src = "comments-placeholder.png" > } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:ngfor&rev=1744711518&do=diff ngFor Direction <div *ngFor="let color of colors; index as i; first as f; last as l; odd as o; even as e"> <h2>{{i}} {{color}} {{ f }} {{ l }} {{ o }} {{ e }}</h2> </div> export class TestNgforComponent implements OnInit { colors = ["red","blue","green","yellow"]; constructor() { } ngOnInit() { } } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:ngif&rev=1744711518&do=diff ngIf Html Element를 보여주거나 안 보여주거나 한다. <div *ngIf="false"> Codevolution </div> 2.ng-template사용 <div *ngIf="displayName; else elseBlock"> Codevolution </div> <ng-template #elseBlock> <h2> name is hidden </h2> </ng-template> text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:ngmodulefaq&rev=1744711518&do=diff NgModule FAQs text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:ngswitch&rev=1744711518&do=diff ngSwitch <div [ngSwitch]="color"> <div *ngSwitchCase="'red'">Red</div> <div *ngSwitchCase="'blue'">Blue</div> <div *ngSwitchCase="'orange'">Orange</div> <div *ngSwitchDefault>Default</div> </div> export class TestNgswitchComponent implements OnInit { public color = "blue"; constructor() { } ngOnInit() { } } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:observable_rxjs&rev=1744711518&do=diff Observable & RxJS * Observable * The RxJS library * Observables in Angular * Practical observable usage * Observables compared to other techniques Observable The RxJS Library Observables in Angular Practical observable usage Observables compared to other techniques text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:pipe&rev=1744711518&do=diff Pipe <h2>{{ name }}</h2> <h2>{{ name | lowercase }}</h2> <h2>{{ name | uppercase }}</h2> <h2>{{ message | titlecase }}</h2> <h2>{{ name | slice:3:5 }}</h2> <h2>{{ person | json }}</h2> <h2>{{ 5.678 | number:'1.2-3'}}</h2> <h2>{{ 5.678 | number:'3.4-5'}}</h2> <h2>{{ 5.678 | number:'3.1-2'}}</h2> <h2>{{ 0.25 | percent }}</h2> <h2>{{ 0.25 | currency }}</h2> <h2>{{ 0.25 | currency: 'GBP' : 'code'}}</h2> <h2>{{ 0.25 | currency: 'EUR' : 'code'}}… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:property-binding&rev=1744711518&do=diff Property Binding [Angular Property Binding] Attributes and Properties are not the same. Attributes - HTML Properties - DOM(Document Object Model) Attributes initialize DOM properties and then type are done. Attribute values cannot change once they are initialized. Property values however can change. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:reactive-forms&rev=1744711518&do=diff Reactive Forms * Code and the logic resides in the component class * No two way binding * Well suited for complex scenarios * Dynamic form fields * Custom validation * Dynamic Validation * Unit test * CLI generated project * Add the form text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:routing&rev=1744711518&do=diff Routing import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { DepartmentListComponent } from './department-list/department-list.component'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { DepartmentDetailComponent } from './department-detail/department-detail.component'; import { DepartmentOverviewComponent } from './d… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:service&rev=1744711518&do=diff Service Angular는 component기반으로 작성하고자 한다. 소스는 독립성을 두어야 할 필요가 있다. 그중하나가 service라는 개념이다. service는 특별한 목적을 가지는 클래스이다. Injectable annotation을 사용하여 DI text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:style-binding&rev=1744711518&do=diff Style Binding import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test-sb', template: ` <h2> Welcome {{ name }} </h2> <h2 [style.color]="hasError ? 'red' : 'green'">Style Binding</h2> <h2 [style.color]="highlightColor">Style Binding</h2> <h2 [ngStyle]="titleStyle">Style Binding</h2> `, styleUrls: ['./test-sb.component.css'] }) export class TestSbComponent implements OnInit { public name = "Codevolution"; public successClass = "text-succe… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:template-reference-variables&rev=1744711518&do=diff Template Reference Variables myInput을 주의해서 보시면 되겠습니다. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test-trv', template: ` <h2> Welcome {{ name }} </h2> <input #myInput type="text"> <button (click)="logMessage(myInput)">Log</button> `, styleUrls: ['./test-trv.component.css'] }) export class TestTrvComponent implements OnInit { name = "Codevolution"; constructor() { } ngOnInit() { } logMessage(value){ console.log(value); … text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:testing&rev=1744711518&do=diff Angular Testing Test Tool & Library * Jasmine * Karma * Angular TestBed * WallabyJS * Protractor text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=angular:two-way-binding&rev=1744711518&do=diff Two Way Binding <input [(ngModel)]="name" type='text'> ngModel를 사용하려면 app.module.ts파일에 FormsModule를 포함시켜야 합니다. import { FormsModule } from '@angular/forms' import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', //templateUrl: './login.component.html', template: `<div> <input [(ngModel)]="login_id" type="text"> <input [(ngModel)]="password" type="password" (keyup.enter)="login()"> <button (click)="login()" id="btnSave">로그인</button> </div> `,…