목록개발자의 길 (44)
내맘대로 살기🎉
Angular의 철학,- 기능이 풍부한 동적 HTML을 생성해서 웹 클라이언트 측에서 많은 일을 보이지 않게 처리해준다.(view에서 거의 다 해준다는 것인가 ?) var myApp = angular.module('myApp', []); myApp.controller('EmailsCtrl', ['$scope', function ($scope) { $scope.emails = {}; $scope.emails.messages = [{ "from": "Steve Jobs", "subject": "I think I'm holding my phone wrong :/", "sent": "2013-10-01T08:05:59Z" },{ "from": "Ellie Goulding", "subject": "I've got..
실제 서버의 XHR 호출을 한다. $http 메소드는 Angular가 서버 데이터에 접근하는 기능을 래핑한 메소드이다. myApp.controller('MainCtrl', '$http' ['$scope', function ($scope, $http) { $http({ method: 'GET', url: '//localhost:9000/someUrl' }) .success(function (data, status, headers, config) { // 성공! 데이터를 가져왔어 }) .error(function (data, status, headers, config) { // 이런. 뭔가 잘못되었음! :( }); }]); -- GET요청을 보내고 성공인지 실패인지 확인한다. { "user": { "name..
textarea의 스크롤이 있는지 없는지 확인하는 것이 필요했다. (function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.innerHeight(); } })($); - 스크롤의 유무를 확인하는 function을 직접 만들어줘서 사용하면 된다. fn에 대해 찾아봤는데, fn 속성은 prototype 속성의 가명이라고 한다.또한, prototype과 fn은 완전히 같은 것이라고 한다.
양방향 데이터 바인딩이란, 완전히 동기화된 데이터라고 생각하면 좋다. 모델을 갱신하면 뷰에 반영되고, 뷰를 갱신하면 모델에 반영되는 형태이다. * 동기화를 위한 다른 작업을 하지 않아도 자동으로 동기화. My model data: {{ myModel }} - view단의 에서 myModel이라는 모델을 연결. var myApp = angular.module('myApp', []); myApp.controller('MainCtrl', ['$scope', function ($scope) { $scope.myModel = ''; }]); 실제 출력 화면의 textbox에 입력해보면 My model data에 값이 바로바로 동기화되는 것을 확인할 수 있다. * 출처 : http://soomong.net/blog..
필터는 배열의 데이터와 함께 사용한다. 또한, 루프 밖에서 사용이 가능하다. 특정 조건에 만족하는 데이터만 구하고 싶을 때 사용. (예를 들어 에 입력된 값으로만 사용자를 구하고 싶을 때) 전역으로 선언 myApp.filter('reverse', function () { return function (input, uppercase) { var out = ''; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } if (uppercase) { out = out.toUpperCase(); } return out; } }); // 데이터를 제공하는 컨트롤러 myApp.controller('MainCtrl', ['$scope', fun..
ex ) localhost/router?id=1 localhost/router?id=2 localhost/router?id=3 ? 뒤에 나타는 것{id=(1~3)}을 query string이라고 한다. 응답, 요청 (req), (res) res.send(req.query.id); 이렇게 하고 router?id=1이라고 url을 작성하면 html에 1이 출력. * expressjs.com에 접속하여 API reference를 보는 것도 좋다. localhost/topic?id=1&name=harris id와 name 둘 다 가져온다. 중간에 연결자는 &이다. app.get('/topic/:id',function(req, res){ var topics = [ 'Javascript is...', 'Nodejs..
정적인 파일은 우리가 내용을 수정하면 리로드만 해주면 바로 반영가능. `[그레이브액센트] 안에 ${here}를 이용하여 here에 넣으면 변수로 입력받음. var express = require('express'); var app = express(); app.use(express.static('public')); app.get('/',function(req, res){ res.send('Hello home page'); }); app.get('/dynamic', function(req, res){ var lis = ''; for(var i=0; i
서비스 myApp.service('Math', function () { this.multiply = function (x, y) { return x * y; }; }); - Math 콘텍스트(콘텍스트라는 명칭이 맞는지 의심됨.)에 multiply라는 메소드를 추가한다. myApp.controller('MainCtrl', ['$scope', function ($scope) { var a = 12; var b = 24; // 결과는 288 var result = Math.multiply(a, b); }]); - controller안에 서비스를 위와 같이 사용할 수 있다. // Math를 주입한다 myApp.controller('MainCtrl', ['$scope', 'Math', function ($scop..
Click me 위의 것을 jsfiddle.net - html에 작성하고. var myApp = angular.module('myApp', []); myApp.directive('customButton', function () { return { restrict: 'AC', replace: true, transclude: true, template: '' + '' + '', link: function (scope, element, attrs) { // DOM manipulation/events here! } }; }); 위의 것을 jsfiddle.net - javascript에 작성한다. 디렉티브는 여러개의 속성을 가지는 객체를 반환하는데, restrict, replace, transclude, temp..
$('input[type="checkbox"]',top.window.document).each(function(){ $(this).attr("checkOutBox",$(this).prop('checked')) }) - 확인되었는지 알 수 있는 attribute를 추가하고, 실제 checkbox의 체크여부를 true, false로 넣어준다. $('input[type="checkbox"]').each(function(){ if($(this).attr('checkOutBox') == "true"){ this.checked = true; }else{ this.checked = false; } }) - checkOutBox라는 attribute가 있는지 확인하고, 그에 맞게 true, false로 값을 초기화해준..