My Blog List

Thursday, January 23, 2014

Big Hompage with Angular and RequireJS (MVC Pattern)

In the past, usually we made webpage multipages
in each page we have <script></script> tags if we need module
so each page needs to load all scripts that pages need
So it spend a lot of time and make people see loading bar as long as script are loaded

In present. web page trend is changing  step by step

today i want to share how to efficiently make big single webpage with angularJS and RequireJS

First Version


This Structure of this project is below screen shots

1. Angualr MVC Model



- explain 
1. view: view is only are consis of html files using angular js tags
2. router : this is routing url to which html should be loaded
3. Controllers : this controlls services and logic after views are loaded
4. service : these are functions that load json datas from server using ajax



2. RequireJS Dependency


- explain 

1. angular : this is angular library
2. angular-route : this is angular plugin, 
once angular under 1.0.8? I'm not sure angular library contatin route
3. angular-start : this defines route module
4. controller-start : this defines controllers 
5. route-start : this defines url routing patterns
6. service-start : this defines services related to this project




3. source Review

3-1. this project tree structure



3-2. main.html 

- <div ng-view></div> is the frame that html pages are changed into
- <script data-main="js/main"  src="js/libs/require.js" ></script>  
   first main.js will be called






3-3 main.js



3-4 angular-start(angular-init.js)
- define angular










3-5 controller-start(controller-init.js)

- you can use static controller and dynamic controller
 static controller : router will directly mapping html
 dynamic controllers : router will mapping using url patterns



3-6 router-start(routing.js)

/view/:id is mapped with static controller

/:cate/:sub is mapped width dynamic contollers



3-7 service-start(service-init.js)




4. get Service from controller 
mailListController.js

- getting mailService from services tray
- using mailService function














5. I cannot fully explain all source
later I will share my Project samples 


if you need right now reply and write you email

Have a good job

Wednesday, January 22, 2014

AngularJs Tutorial~

Below link is a tutorial that I made before

you can see the result in sample page

that html page will provide you edit, updatesource and update result

have fun~

hope to help you~

Sunday, January 19, 2014

access ssh linux in virtual box

첫번째로 virtualBox Host Network 를 Enable 해줘야 한다.
이거 하느라고 엄청나게 삽질 했음. ㅠㅠ





그런다음 사용하고 있는 가상 OS 셋팅을 해준다. 
네트워크로 가서 네트워크를 처음에 열어놓은 Virtual Box Host 로 선택한다




리눅스에서 셋팅을 dhcp 로 자동으로 할당하게 셋팅해놓았다.






그리고 윈도우에서 원갹으로 ssh 로 접속하면 정상적으로 접속 완료

ㅡㅡ V 김치

Thursday, January 16, 2014

Simple usage Router in Node JS

what you need is connect library and connect_router lib

if you want to install command npm install connect



/**
 * Created by David on 14. 1. 17.
 */
var connect = require('connect');

var router = require('connect_router');

var server = connect.createServer();

server.use(connect.logger());
server.use(connect.query());
server.use(connect.static(__dirname + '/images'));
server.use(router(function (app) {
    app.get('/home/index', function (request, response, next) {
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write('index');
        response.end();
    });

    app.get('*', function (request, response, next) {
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write('error');
        response.end();
    });
}));

server.listen(8888, function () {
   console.log('8888 is running');
});

This is basic sample with connect in NodeJS

User query, and logger given by connect Lib


/**
 * Created by David on 14. 1. 17.
 */
var connect  = require('connect');

var server = connect.createServer();

server.use(connect.logger());
server.use(connect.query());
server.use(function(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.end('<h1>'+JSON.stringify(request.query)+'</h1>');
});

server.listen(8888, function(){
    console.log('8888 is running');
});

POI Excel Export by using Mapping Text

Today I Thought how to easily  make Excel by java

step 1.
Using POI Open Library.

step 2. 
Simplify method.

step 3
make mapping text.

finally i made simply column mapping library using java replection ~!

below you can see what i did

- this is using POI in maven


- this foler structure


- Suposse that users are from database


- what just i shoud do is calling makeRealExcel Method





- this is mapping Object


this is mapping text


and you can see the result xls from website





If you want to use sample project, reply

Wednesday, January 8, 2014

After Ajax, This is a good pattern to make hmtl using javascirpt

Today i thought how to devide roles of html and jascript.

I learned Angular Js and this is awesome but
to use it is too hard for me ..

so i have find different way and very easy.
find sprintf and try to use it

below are sample i made

Usually i use this pattern  but hard to read
Basic pattern

<!DOCTYPE html>
<html>
<head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='frame'>
</div>
<script>
//ajax 파싱후 값을 가져왔다는 가정하에
    var obj = [{user_seq : 'user_seq1', user_name : "홍길동", age : '22'},
        {user_seq : 'user_seq2', user_name : "심청이", age : '19'},
{user_seq : 'user_seq3', user_name : "홍두깨", age : '30'}];

    var i=0;
    var str='';
    for(i=0; i<obj.length;i ++){
       str = str + '<div class="user" id="'+obj[i].user_seq+'1">'+
               '<div class="name">'+obj[i].user_name +'</div>' +
               '<div class="age">'+obj[i].age +'</div>';
    }
    document.getElementById('frame').innerHTML = str;
</script>
</body>
</html>

and changed some what different

Good pattern I think

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="sprintf.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='frame'>
    <div class="user" id="%1s">
        <div class="name">%2s</div>
        <div class="age">%3s</div>
    </div>
</div>
<script>

    //ajax 파싱후
    var obj = [{user_seq : 'user_seq1', user_name : "홍길동", age : '22'},
        {user_seq : 'user_seq2', user_name : "심청이", age : '19'},
{user_seq : 'user_seq3', user_name : "홍두깨", age : '30'}];

    var i=0;
    var str ='';
    var content = document.getElementById('frame').innerHTML;;
    for(i=0; i<obj.length;i ++){

        str = str + sprintf(content,
obj[i].user_seq, //1 
obj[i].user_name, //2
obj[i].age); //3
    }

    document.getElementById('frame').innerHTML = str;

</script>
</body>
</html>

html disable select option in jquery

<body>
<div>
    <select id="org_type">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <select id="place">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <select id="area">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
   $(document).ready(function(){

       // open
       var open ={};
       //          org_type, place, area
       open['9'] = [true, true, true];
       open['0'] = [false, false, false];
       open['1'] = [false, true, false];
       open['3'] = [true, true, false];

       $('#org_type').val(5);
       $('#place').val(2);
       $('#area').val(1);

       checkAuth(open['3']);
   });

    function checkAuth(auth){
        $("#org_type").attr("disabled", !auth[0]);
        $("#place").attr("disabled", !auth[1]);
        $("#area").attr("disabled", !auth[2]);
    }

</script>

Sql Server get Date String

this is for example you have to change char("number") ;


select CONVERT(CHAR(8),GETDATE(),112) = 20140108
select CONVERT(CHAR(16),GETDATE(),110) = 01-08-2014    
select CONVERT(CHAR(16),GETDATE(),111) = 2014/01/08    


select CONVERT(CHAR(30),GETDATE(),100) = 01  8 2014  6:06PM      
select CONVERT(CHAR(30),GETDATE(),101) = 01/08/2014                        
select CONVERT(CHAR(30),GETDATE(),102) = 2014.01.08                  
select CONVERT(CHAR(30),GETDATE(),105) = 08-01-2014                  

Tuesday, January 7, 2014

I Just started Node.js

Next project,
I'm not sure but will use pure html web application

so I have to start use webstorm and angular js and so on

hope to enjoy developing