Node.js and angular js

Node.js와 AngularJS
오라클자바

Node.js 설치
• https://nodejs.org/en/
• 설치 확인
• C:Usersdaman_000>node -v

helloworld.js
• console.log("Hello World");
• C:Usersdaman_000nodejs>node helloworld.js
• Hello World

익명 함수(Anonymous Function)
var printstuff = function(stuff) {
console.log(stuff);
}
printstuff("stuff");

전역 객체와 타이머
console.log(__filename);
console.log(__dirname);
function printstuff() {
console.log("This was from setTimeout");
}
//setTimeout(printstuff, 5000); 5초후에 실행
setInterval(printstuff, 2000); //2초마다 실행

콜백 함수
• function callback() {
• console.log("Queried the database and delivered data
in 5 seconds");
• }
• console.log("User 1 made a request");
• setTimeout(callback, 5000);
• console.log("User 2 made a request");
• setTimeout(callback, 5000);
• …

모듈1 App.js
• App.js
var athletics = require('./athletics');
athletics.relay();
athletics.longjump();

모듈2 athletics.js
function relay() {
console.log("This is relay function");
}
function longjump() {
console.log("This is longjump function");
}
module.exports.relay = relay;
module.exports.longjump = longjump;

http 모듈로 간단 웹서버 구축
var http = require('http');
http.createServer(function(request, response){
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();
}).listen(8888);

이벤트 처리
var events = require('events');
var eventEmitter = new events.EventEmitter(); //이벤트를
발생시키는 객체
var ringbell = function() {
console.log(“띵동");
}
eventEmitter.on('doorOpen', ringbell);
eventEmitter.emit('doorOpen');

fs모듈-텍스트파일읽기(비동기처리)
var fs = require('fs');
fs.readFile('input.txt', function(err, data){
if (err) {
console.log(err);
} else {
console.log("Async data is " + data.toString());
}
});

fs모듈-텍스트파일읽기(동기처리)
var data = fs.readFileSync('input.txt');
console.log("Sync data is " + data.toString());
console.log("This is the end");

fs모듈-스트림읽기
var readableStream = fs.createReadStream('input.txt');
var data = '';
readableStream.setEncoding('UTF8');
readableStream.on('data', function(chunk) {
data += chunk;
});
readableStream.on('end', function(){
console.log(data);
});

fs모듈-스트림쓰기
var writeData = "Hello World";
var writableStream = fs.createWriteStream('output.txt');
writableStream.write(writeData, 'UTF8');
writableStream.end();
writableStream.on('finish', function(){
console.log("Write completed");
});

fs모듈-파이프
var readableStream = fs.createReadStream('in.txt');
var writableStream = fs.createWriteStream('out.txt');
readableStream.pipe(writableStream);

sample
<!doctype html>
<html ng-app>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">
</script>
</head>
<body>
<div>
<p><input type="text" ng-model="yourName"></p>
<p>Hello {{yourName}}!</p>
</div>
</body>
</html>

filter
• {{12345678|number}} // 천단위컴마 => 12,345,678
• {{12.34|number:4}} // 소수점이하 4자리 => 12.3400
• {{12.34|currency}} // 통화 => $12.34
• {{1234|currency:＇₩＇}} // 통화(원기호) => 1,234.00
• {{'2099-12-31T12:59:59'|date}} // 날짜포맷 => Dec 31, 2099
• {{＇2099-12-31T12:59:59＇|date:＇yyyy/MM/dd＇}} // 날짜포맷 => 2099/12/31
• {{[1,2,3,4]|limitTo:3}} // 최초 3건만 표시 => [1,2,3]
• {{“OracleJava＂|lowercase}} // 소문자변환 => oraclejava
• {{“OracleJava”|uppercase}} // 대문자변환 => ORACLEJAVA
• {{{name:“Kim", age:36}|json}} // JSON형식으로 표시=> { "name": “Kim",
"age": 26 }
• {{[1,3,5,2,4]|orderBy}} // 소트해서 표시 => [1,2,3,4,5]
• {{[1,3,5,2,4]|orderBy:'':true}} // 역순으로 소트해서 표시 => [5,4,3,2,1]

모듈과 컨트롤러
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.message = 'Hello world!';
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
{{message}}
</div>
</div>
</body></html>

리스트 처리
<!doctype html>
<html ng-app="myApp">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.4.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function() {
this.members = [
{ name: ‘Kim', age: 36 },
{ name: ‘Lee', age: 16 },
{ name: ‘Park', age: 26 }
];
});
</script>
</head>
<body>
<div ng-controller="myController as myCtrl">
<ul>
<li ng-repeat="member in
myCtrl.members">{{member.name}}
{{member.age}}</li>
</ul>
<div>{{myCtrl.members.length}} members</div>
</div>
</body>
</html>

액션
<!doctype html>
<html ng-app="myApp">
<head>
<title>TEST</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs
/1.4.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function() {
this.count = 0;
this.inc = function() { this.count++; }
this.dec = function() { this.count--; }
});
</script>
</head>
<body>
<div ng-controller="myController as myCtrl">
{{myCtrl.count}}
<button ng-click="myCtrl.inc()">+1</button>
<button ng-click="myCtrl.dec()">-1</button>
</div>
</body>
</html>

Angularjs2 정리
• 일단 환경설정하고
• AngularJS2 QuickStart를 다운/셋팅한다. ==> 여기까지 웹서
핑으로 충분히 가능...
• npm install
• npm start 해서 Hello world 가 뜨는지 확인한다.

Movie.json
• [{"ItemCode":"dvd001","Title":"신고질라
","Janre":"sf","Wonje":"ShinGodzilla","Time":120},{"ItemCode":"d
vd002","Title":"트랜스포머
","Janre":"sf","Wonje":"Transformer","Time":130},{"ItemCode":"dv
d003","Title":"평양성","Janre":"코메디
","Wonje":"PyungyangCastle","Time":100},{"ItemCode":"dvd004"
,"Title":"황산벌","Janre":"코메디
","Wonje":"HyangsanHill","Time":110},{"ItemCode":"dvd005","Tit
le":"인천상륙작전","Janre":"전쟁
","Wonje":"IncheonImpossible","Time":150}]

app/video.ts
export class Movie {
ItemCode: string;
Title: string;
Janre: string;
Wonje: string;
Time: number;
constructor(ItemCode:string, Title:string, Janre:string, Wonje:string,
Time:number) {
this.ItemCode = ItemCode;
this.Title = Title;
this.Janre = Janre;
this.Wonje = Wonje;
this.Time = Time;
}
}

app.component.ts
• 수업시간 참조

Movie.html
<h1>Movies</h1>
<table class="table table-hover">
<thead>
<tr>
<td>ItemCode</td>
<td>Title</td>
<td>Janre</td>
<td>Wonje</td>
<td>Time</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let v of movies">
<td>{{ v.ItemCode }}</td>
<td>{{ v.Title }}</td>
<td>{{ v.Janre }}</td>
<td>{{ v.Wonje }}</td>
<td>{{ v.Time }}</td>
</tr>
</tbody>
</table>

Node.js and angular js

More Related Content

What's hot

Similar to Node.js and angular js

More from HyungKuIm

Recently uploaded

Node.js and angular js