Dev/Dev:: JavaScript 썸네일형 리스트형 [AngularJS 1.x] AngularJS - 05. 지시자(Directive) 지시자(Directive)AngularJS에서는 이러한 기존 HTML에서 제공하지 않는 기능을 확장하는 방식을 지시자로서 제공한다. AngularJS가 아닌 기존 방식은 특정 DOM에 id 속성을 부여하거나 어느 DOM 아래에 있는 특정 class를 찾거나 하는 방식으로 자바스크립트에서 DOM을 선택한 후 제이쿼리 플러그인을 적용하거나 새로운 DOM을 직접 만들어 삽입하는 방식을 취했다. 하지만, AngularJS에서는 해당 DOM과 연결된 하나의 함수를 만들고 이 함수가 DOM을 조작하여 새로운 기능을 추가하는 등의 행위를 할 수 있다. 이 함수가 특정 DOM과 연결되는 지시자 함수 이다. - 지시자 함수 : AngularJS에서는 해당 DOM과 연결된 하나의 함수를 만들고 이 함수가 DOM을 조작하여.. 더보기 [AngularJS 1.x] AngularJS - 04. $scope AngularJS의 $scopeAngularJS에서 가장 기초가 되고 중요한 $scope에 대해 알아보자. $scope 객체AngularJS의 $scope은 뷰(View)와 컨트롤러(Controller)를 연결하는 객체이다.$watch API를 제공하며 이는 모델의 변경을 감시한다.$apply API를 제공하며 controllers, services, Angular event handlers와 같은 외부로 부터 발생된 변경사항을 뷰(View)로 반영 $scope 컨트롤러의 관계1. AngularJS의 컨트롤러는 하나의 컨트롤러에 하나의 $scope만을 가지게 된다.2. 컨트롤러 함수 두 개가 있을 경우 컨트롤러 함수당 별도의 $scope 객체가 생성된다.3. 그리고 AngularJS 어플리케이션 루트에 .. 더보기 [AngularJS 1.x] AngularJS - 03. Module (모듈) AngularJS Module (모듈) Module 대부분의 애플리케이션에는 main이 있지만 Angular에는 main이 없다. 하지만 Angular 어플리케이션은 시작할 때 정의한 모듈을 읽는다 AngularJS Module의 정의와 역할 - 모듈은 AngularJS의 주요 기능에 대한 게이트웨이의 역할을 하는 AngularJS 애플리케이션의 최상위 레벨 컴포넌트이다. - HTML 페이지를 AngularJS 응용프로그램으로 확장시키기 위한 진입점이다. - HTML 페이지와 AngularJS가 상호작용하기 위한 매개체이다. - 연관된 각종 컴포넌트를 포함하는 컨테이너이다. - AngularJS 응용프로그램의 구성을 논리적으로 조직화하는 단위이다. - 모듈화 프로그래밍을 지원하는 AngularJS의 아키.. 더보기 [AngularJS 1.x] AngularJS - 02. 이해하기 AngularJS 이해하기 Hello, world 출력- 먼저 AngularJS로 Hello, world 출력해보자 Name : Hello, {{message}}! 위의 코드는 angularJS를 사용하여 Hello, world를 출력한 결과이다.위의 소스를 브라우저에 실행시킨다면 다음과 같은 화면이 나타날 것이다. angularJS의 특징중의 하나인 양방향 데이터 바인딩의 특징을 확인하기 위해서"world"라는 메시지를 실시간으로 변경이 가능하도록 상단에 Input박스를 두었다.양방향 데이터 바인딩에 대해서는 다음에 대해 알아보도록하고, 우선 소스코드를 다시 보면 낯선 단어가 많이 보인다.angular.module ?$scope ?ng-app ? ng-controller ? ng-model ?이런 낯선.. 더보기 [AngularJS 1.x] AngularJS - 01. 소개 AngularJS란? AngularJS는 구글에서 제작하고 2009년에 발표된 자바스크립트 프레임워크이다.그렇다면 프레임워크는 무엇인가?"프레임워크" 는 많은 뜻이 있다. JavaScript 프레임워크의 목적은 보통 웹사이트에 필요한 작업을 하는 데에 불필요한 작업들을 줄이는 것이다. 프레임워크는 기본적으로 틀을 잡아주며, 특정 문제를 해결하기 위해 설계되어 있다. AngularJS 개념AngularJS 는 SPA(Single Page Application) 프레임워크라고 합니다.- 예를 들어, 하나의 웹 페이지가 실행할 때 View 단에 해당되는 부분이 페이지의 주소가 바뀌지 않으면서 또 다른 새로운 view를 동적으로 로드하여 사용하는 것을 SPA 라고 한다.- 아래 그림의 좌측 단일페이지는 브라우저.. 더보기 [TypeScript 타입스크립트] - 유용한 Link TypeScript * Tutorial & Sample... 공식 site- http://www.typescriptlang.org/ * TypeScript란? 설명- http://blog.naver.com/PostView.nhn?blogId=warit&logNo=220118875863&redirect=Dlog&widgetTypeCall=true- http://charlie0301.blogspot.kr/2014/05/typescript.html- http://boxersb.github.io/typescript/2013/03/20/typescript-spec-overview/ * 자바스크립트 vs 타입스크립트 - https://www.youtube.com/watch?v=TWv6tO9ELss- https://.. 더보기 [TypeScript 타입스크립트] - 소개 * TypeScript?- 자바스크립트로 대규모 어플리케이션 개발을 위해 개발- "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript"- 자바스크립트의 상위집합(슈퍼셋) 언어. MS에서 개발되어 발표되었다.- TypeScript는 JavaScript와 완벽 호환되며, 추가적인 타입과 클래스, 인터페이스를 제공하고 정적 타이핑도 제공한다. * 배경- 최근들어 새로운 언어를 발표하는 것이 하나의 트렌드- Apple의 swift, Google의 Dart등의 새로운 실용적인 언어들이 발표- MS에서도 2013 Build 행사에서 TypeScript라는 언어를 발표 * 특징 : JavaScript와 완벽한 호완성을 가지고 있.. 더보기 Javascript 기초 & 처음 공부하는 방법 안녕하세요. 평소에 web쪽에 대해 접할 기회가 없어서공부를 못했었는데요.. 사실 핑계입니다..ㅠㅠ이제 요즘 대세인 web을 슬슬 혼자 공부 해볼까 합니다.역시 자바스크립트 공부라고 구글링에 검색하니까 많이 나오네요^^ 아래 공부하기 좋은 사이트 정리해서 올립니다. JavaScript 제대로 배우기 - https://nolboo.github.io/blog/2014/03/13/how-to-learn-javascript-properly/ [JavaScript] 굉장한 자바스크립트 강좌(영문) 소개 - http://blog.wystan.net/2011/08/02/great-javascript-articles JavaScript를 배우는 좋은 방법 - http://blog.nundefined.com/38- ht.. 더보기 이전 1 다음
