[DEV] App Dev ∕ Web Front/Framework ∕ Angular 검색 결과
31 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Karma Unit Tester

# Karma란?- 자바스크립트 테스트 러너를 의미한다. - npm으로 설치 가능하다. # Karma 설치npm install -g karma 명령어로 설치 가능 하고, karma라는 명령어를 사용가능하다.karma를 사용하기 위해서는 karma.conf.js 파일이 필요해당 파일을 생성하기 위해서는 karma init 명령어를 입력한 후, 부가 정보를 입력해줌으로 가능하다. # Karma.conf.js 설정카르마는 테스트러너일 뿐이므로, 테스트 프레임워크를 설정해주어야 한다.Jasmine, QUnit, Mocha 등을 지원한다.그 외 테스트 프레임워크를 사용하려면 Karma 어뎁터가 필요하다.ex. npm install Karma-mocha 추가로, RequireJS 사용여부, 테스트에 사용할 브라우저..

2020. 8. 6. 23:55
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Project 구조

# 개요Angular 프로젝트의 이상적인 directory 구조에 대해 알아보자. # 이름 규칙- Service 이름 : 해당 Feature에 해당하는 키워드를 항상 사용할 것Here is a compliant folder and file structure:srcappcoreexception.service.ts|spec.tslogger.service.ts|spec.tsuser-profile.service.ts|spec.tsheroeshero-detailhero-detail.component.ts|html|css|spec.ts //Detail.page 느낌hero-listhero-list.component.ts|html|css|spec.ts //Home.page 느낌shared(생략 가능)hero-butt..

2020. 8. 5. 14:01
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Project와 FullCalendar 통합하기

# 개요Full Calendar는 달과 관련된 작업을 완전히 처리할 수 있는 js 라이브러리이다. 해당 FullCalendar를 Angular에 적용하는 방법에 대해 알아보겠다. # fullcalendar-angular 설치- ng g page calendar캘린더 페이지 생성- npm install --save @fullcalendar/angular @fullcalendar/daygrid @fullcalendar/interaction # fullcalendar 모듈 import- calendar.module.ts 내 FullCalendarModule importimport { BrowserModule } from '@angular/platform-browser'; import { NgModule } f..

2020. 8. 5. 11:14
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Routing

# 개요 - 앵귤러 같은 경우, Routing을 너무 편하게 해둔 것 같다. 적용 순서는 아래와 같다. # app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { CrisisListComponent } from './crisis-list/crisis-list.component'..

2020. 8. 3. 17:20
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular 일반지식

# Annotation 이란? - Angular에서는 Annotation 중요 합니다. Annotation에 다라 Class의 역할이 달라지기 때문입니다. - Annotation의 용도는 Class를 어떤 용도로 사용할 것인지를 정해주는 용도 입니다. - Annotation은 class위에 @를 사용해서 정의합니다. -> class에 @Component를 사용 하면 해당 class는 Component가 됩니다. -> class에 @NgModule을 사용 하면 해당 class를 Module이 됩니다. -> class에 @Directive를 사용하면 해당 class는 Directive가 됩니다. - Annotation은 class의 용도를 좀더 잘 설명하기위해서 metadata를 사용하여 좀더 상세하게 정의..

2020. 8. 3. 11:04
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Directive (미완)

# Directive란? - 번역하면, 지시자를 의미 - HTML에 Angular가 간섭할 부분을 표시하는 요소 - Component 또한 Template(html)이 포함된 Directive라고 할 수 있음 ex. //부분에 app-component 템플릿을 표출해달라는 의미 # Directive의 종류 - Structural Directive : DOM을 추가하거나 제거 ex. *ngIf, *ngFor //* 기호가 structural directive라는 것을 의미 ₩ - Attribute Directive : 이미 있는 DOM에 스타일이나 동작을 부여 ex. ngStyle, ngClass @Directive({ selector: '[ngStyle]' }) class NgStyle implement..

2020. 8. 3. 10:59