import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: LOCALE_ID, useValue: 'ko' }
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nowDate = new Date();
}
<h1>
{{ nowDate | date:'yyyy-MM-dd HH:mm:ss'}}
</h1>
import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nowDate = new Date();
datePipe: DatePipe;
constructor() {
this.datePipe = new DatePipe('en-US');
}
}
<h1>
{{ datePipe.transform(nowDate, 'yyyy-MM-dd HH:mm:ss') }}
</h1>
<div class="parent"> <span>aaaaaa</span>< br/> <p>aaaaaa</p>< br/> <span>aaaaaa</span>< br/> <span>aaaaaa</span> </div>
.parent :not(p) {
color:red;
}
1004lucifervar today = new Date('05 October 2011 14:48 UTC');
console.log(today.toISOString()); // Returns 2011-10-05T14:48:00.000Z
if (!Date.prototype.toISOString) {
(function() {
function pad(number) {
if (number < 10) {
return '0' + number;
}
return number;
}
Date.prototype.toISOString = function() {
return this.getUTCFullYear() +
'-' + pad(this.getUTCMonth() + 1) +
'-' + pad(this.getUTCDate()) +
'T' + pad(this.getUTCHours()) +
':' + pad(this.getUTCMinutes()) +
':' + pad(this.getUTCSeconds()) +
'.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
'Z';
};
}());
}
import {Injectable} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {Headers, Http, RequestMethod, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class MultipartFormService {
constructor(
private http: Http
) {
}
/**
* Object / File 객체를 Multipart 로 묶어서 서버에 전송한다.
* @param {requestMethod} RequestMethod
* @param {string} url
* @param {Object} jsonObject
* @param {Array<{name: string; file: File}>} files
* @returns {Observable<Response>}
*/
sendMultipartJsonObject(requestMethod: RequestMethod, url: string, jsonObject: Object, files?: Array<{name: string, file: File}>): Observable<Response> {
const formData = new FormData();
let blob;
for (const key in jsonObject) {
if (jsonObject.hasOwnProperty(key)) {
blob = new Blob([jsonObject[key]], {type: 'application/json; charset=UTF-8'});
formData.append(key, blob);
}
}
if (files) {
files
.filter((file) => file.name != null && file.file != null) // 정상적이지 않은 객체 Filter
.forEach((file) => {
formData.append(file.name, file.file);
});
}
const headers = new Headers({'enctype': 'multipart/form-data'});
return requestMethod === RequestMethod.Post ? this.http.post(url, formData, { headers }) :
requestMethod === RequestMethod.Put ? this.http.put(url, formData, { headers }) : null;
}
extractFile(event) {
const files = event.target.files || event.srcElement.files;
return files.length === 0 ? null : files[0];
}
extractFileName(event) {
const file = this.extractFile(event);
return file ? file.name : '';
}
}
import {Component, Input, OnInit} from '@angular/core';
import {RequestMethod} from '@angular/http';
import {MultipartFormService} from '../../shared/multipart-form/multipart-form.service';
@Component({
selector: 'jhi-devices',
templateUrl: './devices.component.html',
styles: []
})
export class DevicesComponent implements OnInit {
private readonly apiUrl = '/api/urlname';
isNew: boolean;
deviceInfo: Device;
file1: File;
file2: File;
constructor(
private multipartFormService: MultipartFormService
) {
}
onSubmit() {
this.multipartFormService.sendMultipartJsonObject(
this.isNew ? RequestMethod.Post : RequestMethod.Put,
this.apiUrl,
{'device': JSON.stringify(this.deviceInfo)},
[{'name': 'file1', 'file': this.file1}, {'name': 'file2', 'file': this.file2}]
).subscribe(
(response) => console.log(response.json()),
(response) => console.log(response.json())
);
}
}
/**
* REST controller for managing Device.
*/
@RestController
@RequestMapping("/api")
public class DeviceResource {
/**
* POST /devices : Create a new device.
*
* @param device the device to create
* @return the ResponseEntity with status 201 (Created) and with body the new device, or with status 400 (Bad Request) if the device has already an ID
* @throws URISyntaxException if the Location URI syntax is incorrect
*/
@PostMapping("/devices")
@Timed
public ResponseEntity<Device> createDevice(
@RequestPart Device device,
@RequestParam (value = "file1", required = false) MultipartFile file1,
@RequestParam (value = "file2", required = false) MultipartFile file2
) throws URISyntaxException {
log.debug("REST request to save Device : {}", device);
if (device.getId() != null) {
return ResponseEntity.badRequest().headers(HeaderUtil.createFailureAlert(ENTITY_NAME, "idexists", "A new device cannot already have an ID")).body(null);
}
if (file1 != null) {
// File 저장 로직
}
if (file2 != null) {
// File 저장 로직
}
// 이후 로직 ..
}
}
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>kr.co._1004lucifer.realestate_core</groupId>
<artifactId>test-core</artifactId>
<packaging>war</packaging>
<name>test-core</name>
<version>0.0.1_SNAPSHOT</version>
<parent>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot</artifactId>
<version>1.3.0</version>
</parent>
<properties>
<java.version>1.7</java.version>
<tomcat.version>7.0.78</tomcat.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<start-class>kr.co._1004lucifer.test.MainApplication</start-class>
<failOnMissingWebXml>false</failOnMissingWebXml>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>1.5.2.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- Spring Boot Mail -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
<version>1.4.3.RELEASE</version>
</dependency>
<!-- MyBatis Spring Boot -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.0</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter-test</artifactId>
<version>1.3.0</version>
</dependency>
<!-- MySQL DataBase -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.42</version>
</dependency>
<!-- Lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.0</version>
</dependency>
<!-- HTML Parser -->
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.10.2</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>1.5.3.RELEASE</version>
</plugin>
</plugins>
</build>
</project>
import {Injectable} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {Headers, Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class MultipartFormService {
constructor(
private http: Http
) {
}
/**
* Form의 string / File 파라메터를 Multipart 로 묶어서 서버에 전송한다.
* @param {string} url
* @param {FormGroup} formGroup
* @param {Array<{name: string; file: File}>} files - [{'name': 'fileKey1', 'file': this.file1}, ...]
* @returns {Observable<Response>}
*/
sendMultipartForm(url: string, formGroup: FormGroup, files?: Array<{name: string, file: File}>): Observable<Response> {
const formData = new FormData();
for (const key in formGroup.value) {
if (formGroup.value.hasOwnProperty(key)) {
formData.append(key, formGroup.value[key]);
}
}
if (files) {
files
.filter((file) => file.name != null && file.file != null) // 정상적이지 않은 객체 Filter
.forEach((file) => {
formData.append(file.name, file.file);
});
}
const headers = new Headers({'enctype': 'multipart/form-data'});
return this.http.post(url, formData, { headers });
}
}
<div>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<table class="tbl_w1 mrg_T20">
<colgroup>
<col width="150">
<col width="">
</colgroup>
<tr>
<td>param1</td>
<td><input formControlName="param1" type="text" class="white_grayline input_wmiddle back_gray"></td>
</tr>
<tr>
<td>param2</td>
<td><input formControlName="param2" type="text" class="white_grayline input_wmiddle back_gray"></td>
</tr>
<tr>
<td>file1</td>
<td><input #file1Name class="file_input_textbox2" readonly/>
<div class="file_input_div">
<input type="button" value="찾아보기" class="file_input_button"/>
<input (change)="file1 = extractFile($event);
file1Name.value = extractFileName($event)"
type="file" class="file_input_hidden"/>
</div>
</td>
</tr>
<tr>
<td>file2</td>
<td><input #file2Name class="file_input_textbox2" readonly/>
<div class="file_input_div">
<input type="button" value="찾아보기" class="file_input_button"/>
<input (change)="file2 = extractFile($event);
file2Name.value = extractFileName($event)"
type="file" class="file_input_hidden"/>
</div>
</td>
</tr>
</table>
<p class="aln_c mrg_T20">
<button type="submit">확인</button>
</p>
</form>
</div>
import {Component, Input, OnInit} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {FormControl, FormGroup} from '@angular/forms';
import {MultipartFormService} from './multipart-form.service';
@Component({
selector: 'use-selector',
templateUrl: './use.component.html',
styles: []
})
export class UseComponent implements OnInit {
myForm: FormGroup;
file1: File;
file2: File;
constructor(
public activeModal: NgbActiveModal,
private multipartFormService: MultipartFormService
) {
this.myForm = new FormGroup({
'param1': new FormControl(),
'param2': new FormControl()
});
}
ngOnInit() {
}
extractFile(event) {
const files = event.target.files || event.srcElement.files;
return files.length === 0 ? null : files[0];
}
extractFileName(event) {
const file = this.extractFile(event);
return file ? file.name : '';
}
onSubmit() {
this.multipartFormService.sendMultipartForm(
'/api/resourceName',
this.myForm,
// files 파라메터는 옵션으로 추가하지 않아도 된다.
[{'name': 'fileKey1', 'file': this.file1}, {'name': 'fileKey2', 'file': this.file2}],
).subscribe(
(response) => {
console.log(response.json());
},
(response) => {
console.log(response.json());
});
}
/**
onSubmit() {
this.multipartFormService.sendMultipartForm(
'/api/resourceName',
this.myForm,
).subscribe(
(response) => {
console.log(response.json());
},
(response) => {
console.log(response.json());
});
}
*/
}
@NgModule({
imports: [
ReactiveFormsModule,
...
],
declarations: [UseComponent],
providers: [
MultipartFormService
],
})
export class UseModule {
}
<form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <p class="aln_c mrg_T20"> <button type="submit" #submitBtn style="display:none;"></button> <a (click)="submitBtn.click()"><span class="btn_blue btn_popcon">확 인</span></a> <a (click)="activeModal.close()"><span class="btn_gray btn_popcon">취 소</span></a> </p> </form>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()" #formElem> <p class="aln_c mrg_T20"> <a (click)="formElem.click()"><span class="btn_blue btn_popcon">확 인</span></a> <a (click)="activeModal.close()"><span class="btn_gray btn_popcon">취 소</span></a> </p> </form>
<div class="naviWrap">
<ul class="navi">
<li id="home" routerLink="/home/menu1" class="{{selectedMenu == 'home' ? 'on' : ''}}">홈</li>
<li id="system" routerLink="/system/menu1" class="{{selectedMenu== 'system' ? 'on' : ''}}">시스템 설정</li>
</ul>
</div>
<div id="homeSub" class="subnaviWrap" *ngIf="selectedMenu == 'home'">
<ul class="subnavi">
<li routerLink="/home/menu1" routerLinkActive="on">메뉴1</li>
<li class="line">|</li>
<li routerLink="/home/menu2" routerLinkActive="on">메뉴2</li>
<li class="line">|</li>
<li routerLink="/home/menu3" routerLinkActive="on">메뉴3</li>
</ul>
</div>
<div id="homeSub" class="subnaviWrap" *ngIf="selectedMenu == 'system'">
<ul class="subnavi">
<li routerLink="/system/menu1" routerLinkActive="on">메뉴1</li>
<li class="line">|</li>
<li routerLink="/system/menu2" routerLinkActive="on">메뉴2</li>
<li class="line">|</li>
<li routerLink="/system/menu3" routerLinkActive="on">메뉴3</li>
</ul>
</div>
export class MenuComponent implements OnInit {
selectedMenu: string;
constructor(
private router: Router,
) {
this.selectedMenu = 'home'; // /home/menu1
}
ngOnInit() {
// F5를 눌러 새로고침 시 MenuComponent가 초기화 되니 후 한번 실행
const currentUrl = this.router.url.split('/');
if (currentUrl[1]) {
this.selectedMenu = currentUrl[1];
}
// menu.component.html 에서 routerLink 선택하여 메뉴(URL)이동 할 때 마다 실행
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.selectedMenu = event.url.split('/')[1];
}
});
}
}
"dependencies": {
"@angular/animations": "4.3.2",
"@angular/common": "4.3.2",
"@angular/compiler": "4.3.2",
"@angular/core": "4.3.2",
"@angular/forms": "4.3.2",
"@angular/http": "4.3.2",
"@angular/platform-browser": "4.3.2",
"@angular/platform-browser-dynamic": "4.3.2",
"@angular/router": "4.3.2",
"@ng-bootstrap/ng-bootstrap": "1.0.0-beta.1",
"bootstrap": "4.0.0-beta",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"ng-jhipster": "0.2.12",
"ng-pick-datetime": "5.0.0-beta.6",
"ng2-webstorage": "1.8.0",
"ngx-cookie": "1.0.0",
"ngx-infinite-scroll": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"zone.js": "0.8.16"
},
/* after changing this file run 'yarn run webpack:build' */ /*@import '~bootstrap/dist/css/bootstrap.min.css';*/ @import '~ng-pick-datetime/assets/style/picker.min.css'; @import '~font-awesome/css/font-awesome.css';
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {DateTimePickerModule} from 'ng-pick-datetime';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CustomDateTimePickerComponent} from './datetimepicker.component';
import {FormsModule} from '@angular/forms';
@NgModule({
imports: [
FormsModule,
DateTimePickerModule,
BrowserAnimationsModule
],
declarations: [CustomDateTimePickerComponent],
exports: [CustomDateTimePickerComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class CustomDatetimepickerModule {
}
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({
selector: 'jhi-datetimepicker',
templateUrl: './datetimepicker.component.html',
styles: []
})
export class CustomDateTimePickerComponent implements OnInit {
componentDatetime: Date;
dateFormat = 'YYYY-MM-DD HH:mm';
ko = {
firstDayOfWeek: 0,
dayNames: [ '일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일' ],
dayNamesShort: [ ' 일', ' 월', ' 화', ' 수', ' 목', ' 금', ' 토' ],
monthNames: [ '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월' ],
monthNamesShort: [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' ]
};
@Input()
get datetime() {
return this.componentDatetime;
}
set datetime(value) {
this.componentDatetime = value;
this.datetimeChange.emit(this.componentDatetime);
}
@Output() datetimeChange = new EventEmitter();
constructor() {
}
ngOnInit() {
}
}
1004lucifer<owl-date-time
[(ngModel)]="datetime"
[locale]="ko"
[dateFormat]="dateFormat"
[placeHolder]="''"
></owl-date-time>
@NgModule({
imports: [
CustomDatetimepickerModule,
...
],
declarations: [...],
...
})
export class UseModule {
}
@Component({
...
})
export class UseComponent implements OnInit {
public startDateTime: Date;
constructor() {
}
ngOnInit() {
}
}
<div> <jhi-datetimepicker [(datetime)]="startDateTime"></jhi-datetimepicker> </div>
.owl-timer-wrapper .owl-timer-input {
text-align: center;
}
export class AuditsComponent implements OnInit {
audits: Audit[];
fromDate: string;
itemsPerPage: any;
links: any;
page: number;
orderProp: string;
reverse: boolean;
toDate: string;
totalItems: number;
datePipe: DatePipe;
constructor(
private auditsService: AuditsService,
private parseLinks: JhiParseLinks,
private paginationConfig: PaginationConfig,
// private datePipe: DatePipe
) {
this.itemsPerPage = ITEMS_PER_PAGE;
this.page = 1;
this.reverse = false;
this.orderProp = 'timestamp';
this.datePipe = new DatePipe('en-US');
}
...
}
data: string;
@Output() outputData = new EventEmitter<SystemDeviceFilter>();
constructor(
// ng-bootstrap Modal
public activeModal: NgbActiveModal
) {
}
doOutput() {
this.outputData.emit(this.data);
this.activeModal.close(); // Modal Close
}
constructor(
private modalService: NgbModal,
...
) {
}
const modalComponent = this.modalService.open(ModalComponent).componentInstance;
modalComponent.outputData.subscribe((data) => {
// data을 활용한 로직
});
<div class="row justify-content-center"> <ngb-pagination [collectionSize]="totalItems" [(page)]="page" (pageChange)="loadPage(page)"></ngb-pagination> </div>
.row.justify-content-center {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
justify-content: center!important;
margin-top: 20px;
}
ngb-pagination > .pagination {
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: .25rem;
}
ngb-pagination > .pagination > ol,ul,li {
list-style: none;
}
ngb-pagination > ul > .page-item .page-link {
box-sizing: border-box;
border:0;
width: 35px;
height: 35px;
font-size: 14px;
text-align: center;
padding: 8px;
margin: 0 2px 0 2px;
text-decoration: none;
color: #555;
}
ngb-pagination > ul > .page-item .page-link > span {
width: 0;
height: 0;
font-size: 0;
}
ngb-pagination > ul > .page-item > a {
display: block;
}
ngb-pagination > ul > .page-item.active > a {
color: #0e77d9;
font-weight: bold;
}
ngb-pagination > ul > .page-item > a:hover {
color: #0e77d9;
font-weight: bold;
}
ngb-pagination > ul > .page-item > a[aria-label="First"] {
background-image: url('../images/common/count_first.gif');
}
ngb-pagination > ul > .page-item > a[aria-label="Previous"] {
background-image: url('../images/common/count_prev.gif');
}
ngb-pagination > ul > .page-item > a[aria-label="Next"] {
background-image: url('../images/common/count_next.gif');
}
ngb-pagination > ul > .page-item > a[aria-label="Last"] {
background-image: url('../images/common/count_end.gif');
}
