Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

909 views

Published on

  • Be the first to comment

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!

×