내맘대로 살기🎉

동적 뷰와 라우팅 angular를 이용해서 웹 사이트의 header, footer, left, right로 나누는 것을 쉽게 할 수 있다. angular의 동적 뷰를 이용하면 되는데, 그 방법은 URL을 기준으로 $routeProvider를 통해서 특정 뷰를 얻어온 다음 적용하면 된다. myApp.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl:'views/main.html' }); .when('/emails', { templateUrl:'views/emails.html' }); .otherwise({ redirectTo:'/' }); }]); - URL이 '/'이면 main.html로 주..

선언적 DOM 메서드 디렉티브이며, 스크립트로 작성해서 DOM에 기능을 제공한다. ng-show와 ng-click을 사용한 토글 네비게이션 예제로 확인해본다. Toggle nav Link 1 Link 2 Link 3 - 이 코드를 실행시키면 아래와 같이 실행되는데, "Toggle nav"를 클릭하면 밑의 Link 1~3이 사라지거나 보인다. 말 그래도 토글이다. 표현식 어떤 식으로 작성하는지 먼저 확인해보자. {{ data.length > 0 && 'My data' || 'No data'}} 이런 식으로 작성하면, data.length가 0보다 크다면, My data. 작다면, No data라고 출력하는 문이다. if문을 쓰지 않아도 아주 짧게 표현할 수 있다. 내 생각 - javacript에서 data..

scope함수를 사용하여 메일 중 하나를 삭제하는 기능을 만들어보자. 고급 팁: 모델에서 데이터를 지우는 동작을 생각해보는 건 중요하다. 실제 DOM과 연관된 요소를 지우는 게 아니기 때문이다. Angular는 양방향 바인딩과 콜백없이 처리한다. 우리는 데이터에 반응하는 코드를 현명하게 작성하면 된다. My Inbox: From: {{ message.from }} Subject: {{ message.subject }} {{ message.sent | date:'MMM d, y h:mm:ss a' }} Delete email // 추가된 부분 - delete하기 위해 - html파일 안에 어떤 식으로 코드가 작성되고, 추가되었는지 확인 var myApp = angular.module('myApp', [])..

node app.js 를 한 번 하면, 코드가 수정되어도 계속 수정 전의 코드상태로 실행되고 있음. 하지만 ! supervisor를 사용하면, 수정되면 자동으로 꺼졌다 ! 켜졌다 ! 한다. 이런 기능을 워치(watch)라고 한다. 설치- npm install supervisor --g--g로 하는 이유는, 이 파일이 있는 폴더 뿐만 아니라 컴퓨터 모든 곳에서 사용하기 위해. 사용- node app.js라고 실행시키던 것을 supervisor app.js라고 실행. 굉장히 편하다...

GET방식과 POST방식의 차이 GET - 어떠한 정보를 서버에 요청해서 가져오는 것. // " 서버 " ㅁ .jade 태그의 속성을 넣고 싶다면 ex) meta(charset='utf-8') pp.get('/form',function(req,res){ res.render('form'); }); app.get('/form_receiver',function(req, res){ var title = req.query.title; var description = req.query.description; res.send(title+','+description); }); - input이나 textarea의 값을 submit했을 때 값을 가져오고 싶다면 name을 지정해주고 req.query로 참조하면 된다. ㅁ ..

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..