자바캔(Java Can Do IT)

{

  ...

  "dependencies": {

    "@angular/common": "2.0.0-rc.5",

    ...

    "bootstrap": "^3.3.6",

    "ng2-file-upload": "1.0.3"

  },

  "devDependencies": {

    "typescript": "^1.8.10",

    "typings":"^1.0.4"

  }

}

(function (global) {

    // map tells the System loader where to look for things

    var map = {

        'app': '/operation-app/app-testeditor', // 'dist',

        '@angular': '/node_modules/@angular',

        'rxjs': '/node_modules/rxjs',

        'ng2-file-upload': '/node_modules/ng2-file-upload'

    };

    // packages tells the System loader how to load when no filename and/or no extension

    var packages = {

        'app': {main: 'test-editor-main.js', defaultExtension: 'js'},

        'rxjs': {defaultExtension: 'js'},

        'ng2-file-upload': {defaultExtension: 'js'}

    };

    ...

    ...

    System.config(config);

})(this);

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from "ng2-file-upload/ng2-file-upload";

@Component({

    selector: 'test-file-uploader',

    templateUrl: './test-file-uploader.component.html',

    directives: [FILE_UPLOAD_DIRECTIVES]

})

export class TestFileUploader {

    public uploader:FileUploader = new FileUploader({url: '/my/upload/path');

    ...

}

<div ng2FileDrop [uploader]="uploader" ....>

    Base drop zone

</div>

<div ng2FileDrop [uploader]="uploader" ....>

    Another drop zone

</div>

Multiple

<input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

Single

<input type="file" ng2FileSelect [uploader]="uploader" />

<button type="button" class="btn btn-success btn-s"

