반응형

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

+ Recent posts

티스토리툴바