Embed Size (px)
Citation preview
pure javascript
var buttons = document.getElementsByTagName("button");for (var i = 0; i < buttons.length; i++) { if (buttons[i].addEventListener) { buttons[i].addEventListener("click", function () { alert("clicked"); }, false); } else if (buttons[i].attachEvent) { buttons[i].attachEvent("onclick", function () { alert("clicked"); }); } buttons[i].innerHTML = "click me!";}
jQuery
$("button").on("click", function (event) { alert("clicked");}).html("click me!");
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
AngularJS = 1 developer, 3 weeks (-95.8%), 1500 LOC (-91.1%)
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%)
Web Development
Hello World
<!doctype html><html ng-app><head><scrip+ src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></scrip+></head><body><div> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter your name here"> <hr> <h1>Hello {{name}}</h1></div></body></html>
CODEPEN
Data Binding
$scope.profile = { name: "Albert", age: 35};
{{profile.age}} // 1-way<input ng-model="profile.name" type="text"> // 2-way
CODEPEN
Directives
<div ng-controller="SampleCtrl"> <div ng-repeat="article in news.articles"> <span ng-bind="article.title"></span> <div></div>
<custom-tag></custom-tag>
<div data-my-own-property> . . . </div>
.directive("customTag", function() { return { replace: true, restrict: "E", transclude: true, template: "<div> . . . <\/div>", controller: function($scope) { // controller code } };});
CODEPEN
Custom Directives, Built-In Directives
Dependency Injection
.controller('LoginController', function($scope, $rootScope, $location, $http, $cookieStore, LoginService) {
$scope.login = function() { LoginService.authentificate( . . . ), function(user) { . . . } };});
CODEPEN
Service, Filter ...
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 : Decorate (bootstrap) CODEPEN
Result : TODOS preview
Some More Stuff...
Server-side (socket.io)
var io = require("socket.io").listen(9321), fs = require("fs");
io.sockets.on("connection", function (socket) {
fs.readFile("todos.json", "utf8", function (err, data) {
if (err) { throw err; }
socket.emit("update:msg", data);
socket.on("broadcast:msg", function (data) {
socket.broadcast.emit("update:msg", data.message); writeToFile(data.message); }); });});
function writeToFile(data) {
fs.writeFile("todos.json", data, function (err) { if (err) { console.log(err); } else { console.log("updated!"); console.log(data.message); } });}
AngularJS Batarang
EXTRAIDE : chrome devtools, chrome workspace
SASS / LESS / icon fonts
Choosing Libraries
AngulaJS seminar Invitation
markdown : script for this doc.
Thank you.and See You Again!
![AngularJS Projects, Forms and Servicesiproduct.org/wp-content/uploads/2016/07/AngularJS... · AngularJS and TypeScript SPA Development Sources: AngularJS [ ], ... Designing front-end](https://img.pdfslide.us/doc/110x75/5ee35669ad6a402d666d455f/angularjs-projects-forms-and-angularjs-and-typescript-spa-development-sources.jpg)
