반응형
반응형

jquery와 angulars 같이 사용하기.

requireJS로 시작했다가 무거운거 같아서 그냥 같이 쓰는걸로 해봤다.

문법적인 문제는 발견되지 않았다. 너무 간단한 테스트라서 그럴지도.

 

AS-IS

 : index.html에 require.js와 main.js, angular.js, controllers.js 등을 녹여넣었다.

* index.html

<!doctype html>
<html lang="en" ng-app>
    <head>
        <title>jQuery+RequireJS Sample Page</title>
        <!-- This is a special version of jQuery with RequireJS built-in -->
        <script data-main="scripts/main" src="scripts/require-jquery.js"></script>
               </script>
    </head>
    <body ng-controller="PhoneListCtrl" >
        <h1>jQuery+RequireJS Sample Page</h1>
        <p>Look at source or inspect the DOM to see how it works.</p>
       
       
       
        <div id="mydiv">aaa</div>
        <p>Total number of phones: {{phones.length}} </p>
        <p>Angulars Templates - http://docs.angularjs.org/tutorial/step_02</p>

 <p>Nothing here {{'yet' + '!'}}</p>
 
 <p>1 + 2 = {{ 1 + 2 }}</p>
 
 <p class="hello">{{hello}}______</p>
    </body>
</html> 

* main.js - require.js에서 사용함. 

 require(["jquery"], function($) {
  $("#mydiv").html("Hello this is RequireJS talking");
});


require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

// angular.JS, controllers.js 를 LOAD.
require(["angular"], function($) {

});
require(["controllers"], function($) {

});

* controllers.js - angular.js에서 사용 

 function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S.",
     "age": 0},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet.",
     "age": 1},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet.",
     "age": 2}
  ];
 
  $scope.orderProp = "age";  
  $scope.hello = "Hello, world!"; 
}

 

TO-BE

* index.html 에 다 순차적으로 호출하였다.(require.js 사용안함) 

 <!doctype html>
<html lang="en" ng-app>
    <head>
        <title>jQuery+RequireJS Sample Page</title>
        <!-- This is a special version of jQuery with RequireJS built-in -->
        <script src="scripts/angular.js" ></script>
      <script src="scripts/controllers.js"></script>
      <script src="scripts/jquery-1.5.2.min.js"></script>
      <script src="scripts/jquery.alpha.js" ></script>
      <script src="scripts/jquery.beta.js" ></script>
        <script>        
         $(document).ready(function(){
             $("#mydiv").html("Hello this is RequireJS talking");
             $('body').alpha().beta();
         });   
        </script>
    </head>
    <body ng-controller="PhoneListCtrl" >
        <h1>jQuery+RequireJS Sample Page</h1>
        <p>Look at source or inspect the DOM to see how it works.</p>
       
       
       
        <div id="mydiv">aaa</div>
        <p>Total number of phones: {{phones.length}} </p>
        <p>Angulars Templates - http://docs.angularjs.org/tutorial/step_02</p>

 <p>Nothing here {{'yet' + '!'}}</p>
 
 <p>1 + 2 = {{ 1 + 2 }}</p>
 
 <p class="hello">{{hello}}______</p>
    </body>
</html>

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[APP] cocoa > HTML5, 오브젝트 C를 HTML5로 변환하다.  (0) 2013.02.17
[javascript] Backgrid.js – A set of core Backbone UI elements  (0) 2013.02.17
[javascript] RequireJS - http://requirejs.org/ . a javascript module loader  (0) 2013.02.13
[JBoss] Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability  (0) 2013.02.07
[jQuery] 25+ Excellent jQuery Menu Plugins  (0) 2013.02.05
반응형

 

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

 

http://requirejs.org/

 

 

프로젝트에 require.js와 main.js 파일이 필요하다.

아래에서 main.js를 호출하는 구문이다. 

<script src="require.js" data-main="main"></script>

