Programming is my life~! : September 2014

Thursday, September 18, 2014

I used it for a half year.

First time I started it~ It was amazing because each input or text automatically know data is changed.

and I wanted know more and more ~

I will write what is very difficult to be skillful

Difficult Thing
- understanding directive.
- directives are very difficult to study
scope, link, compile, restrict, transclude and so on...
- communication controllers, controllers inherit
- services

if I'm familiar with angularjs

Usefull Thing
- project speed is upup ~
- easy ajax network and databinding
- custom common directives and i can use it
- one page app
- MVC structure

Wednesday, September 17, 2014

Directive example

directive

1. restrict

A 엘리먼트
E 속성
C 클래스

2. template or templateUrl

실제로 들어가게 되는 div

3. 특징
- directive는 새로운 scope를 생성할 수 없다
- scope를 부모로 부터 상속을 받는다
-

app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '<p style="background-color:{{color}}">Hello World',
link: function(scope, elem, attrs) {
elem.bind('click', function() {
elem.css('background-color', 'white');
scope.$apply(function() {
scope.color = "white";
});
});
elem.bind('mouseover', function() {
elem.css('cursor', 'pointer');
});
}
};
});

4. link fuction
- link에는 3개의 변수가 들어간다
- scope는 parent 스코프

5. scope의 종류는 두가지가 있다
- A child scope -> scope:true
- An isolated scope -> scope:{}

childe scope 는 부모로부터 scope를 상속받는다
isolated scope 는 개별적으로 하나를 생성한다.

isolated scope는 부모의 scope를 사용할 수 없는것이 아니다.

6. @ 사용하기 (데이터 바인딩용)
- @ for One Way Text Binding
- 상위 컨트롤러의 color가 바뀌면 하위의 내용도 따로 바뀐다.

app.directive('helloWorld', function() {
return {
scope: {
color: '@colorAttr'
},
....
// the rest of the configurations
};
});

<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world color-attr="{{color}}"/>
</body>

7. = 사용하기 (데이터 바인딩용)
= for Two Way Binding

app.directive('helloWorld', function() {
return {
scope: {
color: '='
},
....
// the rest of the configurations
};
});

8. & to Execute Functions in the Parent Scope

app.directive('sayHello', function() {
return {
scope: {
sayHelloIsolated: '&'
},
....
// the rest of the configurations
};
});

<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<say-hello sayHelloIsolated="sayHello()"/>
</body>

9. Parent Scope vs. Child Scope vs. Isolated Scope

Parent Scope : scope:fasle default
childe scope : scope:true inherit parent scope
isolated scope :

10. The controller Function and require
app.directive('outerDirective', function() {
return {
scope: {},
restrict: 'AE',
controller: function($scope, $compile, $http) {
// $scope is the appropriate scope for the directive
this.addChild = function(nestedDirective) { // this refers to the controller
console.log('Got the message from nested directive:' + nestedDirective.message);
};
}
};
});

4번째 변수는 require 한 컨트롤러가 삽입된다.

app.directive('innerDirective', function() {
return {
scope: {},
restrict: 'AE',
require: '^outerDirective',
link: function(scope, elem, attrs, controllerInstance) {
//the fourth argument is the controller instance you require
scope.message = "Hi, Parent directive";
controllerInstance.addChild(scope);
}
};
});

reference site : http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/

Tuesday, September 16, 2014

call Angularjs Scope from javascript fn

I found out that how I call angularjs scope's function from javascript

example is blow

angular.element(document.getElementById('yourControllerElementID')).scope().get();

Sunday, September 14, 2014

how to start mongoDB

this command will start mongoDB server

./mongod

basic port is 27017 and will create and use /data/db directory to save data

MongoDB Basic command

I studied mongoDB

and This mongoDB structure is like json structure

and this has collection.

this is just start time ~ I don't know how deeply i shoud study this mongoDB

but I'm just curious about using it and be interested in getting information of this database

blow post is what i got from O'Reilly - MongoDB- The Definition Guide

34/216page

./mongodb

switch database

> use footer

show which db i use

> db

CRUD

create, read, update, delete

javascript functions are available in mongoDB

make post data

> post = {"title":"good",

... "content":"this is body",

... "date" : new Date()}

{

"title" : "good",

"content" : "this is body",

"date" : ISODate("2014-09-15T00:18:45.482Z")

}

and

i gonna insert this post to blog

>db.blog.insert(post)

find

> db.blog.find() or db.blog.findOne()

update

> post.comments = []

> db.blog.update({title:"good"}, post)

WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })

delete

> db.blog.remove({title:"good"})

show dbs = show databasenames

show collections = show collections in current database

show users = show users in current database

use <db name> = set current database to <db name>

db.help()

dob.foo.help()

Thursday, September 11, 2014

angularjs How to use Custom Select

what i just tell you is this is just one of many example and

I used it

so this is one way, not a solution of using it

</button><span class="caret"></span>

<select id='searchCondition' ng-model='selectedCondition'

ng-options="condition.name for condition in conditions"

style='opacity: 0; width:0px; float:left;' >

</select></div>

$scope.conditions = [

{name:'이름', shade:'light'},

{name:'전화번호', shade:'dark'},

{name:'아이디', shade:'dark'}

];

$scope.selectedCondition = $scope.conditions[0];

$scope.showDropdown = function () {

var event;

var element = document.getElementById('searchCondition');

event = document.createEvent('MouseEvents');

event.initMouseEvent('mousedown', true, true, window);

element.dispatchEvent(event);

};

Monday, September 1, 2014

read json file and return json file in nodejs

1. at first reading json file
2. json string to object
3. return json

var express = require('express');
var router = express.Router();
var fs = require('fs');

/* GET users listing. */
router.get('/', function(req, res) {

var text= fs.readFile('./package.json', 'utf-8', function(err, data){

res.json(JSON.parse(data));
});

});

module.exports = router;

---------- package.json --------

{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.8.6",
"body-parser": "~1.6.6",
"cookie-parser": "~1.3.2",
"morgan": "~1.2.3",
"serve-favicon": "~2.0.1",
"debug": "~1.0.4",
"jade": "~1.5.0",
"stylus": "0.42.3"
}
}

use express router and get & post parameters

This article is about make different methods called 'get', 'post'
and all is include all method

and also tell you the way getting paramter ~
I tested all~

var express = require('express');
var router = express.Router();
var fs = require('fs');

/* GET users listing. */
router.get('/', function(req, res) {

var param1 = req.param('param1');
console.log(param1);

var param2 = req.param('param2');
console.log(param2);

res.send();

});

router.post('/', function(req, res){
var param1 = req.param('param1');
console.log(param1);

var param2 = req.param('param2');
console.log(param2);

res.send();
});

router.all('/all', function(req, res){
console.log('all');
var param1 = req.param('param1');
console.log(param1);

var param2 = req.param('param2');
console.log(param2);

res.send();
});
module.exports = router;

Programming is my life~!