AngularJS
Superheroic JS MVW Framework
CHA SUNG WON / darth.vader@navercorp.com
The Evolution of the Web
pure javascript
varbuttons=document.getElementsByTagName("button");
for(vari=0;i<buttons.length;i++){
if(buttons[i].addEve...
RequireJS
Backbone, Ember (MVC)
NODE js
...
AngularJS (2009)
AngularJS:MVC패턴을구현하는자바스크립트프레임워크(한빛미디어,2013년7월)
The History of AngularJS
Started by Misko Hevery in 2009, Google Feedback
GWT = 3 developers, 6 months, 17000 LOC
AngularJ...
Our Project : ORIGAMI
BEFORE : origami.navercorp.com/Bucket
AFTER : origami.navercorp.com
JESTER : 7190 LOC, 148435 bytes
...
Web Development
Hello World
!doctypehtml
htmlng-app
head
scrip+src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js/scrip...
Data Binding
$scope.profile={
name:Albert,
age:35
};
{{profile.age}} //1-way
inputng-model=profile.nametype=text //2-way
C...
Directives
divng-controller=SampleCtrl
divng-repeat=articleinnews.articles
spanng-bind=article.title/span
div
/div
custom-...
Dependency Injection
.controller('LoginController',function($scope,$rootScope,$location,
$http,$cookieStore,LoginService){...
TODO list app
Requirements
- add Task
- archive Task
- counting  filtering
- realtime-sync
- decorate
STEP 1 : Basic Functions CODEPEN
- add Task
- archive Task
- counting  filtering
STEP 2 : SYNC (socket.io) CODEPEN
STEP 3 ...
Server-side (socket.io)
vario=require(socket.io).listen(9321),
fs=require(fs);
io.sockets.on(connection,function(socket){
...
AngularJS Batarang
EXTRA
IDE : chrome devtools, chrome workspace
SASS / LESS / icon fonts
Choosing Libraries
AngulaJS seminar Invitation
mark...
Thank you.
and See You Again!
Upcoming SlideShare
Loading in …5
×

Angularjs presentation

871 views
571 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
871
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Angularjs presentation

  1. 1. AngularJS Superheroic JS MVW Framework CHA SUNG WON / darth.vader@navercorp.com
  2. 2. The Evolution of the Web
  3. 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. 4. RequireJS Backbone, Ember (MVC) NODE js ... AngularJS (2009)
  5. 5. AngularJS:MVC패턴을구현하는자바스크립트프레임워크(한빛미디어,2013년7월)
  6. 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. 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. 8. Web Development
  9. 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. 10. Data Binding $scope.profile={ name:Albert, age:35 }; {{profile.age}} //1-way inputng-model=profile.nametype=text //2-way CODEPEN
  11. 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. 12. Dependency Injection .controller('LoginController',function($scope,$rootScope,$location, $http,$cookieStore,LoginService){ $scope.login=function(){ LoginService.authentificate(...),function(user){ ... } }; }); CODEPEN Service, Filter ...
  13. 13. TODO list app Requirements - add Task - archive Task - counting filtering - realtime-sync - decorate
  14. 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. 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. 16. AngularJS Batarang
  17. 17. EXTRA IDE : chrome devtools, chrome workspace SASS / LESS / icon fonts Choosing Libraries AngulaJS seminar Invitation markdown : script for this doc.
  18. 18. Thank you. and See You Again!

×