1. AngularJS
Superheroic JS MVW Framework
CHA SUNG WON / darth.vader@navercorp.com

2. The Evolution of the Web

3. pure javascript
varbuttons=document.getElementsByTagName("button");
for(vari=0;i<buttons.length;i++){
if(buttons[i].addEventListener){
buttons[i].addEventListener("click",function(){
alert("clicked");
},false);
}elseif(buttons[i].attachEvent){
buttons[i].attachEvent("onclick",function(){
alert("clicked");
});
}
buttons[i].innerHTML="clickme!";
}
jQuery
$("button").on("click",function(event){
alert("clicked");
}).html("clickme!");

4. RequireJS
Backbone, Ember (MVC)
NODE js
...
AngularJS (2009)

5. AngularJS:MVC패턴을구현하는자바스크립트프레임워크(한빛미디어,2013년7월)

6. The History of AngularJS
Started by Misko Hevery in 2009, Google Feedback
GWT = 3 developers, 6 months, 17000 LOC
AngularJS = 1 developer, 3 weeks (-95.8%), 1500 LOC (-91.1%)

7. Our Project : ORIGAMI
BEFORE : origami.navercorp.com/Bucket
AFTER : origami.navercorp.com
JESTER : 7190 LOC, 148435 bytes
AngularJS : 4984 LOC (-30.6%), 93296 bytes (-37.1%)

8. Web Development

9. Hello World
!doctypehtml
htmlng-app
head
scrip+src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js/scrip+
/head
body
div
labelName:/label
inputtype=textng-model=nameplaceholder=Enteryournamehere
hr
h1Hello{{name}}/h1
/div
/body
/html
CODEPEN

10. Data Binding
$scope.profile={
name:Albert,
age:35
};
{{profile.age}} //1-way
inputng-model=profile.nametype=text //2-way
CODEPEN

11. Directives
divng-controller=SampleCtrl
divng-repeat=articleinnews.articles
spanng-bind=article.title/span
div
/div
custom-tag/custom-tag
divdata-my-own-property.../div
.directive(customTag,function(){
return{
replace:true,
restrict:E,
transclude:true,
template:div.../div,
controller:function($scope){
//controllercode
}
};
});
CODEPEN
Custom Directives, Built-In Directives

12. Dependency Injection
.controller('LoginController',function($scope,$rootScope,$location,
$http,$cookieStore,LoginService){
$scope.login=function(){
LoginService.authentificate(...),function(user){
...
}
};
});
CODEPEN
Service, Filter ...

13. TODO list app
Requirements
- add Task
- archive Task
- counting filtering
- realtime-sync
- decorate

14. STEP 1 : Basic Functions CODEPEN
- add Task
- archive Task
- counting filtering
STEP 2 : SYNC (socket.io) CODEPEN
STEP 3 : Decorate (bootstrap) CODEPEN
Result : TODOS preview
Some More Stuff...

15. Server-side (socket.io)
vario=require(socket.io).listen(9321),
fs=require(fs);
io.sockets.on(connection,function(socket){
fs.readFile(todos.json,utf8,function(err,data){
if(err){
throwerr;
}
socket.emit(update:msg,data);
socket.on(broadcast:msg,function(data){
socket.broadcast.emit(update:msg,data.message);
writeToFile(data.message);
});
});
});
functionwriteToFile(data){
fs.writeFile(todos.json,data,function(err){
if(err){
console.log(err);
}else{
console.log(updated!);
console.log(data.message);
}
});
}

16. AngularJS Batarang

17. EXTRA
IDE : chrome devtools, chrome workspace
SASS / LESS / icon fonts
Choosing Libraries
AngulaJS seminar Invitation
markdown : script for this doc.

18. Thank you.
and See You Again!