main.js( data-main="main" )에 로드할 JSLibrary와 해당 JSLabrary의 구문을 입력하면 된다.

아래에는 "jquery.js" 가 있어야 실행이 된다. 

require(["jquery"], function($) {
  $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

 

** Optimize your JavaScript with RequireJS

http://www.webdesignerdepot.com/2013/02/optimize-your-javascript-with-requirejs/

 

 

IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔

Get started then check out the API.

 

require.js 2.1.4MinifiedWith Comments

All you need to start using require.js in the browser.

Sample RequireJS 2.1.4 + jQuery 1.9.1 projectDownload

A zip file containing a sample project that uses jQuery and RequireJS.

r.js: Optimizer and Node and Rhino adapterDownload

The r.js file allows you to run the optimizer as well as run modules in Node or Rhino.

If you are running in Node, and want to use npm to install this file via npm, see the Use with Node page for more information.

For information on its use, as well as how to get the JAR files to run it under Rhino, see the r.js README.

Plugins§ 2

These are useful loader plugins that have the same license terms as require.js itself. Download the plugin file and place it as a sibling to your "data-main" main.js script.

textDownload

Load text files and treat them as dependencies. Great for loading templates. The text strings can be inlined in an optimized build when the optimizer is used.

domReadyDownload

Wait for the DOM is ready. Useful for pausing execution of top level application logic until the DOM is ready for querying/modification.

cs (CoffeeScript)Download

Load files written in CoffeeScript. With this plugin, it is easy to code in CoffeeScript in the browser, it can participate in the optimizer optimizations, and it works in Node and Rhino via the RequireJS adapter. This is the best way to do cross-environment, modular CoffeeScript. The project home has more information on how to install and use it.

i18nDownload

Load string bundles used in internationalization (i18n) that are made up of separate country/language/locale-specific bundles.

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Backgrid.js – A set of core Backbone UI elements  (0) 2013.02.17
[javascript] jquery와 angulars 같이 사용하기.  (0) 2013.02.13
[JBoss] Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability  (0) 2013.02.07
[jQuery] 25+ Excellent jQuery Menu Plugins  (0) 2013.02.05
Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources  (0) 2013.01.30
반응형
마이크로소프트웨어(2013.02), 습관의 힘, 프레임

 

마이크로소프트웨어 (월간) 2월호
국내도서>잡지
저자 : 마소인터렉티브편집부
출판 : 마소인터렉티브(잡지) 2013.01.29
상세보기

 

습관의 힘
국내도서>경제경영
저자 : 찰스 두히그(Charles Duhigg) / 강주현역
출판 : 갤리온 2012.10.30
상세보기

 

프레임
국내도서>자기계발
저자 : 최인철
출판 : 21세기북스(북이십일) 2007.06.08
상세보기

반응형
저작자표시

'생활의 발견 > Books' 카테고리의 다른 글

[도서구매] 마이크로소프트웨어 (월간)3월호, 신 HSK 한권으로 끝내기 3급, 심리학의 즐거움  (1) 2013.03.05
프레임(나를 바꾸는 심리학의 지혜)  (0) 2013.02.22
[도서구매] 역주 유양잡조1|2 , 이조한문 단편집(상|중|하) , 한국도교의기원과역사, 신hsk두달에4급따기  (0) 2013.01.30
[도서] 예제 중심의 Python 파이썬: 쉽고 재미있는 프로그래밍 언어  (1) 2013.01.23
[도서구매] 인생이 허기질 때 바다로 가라, 마스터 키튼 완전판 5/6/7  (2) 2013.01.21
반응형

단식은
생리학상 가장 중요한 신경적,
정신적 기능을 정상상태로 안정시켜
젊게 만드는 효과를 준다. 즉 신경조직은 소생되고
정신력은 개선된다. 분비선 조직과 호르몬 분비는
자극되며 촉진된다. 조직의 생화학적인
미네랄의 균형도 평준화된다.


- 김진대의《단식과 건강》중에서 -


* 단식은 강력합니다.
자신의 육체적 정신적 건강이 '리셋'되고
삶 전체에 일대 전환이 이루어질 수도 있습니다.
불치의 큰 병에 걸린 사람도 더러 살려내고,
젊고 건강할 때 하면 건강을 지켜줍니다.
1년에 한 번쯤 꼭 실천해 보십시오.
자신에게 '비움'의 선물로.

반응형
저작자표시

'생활의 발견 > 아침편지' 카테고리의 다른 글

얼마만의 휴식이던가?  (0) 2013.02.15
"우리는 행복했다"  (0) 2013.02.14
아버지의 포옹  (0) 2013.02.12
엄마의 기도상자  (0) 2013.02.08
황홀경은 짧다  (0) 2013.02.07
반응형

성공은 내가 주변 사람들을
얼마나 밟고 올라섰느냐에 좌우되는 것이 아니다.
오히려 주변 사람들을 얼마나 끌어올려주느냐에 달려있는 것이다.
그렇게 하는 과정 속에서 사람들은 나를 끌어올려주고
나도 그렇게 해주었다.
-조지 루카스(영화 스타워즈 감독)

 

일찍이 철강왕 앤드류 카네기는 ‘타인을 부자로 만들지 않고서는
아무도 부자가 될수 없다’고 말했습니다.
한편, 플라톤은 ‘남을 행복하게 해줄 수 있는 사람만이
행복을 얻을 수 있다’고 갈파했습니다.
먼저 타인의 행복과 성공을 도우면
자연스럽게 나의 행복과 성공이 따라옵니다.

반응형
저작자표시

'생활의 발견 > 행복한 경영' 카테고리의 다른 글

친절을 베푸는 행위에는 결코 낭비라는 게 없다.  (0) 2013.02.15
성공은 항상 곤궁 다음에 오는 것이다.  (0) 2013.02.14
실패 예찬  (0) 2013.02.12
스트레스를 즐겨라  (0) 2013.02.08
부족함은 포기의 이유가 아니라, 성공의 원인이다.  (0) 2013.02.07
반응형

사람들에게 일을 어떻게 처리해야 하는지 알려주지 말라. 대신 무엇을 해야 하는지 알려주라. 그로써 그들의 독창력을 키울 수 있다. - 조지 S. 패튼 장군 -

Never tell people how to do things. Tell them what to do and they will surprise you with their ingenuity. - General Geoge S. Patton -

반응형
저작자표시

'생활의 발견 > Cool' 카테고리의 다른 글

인생은 초콜릿 상자에 있는 초콜릿과 같아서, 어떤 초콜릿을 선택하느냐에 따라 맛이 틀려지듯이 우리의 인생도 어떻게 선택하느냐에 따라 결과도 달라질 수 있다. - 영화 Forrest Gump 中 -  (0) 2013.02.15
많은 사람들이 인생에서 성공하지 못하는 이유는기회가 문을 두드릴 때 뒤뜰에 나가 네잎클로버를 찾기 때문이다. - 월터 크라이슬러 -  (0) 2013.02.14
전심을 다해 보낸 하루는 세상을 발견하는 데 충분하고도 남는 시간이다. - 제임스 러셀 로웰  (0) 2013.02.12
인생의 모든 오락거리들 중 유익하고 재미있는 작품을 읽는 것만큼이나 인생의 빈 공간을 채우기에 적합한 것도 없다. - 조지프 애디슨 -  (0) 2013.02.08
사람은 스테인드 글라스와 같다. 햇빛이 밝을 때는 반짝이고 빛나지만, 어둠이 찾아 왔을 때는 내면의 빛이 있어야만 비로소 그 진정한 아름다운 모습을 드러낸다. - 엘리자베스 퀴블러로스 -  (0) 2013.02.07

+ Recent posts

티스토리툴바