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