angular.js 썸네일형 리스트형 CodeSchool Angular.js Level5 레벨 5에서는 모듈과 서비스에 대해서 공부한다. 일단 모듈 나누기부터~ products.js 파일을 만든 후 app.js에 있던 product 관련 내용들을 옮긴다. products.js(function() { var app = angular.module('store-directives',[]); app.directive("productDescription", function() { return { restrict: 'E', templateUrl: "product-description.html" }; }); app.directive("productReviews", function() { return { restrict: 'E', templateUrl: "product-reviews.html" }; });.. 더보기 CodeSchool Angular.js Level4 첫시간은 ng-include다. 여러 페이지에서 재사용해야 하는 경우 include를 이용하는게 좋겠지. index.html Description {{product.description}}이 부분에서 h4와 blockquote 내용을 밖으로 빼낸다. product-description.htmlDescription{{product.description}} 그리고 이렇게 include하면 완료. 여기서 주의해야할 점은 작은 따옴표로 감싸줘야 한다는 것! ng-include를 쓰는 대신 커스텀 태그를 만들어 쓰는 것도 가능하다. app.jsapp.directive("productDescription", function(){ return { restrict : 'E', templateUrl : 'product-.. 더보기 CodeSchool Angular.js Level3 레벨 3에서는 form과 model에 대해서 공부한다. app.js(function() { var app = angular.module('gemStore', []); app.controller('StoreController', function(){ this.products = gems; }); app.controller('TabController', function(){ this.tab = 1; this.setTab = function(newValue){ this.tab = newValue; }; this.isSet = function(tabName){ return this.tab === tabName; }; }); app.controller('GalleryController', function(){ t.. 더보기 CodeSchool Angular.js Level2 첫시간은 filter다. Angular.js에서는 필터로 통화기호 표시도 해주고, 리스트인 경우 정렬도 해준다. uppercase로 대문자로 변환도 해주고, limitTo로 글자 수 제한도 걸 수 있다. pipe 라인으로 지정할 수 있다. 값이 이 pipe라인을 거치면서 필터링된다고 생각하면 될듯... 이거 만든 사람 천잰데?? {{product.name}} {{product.price | currency}} 이런식으로.. 앞에 부턴 $ 표시를 안 써도 된다! 2단계는 이미지 보여주기!(function() { var app = angular.module('gemStore', []); app.controller('StoreController', function(){ this.products = gems; .. 더보기 CodeSchool Angular.js Level1 CodeSchool로 Angular.js 공부를 시작한다. 다이내믹하고 인터렉티브한, 그러면서도 서버와의 통신도 최소화해서 효율적인 프론트엔드 개발을 가능하게 해주는 프레임워크인듯 하다. 새로고침 없이 필요한 부분만 수정(?)하는게 ajax 처리랑 비슷해보이기도 한다. 코드스쿨 내용을 그대로 옮기는 건데 괜찮겠지..? 한번 문의해봐야겠다.코드스쿨에서 가져왔다는 표기만 하면 된다고 하니 안심하고 기록해두겠다. app.jsvar app = angular.module('gemStore',[]);gemStore라는 이름의 모듈을 만든다. 두번째 인자로 넘겨주는 배열에는 이 모듈의 dependency 모듈을 넣어주는 것 같다. 지금은 없으므로 빈 배열을 넘긴다. 여기서 중요한건 첫번재 인자인 모듈의 이름이다. 이.. 더보기 이전 1 다음