        (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">

    <span class="glyphicon glyphicon-upload"></span> Upload all

</button>

@Component( ... )

export class TestFileUploader {

    public uploader:FileUploader;

    constructor() {

        let uploadUrl = window.location.protocol + "//" + window.location.host + "/testfile/upload";

        this.uploader = new FileUploader({url: uploadUrl});

        ...

    }

    handleUploadFileChanged(event) {

        this.uploader.clearQueue();

        let files:File[] = event.target.files;

        let filteredFiles:File[] = [];

        for (var f of files) {

            if (f.name.endsWith(".pdf")) {

                filteredFiles.push(f);

            }

        }

        if (filteredFiles.length == 0) {

            this.showGuide = true;

        } else {

            this.showGuide = false;

            let options = null;

            let filters = null;

            this.uploader.addToQueue(filteredFiles, options, filters);

        }

    }

    ...

<input type="file" (change)="handleUploadFileChanged($event)">

@Component( ... )

export class TestFileUploader {

    public uploader:FileUploader;

    private uploadResult:any = null;

    constructor() {

        let uploadUrl = window.location.protocol + "//" + window.location.host + "/testfile/upload";

        this.uploader = new FileUploader({url: uploadUrl});

        this.uploader.onSuccessItem = (item, response, status, headers) => {

            this.uploadResult = {"success": true, "item": item, "response": 

                response, "status": status, "headers": headers};

        };

        this.uploader.onErrorItem = (item, response, status, headers) => {

            this.uploadResult = {"success": false, "item": item, 

                "response": response, "status": status, "headers": headers};

        };

        this.uploader.onCompleteAll = () => {

            this.handleUploadComplete();

        };

    }

    uploadFile() {

        this.uploader.uploadAll(); // 업로드 시작

    }

    private handleUploadComplete() {

        console.log("upload compete : " + this.uploadResult.response);

        if (this.uploadResult.success) {

            ...성공 메시지 출력

        } else {

            ...실패 메시지 출력

        }

    }

import {Component} from '@angular/core';

import {Autosize} from 'angular2-autosize';

@Component({

  template: `

    <textarea autosize >Hello, this is an example of Autosize in Angular2.</textarea>

  `,

  directives: [Autosize]

})

class App {

}

import {ElementRef, HostListener, Directive, Input} from '@angular/core';

@Directive({

    selector: 'textarea[autosize]'

})

export class Autosize {

    @HostListener('input',['$event.target'])

    onInput(textArea: HTMLTextAreaElement): void {

        this.adjust();

    }

    @Input("autosize") initValue:string;

    constructor(public element: ElementRef){

    }

    ngOnInit(): void{

        this.element.nativeElement.rows = 1;

        this.element.nativeElement.value = this.initValue;

        this.adjust();

    }

    adjust(): void{

        this.element.nativeElement.style.overflow = 'hidden';

        this.element.nativeElement.style.height = 'auto';

        this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px";

    }

}

<textarea class="form-control" cols="30" rows="1"

          [(ngModel)]="mytext"

          [autosize]="mytext"></textarea>

<script src="/js/jquery/jquery-1.9.1.min.js"></script>

<script src="/js/jquery/jquery.number.min.js"></script>

<script>

// 자바스크립트 숫자를 문자열로 포맷팅

var num = 12345.6789;

var a = $.number(num); // "12,345"

var b = $.number(num, 3); // "12,345.67"

// jquery 실렉터로 선택된 태그의 text 값으로 포맷팅한 결과를 설정

$("#someSelector").number(1003.1034); // <span id='someSelector'>1,003</span>

$("#anySelector").number(1003.1034, 1); // <span id='anySelector'>1003.1</span>

// jquery 실렉터로 선택된 태그의 숫자 값을 포맷팅

$(".myNumber").number(true); // <span class='myNumber'>12,345</span>

$(".youNumber").number(true, 2); // <span class='youNumber'>12,345.67

</script>

<span id='someSelector'></span>

<span id='anySelector'></span>

<span class='myNumber'>12345.6788</span>

<span class='youNumber'>12345.6788</span>

#map img {

max-width: none;

height: auto;

border: 0

}

<!DOCTYPE html>

<html>

<head>

<title>가변 높이 처리</title>

<style>

#top{ height: 50px; background-color: #eee; }

#left { background-color: yellow; float: left; width: 100px; }

#content { background-color: red; margin-left: 100px; }

</style>

<body>

<div id="top">헤드 높이</div>

<div id="left">좌측 메뉴</div>

<div id="content">내용</div>

</body>

<!DOCTYPE html>

<html>

<head>

<title>가변 높이 처리</title>

<style>

body { height: 100%; margin: 0 0 0 0;}

#top { height: 50px; background-color: #eee; }

#left { background-color: yellow; float: left; width: 100px; }

#content { background-color: red; margin-left: 100px; }

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

$(document).ready(function() {

resizeContent();

});

$(window).resize(function() {

resizeContent();

});

function resizeContent() {

var windowHeight = $(window).height();

var topHeight = $("#top").height();

$('#content').css({'height':(windowHeight-topHeight)+'px'});

}

</script>

<body>

<div id="top">헤드 높이</div>

<div id="left">좌측 메뉴</div>

<div id="content">내용</div>

</body>

$('#content').css({'height':(windowHeight-topHeight)+'px'});

@Controller

public class AppController {

    @RequestMapping("/app/**")

    public String app() {

        return "app/app";

    }

}

<%@ page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE HTML >

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>홈</title>

    <script src="/js/jquery/jquery-1.9.1.min.js"></script>

    <script src="/js/history.js/bundled/html4+html5/jquery.history.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

        (function(window){

            var History = window.History;

            if ( !History.enabled ) {

                return false;

            }

            History.Adapter.bind(window,'statechange',function(){

                var State = History.getState();

                load(History.getState().url+".data", "#contentArea");

            });

        })(window);

        load(History.getState().url+".data", "#contentArea");

    }

    function load(url, target) {

        $.ajax({

            url: url,

            success: function(data) {

                $(target).html(data);

                $('a.state').click(function(evt) {

                    evt.preventDefault();

                    History.pushState(null, null, $(this).attr('href'));

                });

            }

        });

    }

    </script>

</head>

<body>

    <div id="contentArea"></div>

</body>

</html>

History.Adapter.bind(window,'statechange',function(){

var State = History.getState();

load(History.getState().url+".data", "#contentArea");

});

function load(url, target) {

    $.ajax({

        url: url,

        success: function(data) {

            $(target).html(data);

            $('a.state').click(function(evt) {

                evt.preventDefault();

                History.pushState(null, null, $(this).attr('href'));

            });

        }

    });

}

/* Nano Templates (Tomasz Mazur, Jacek Becela) */

(function($) {

    var _regex = /\{([\w\.]*)\}/g;

    $.fn.nano = function(template, data) {

        return template.replace(_regex, function (str, key) {

            var keys = key.split('.'), value = data[keys.shift()];

            $.each(keys, function() { value = value[this]; });

            return (value === null || value === undefined) ? '' : value;

        });

    };

}(jQuery));

<script src="/js/jquery/jquery-1.9.1.min.js"></script>

<script src="/js/jquery/jquery.nano.js"></script>

<script>

var data = {

    content: {

        title: "제목",

        imageUrl: "/pds/1.png"

    },

    desc: "설명"

}

var html = $.nano("<div>{content.title}</div><img src='{content.imageUrl}' alt='{desc}' />", data);

</script>