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

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~

http://dev.barusoft.co.kr/Education/html/angular/main_index.html

access ssh linux in virtual box

첫번째로 virtualBox Host Network 를 Enable 해줘야 한다.

이거 하느라고 엄청나게 삽질 했음. ㅠㅠ

그런다음 사용하고 있는 가상 OS 셋팅을 해준다. 

네트워크로 가서 네트워크를 처음에 열어놓은 Virtual Box Host 로 선택한다

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

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

ㅡㅡ V 김치

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

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                  

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