angular.js 이용

Posted 2013. 11. 18. 10:32

http://angularjs.org/


여기에서 js 를 다운받거나 cdn 주소를 이용.


클라이언트에서 처리하는 언어. 서버가 필요할 때는 ajax 요청.

SPA.

MVC 모델





angular.js 로 todo 리스트 코딩.



index.html

<!doctype html>

<html ng-app>

<head>

<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

<link rel="stylesheet" href="todo.css">

<script type="text/javascript" src="todo.js"></script>

</head>


<body>

<h2>할일</h2>

<div ng-controller="TodoCtrl">

<span>{{todos.length}} 중 {{remaining()}} 남음!!</span>

[ <a href="" ng-click="archive()">정리</a> ]

<ul>

<li ng-repeat="todo in todos">

<input type="checkbox" ng-model="todo.done">

<span class="done-{{todo.done}}">{{todo.text}}</span>

</li>

</ul>

<form ng-submit="addTodo()">

<input type="text" ng-model="todoText" size="30" placeholder="추가할 할일을 입력하세요">

<input type="submit" value="등록">

</form>

</div>

</body>

</html>



todo.js

function TodoCtrl($scope){

$scope.todos = [

{text:'angular.js 공부', done:true},

{text:'angular.js 앱 만들기', done:false},

];


$scope.remaining = function() {

var count = 0;

angular.forEach($scope.todos, function(todo){

count += todo.done ? 0 : 1;

});

return count;

};


$scope.addTodo = function() {

$scope.todos.push({text:$scope.todoText, done:false});

$scope.todoText = '';

};


$scope.archive = function() {

var oldTodos = $scope.todos;

$scope.todos = [];

angular.forEach(oldTodos, function(todo) {

if(!todo.done) {

$scope.todos.push(todo);

}

})

};


}



todo.css

.done-true {

text-decoration: line-through;

color: lightgray;

}


nodepdf 모듈.


1. phantomjs 를 다운받아 압축풀고 path 를 잡아준다.

2. app.js 의 dependencies 에 'nodepdf' : '*' 을 추가

3. index.js 에


exports.pdfcreate = function(req, res) {

var nodePDF = require('nodepdf');

var path = require('path');

var destpath = path.resove(__dirname, '..', 'uploadfolder', 'naver.pdf'); //

var pdf = new nodePDF('http://www.naver.com', destpath, {width:1024,height:760}) // 캡쳐할 사이트, 저장할 폴더 주소


pdf.on('error', function(msg) {

console.log('error', msg);

});

pdf.on('done', function(pathToFile) {

console.log('pathToFile : ', pathToFile);

res.json({result:'success'});

});


}




클라우르에 올리려면

app.js 에 추가


app.use('/uploads', express.directory(path.join(__dirname, 'uploads')));

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));






www.imagemagick.org/


이런 프로그램이 미리 깔려 있어야 함.


var easyimage = require('easyimage');


var srcimg = 'ree.jpg';


easyimage.info(srcimg, function(err, stdout, stderr){

if(err) console.log("err : ",err);

console.log(stdout);

});


easyimage.resize({src:srcimg, dst:'ree-250x150.jpg', width:250, height:150},

function(err, img){

if(err) console.log("resize err : ", err);

console.log(img);

});


모듈 받으면 test.js 파일이 있는데 그걸 참고하면 됨




« PREV : 1 : 2 : 3 : 4 : ··· : 24 : NEXT »