내맘대로 살기🎉

MVC와 MVVM의 차이 MVC - controller와 통신한다. model - view - controller MVVM - 자기 자신과 통신하는 선언적 데이터 바인딩. model - view - view - model. 양방향 데이터 바인딩을 하기 때문에 model과 view가 알아서 통신한다. 그러므로 controller가 없어도 작성 가능 !! 데이터를 제공하는 컨트롤러 없이 ng-repeat을 사용하여 생성하는 것이다 {{ number }} 스코프 주석 유효범위 내의 범위를 스코프주석으로 묶어준다. 그러면 어디까지가 유효범위인지 한 번에 확인할 수 있다.

동적 뷰와 라우팅 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', [])..

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

양방향 데이터 바인딩이란, 완전히 동기화된 데이터라고 생각하면 좋다. 모델을 갱신하면 뷰에 반영되고, 뷰를 갱신하면 모델에 반영되는 형태이다. * 동기화를 위한 다른 작업을 하지 않아도 자동으로 동기화. 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..

서비스 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..