My Blog List

Thursday, September 18, 2014

if you are in trouble

take step back and think carefully.

My Thought about AngularJs

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: '&amp;'
    },
    ....
    // 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


<div class="sel_area" style="width:40%;">
                            <button class="btn_sel" type="button"  ng-click='showDropdown()'>
                                             {{selectedCondition.name}}
                            </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;' >
  <option value='이름'>이름</option>
  <option value='전화번호'>전화번호</option>
  <option value='id'>id</option>
</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;